BasiCss

BasiCss is a Vuejs and Nuxtjs css framework in construction, i tend to finish it really soon but with my studies and all, it will be hard. BasiCss is based on the Skeleton framework. You can test the beta version here, just follow the instructions below. I hope to finish a CDN version too at the end for it to be available for everyone.

Installation

You have to install the main package :

# for npm
npm i @crunchya/basicss

# for pnpm
pnpm i @crunchya/basicss

Then the sass and scss packages plus the loader :

# for npm
npm i sass sass-loader

# for pnpm
pnpm i sass sass-loader

And then install the js package for the framework :

# for npm
npm i @crunchya/basicss.js

# for pnpm
pnpm i @crunchya/basicss.js

You can also use the palette of colors written by hand by myself :

# for npm
npm i @crunchya/basicss-colors

# for pnpm
pnpm i @crunchya/basicss-colors

Configuration

Nuxtjs

1. 
    // add this into your nuxt.config.ts
   
    css: ['@crunchya/basicss']
   
    // if you installed the color package do this
   
    css: ['@crunchya/basicss','@crunchya/basicss-colors']

2. Create a new folder inside you project directory named : plugins

3. Create a new file in the new plugins folder you have created and name it: basicss.js or basicss.ts

4.  // Add this in the new file basicss.js/.ts
    import { defineNuxtPlugin } from "nuxt/app";
   
    import basicss from "@crunchya/basicss.js";
   
    export default defineNuxtPlugin((nuxtApp) => {
        nuxtApp.provide("basicss", basicss);
    });

5. 
    // add this into your nuxt.config.ts
   
    plugins: [
        {
            src: "~/plugins/basicss",
            mode: "client",
        }
    ],
   

6. To use the javascript functions, in each vue file where you want to use it you have to add this code:

   // for <script setup>
   const { $basicss } = useNuxtApp();
      
   // and to call any function from the plugin
   
   $basicss.notify("success")
   
   //for <script>
   export default {
       data() {
           return {
               // get the basicss.js plugin created earlier
               basicss: useNuxtApp().$basicss
           }
       },
       methods: {
           // new function/method (for a button for example)
           myFunction(notificationId) {
               // call any function from the plugin
               this.basicss.notify(notificationid)
           }
       }
   }

7. enjoy!

Vuejs + Vite

1. 
    <!-- add this into your main.js/ts -->
   
    import "@crunchya/basicss";
   
    <!-- if you added the colors package add this too -->
   
    import "@crunchya/basicss-colors";

2. In any of the files you want to use the plugin you have to add this code:

   
   import basicss from "@crunchya/basicss.js";
   

3. Then to use any of the functions from the plugin :

   $basicss.notify("success")

4. Enjoy!

Thank you

Thank you in advance to all of you who will be using this framework.