Vite.js

This is the First Framework that JKCSS work. The developers can read more information About Vite.js can use this link

Go through the following setup section for how to install JKCSS on Vite.js

Setup

Now We are going to start a new Project Vite.js with JKCSS. For that first you have to follow up the following steps for develop peoject environment

1 Step

Create a Project Folder and setup the npm package manager. for example I create a project folder nameed project-vite and then go to inside of the created folder

mkdir project-vite

go inside the folder

cd project-vite

2 Step

Now you have to initialize npm so that using following command

npm init -y

3 Step

Now you have to install Vite using following command

npm i --save-dev vite

4 Step

Now You have to install JKCSS using Npm package Manager npm i @jehankandy/jkcss or go to Go to JKCSS NPM

npm i --save-dev @jehankandy/jkcss

5 Step

Now you have to install Sass from Npm so that use the following command

npm i --save-dev sass

These are the basic step of the develop project evnironmnet of the vite + JKCSS projects

Now you have to make some folders and files on your project

Project Folder structure

project-vite/
|-- src/
|-- |-- js/
|-- |-- |-- script.js
|-- |-- scss/
|-- |-- |-- style.scss
|-- |-- index.html
|-- package-lock.json
|-- package.json
|-- vite.config.js


for more understanding
  1. create src folder in the project folder
  2. create 2 folders (js and scss) src/js and src/scss inside the src folder
  3. Create .js file called script.js inside the js src/js/script.js
  4. Create .scss file called style.scss inside the scss src/scss/style.scss
  5. Create index.html inside the src src/index.html
  6. Create vite.config.js file inside the root folder (project folder)

Configure the Vite for Project

In the step you have to Configure the vite for the vite + jkcss project

Now copy the Following content and past it in the vite.config.js

import { resolve } from 'path'

export default {
     root: resolve( __dirname, 'src' ),
     build: {
         outDir: '../output'
     },
     server: {
         port: 8080
     }
}

Html Code

Now edit the src/index.html file like following. so that copy the following contect and past it in src/index.html file



<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vite + JKCSS</title>
      <script type= "module" src="./js/main.js"></script>
</head>
<body>

       <h1 class="jk-display-4"> Vite + JKCSS Project </h1>

       <button class="jkbtn jkbtn-blue"> Button Blue </button>
       <button class="jkbtn jkbtn-gray"> Button Gray </button>
       <button class="jkbtn jkbtn-green"> Button Green </button>
       <button class="jkbtn jkbtn-red"> Button Red </button>
       <button class="jkbtn jkbtn-yellow"> Button Yellow </button>
       <button class="jkbtn jkbtn-info"> Button Info </button>

</body>
</html>

For Npm Start

In the section You have to start vite project, so that you have to edit the package.json file

You need to find "scripts" inside the package.json file

and add "start" : "vite",



     "scripts" : {
         "start" : "vite",
         "test" : "echo \"Error: no test specified\" && exit 1"
    }


Import JKCSS to the Vite + JKCSS project

Now You have to go to the src/scss/style.scss

Then add the following contect to the src/scss/style.scss file


// Import the jkcss CSS

@import "../../node_modules/@jehankandy/jkcss/src/jkcss.min.css";

After that,

You have add the following contect to the src/js/script.js file

// Import custom CSS file (src/scss/style.scss)

import "../scss/style.scss";


// Import JKCSS JS

import * as jkcss from "../../node_modules/@jehankandy/jkcss/js/jkcss.min";

finalize

This is the end of the setups

Lastly you have to run the vite project using following command

npm start

Now you can continue the project.....!