Skip to content

Commit 41d4228

Browse files
committed
Update README.md
1 parent bd9bf21 commit 41d4228

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
![Downloads](https://img.shields.io/github/downloads/altxriainc/kromacss/total)
55
![Status](https://img.shields.io/badge/status-stable-green)
66
![CodeQL](https://github.com/altxriainc/kromacss/workflows/CodeQL/badge.svg)
7+
![npm version](https://img.shields.io/npm/v/kromacss)
8+
![npm downloads](https://img.shields.io/npm/dt/kromacss)
79
![License: CC BY-ND 4.0](https://img.shields.io/badge/License-CC%20BY--ND%204.0-lightgrey.svg)
810

911
**KromaCSS** is a modern, lightweight, and dependency-free CSS framework designed for simplicity, speed, and adaptability. Built with the latest CSS features and enhanced by vanilla JavaScript, KromaCSS offers a robust collection of responsive, modular components. Ideal for developers who want efficient, adaptable styling for both personal and commercial projects without the need for any extra requirements.
@@ -35,6 +37,38 @@ Include the following lines in your HTML file to load KromaCSS.
3537
<script src="https://cdn.jsdelivr.net/gh/altxriainc/kromacss@latest/src/js/bundle.js"></script>
3638
```
3739

40+
### Step 2: Install via NPM
41+
42+
You can also install KromaCSS via npm:
43+
44+
```bash
45+
npm install kromacss
46+
```
47+
48+
Then import KromaCSS into your JavaScript or CSS project:
49+
50+
#### Import CSS and JavaScript in Your JavaScript File
51+
52+
```javascript
53+
// Import KromaCSS styles
54+
import 'kromacss/src/css/bundle.css';
55+
56+
// Import KromaCSS functionality
57+
import 'kromacss/src/js/bundle.js';
58+
```
59+
60+
#### Directly Include Files in HTML (Post npm Install)
61+
62+
If not using a bundler, link the installed files directly in your HTML:
63+
64+
```html
65+
<!-- KromaCSS Stylesheet -->
66+
<link rel="stylesheet" href="node_modules/kromacss/src/css/bundle.css">
67+
68+
<!-- KromaCSS JavaScript -->
69+
<script src="node_modules/kromacss/src/js/bundle.js"></script>
70+
```
71+
3872
### Step 2: Add Components
3973

4074
KromaCSS provides ready-to-use components. For example, to create a button:

0 commit comments

Comments
 (0)