@crunchya/basicss v0.8.3
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
// add this into your nuxt.config.ts css: ['@crunchya/basicss'] // if you installed the color package do this css: ['@crunchya/basicss','@crunchya/basicss-colors']
Create a new folder inside you project directory named : plugins
Create a new file in the new plugins folder you have created and name it: basicss.js or basicss.ts
// 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); });
// add this into your nuxt.config.ts plugins: [ { src: "~/plugins/basicss", mode: "client", } ],
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) } } }
enjoy!
Vuejs + Vite
<!-- add this into your main.js/ts --> import "@crunchya/basicss"; <!-- if you added the colors package add this too --> import "@crunchya/basicss-colors";
In any of the files you want to use the plugin you have to add this code:
import basicss from "@crunchya/basicss.js";
Then to use any of the functions from the plugin :
$basicss.notify("success")
- Enjoy!
Thank you
Thank you in advance to all of you who will be using this framework.
3 months ago
3 months ago
3 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
7 months ago
9 months ago
10 months ago
9 months ago
8 months ago
9 months ago
10 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago