update

MFM-347 · Jan 3, 2025 · 1b92a7d · 1b92a7d
1 parent 66a32fb
commit 1b92a7d
Show file tree

Hide file tree

Showing 13 changed files with 285 additions and 633 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 [![Number of GitHub stars](https://img.shields.io/github/stars/MFM-347/BaseCSS)](https://github.com/MFM-347/BaseCSS/stargazers)
 [![License MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/MFM-347/BaseCSS/blob/main/LICENSE)
 
-BaseCSS is a minimal and flexible CSS library designed for fast, responsive, and maintainable web development. Ideal for developers looking for simplicity and scalability.
+BaseCSS is a minimal and flexible CSS library designed for fast, responsive, and maintainable web development. Ideal for developers looking for simplicity and scalability. 🌟🌐✨
 
 ## Features
 
@@ -20,7 +20,7 @@ BaseCSS is a minimal and flexible CSS library designed for fast, responsive, and
 
 ### Installation
 
-To install the package, use the following command:
+To install the package, use the following command: 🚀📦💻
 
 ```bash
 npm i @tfs-8/basecss
@@ -30,82 +30,121 @@ npm i @tfs-8/basecss
 
 #### In Plain HTML:
 
-Link the CSS file in your `<head>` tag:
+Link the CSS file in your `<head>` tag: 🧾📂🖥️
 
 ```html
-<link rel="stylesheet" href="node_modules/@tfs-8/basecss/base.min.css" />
+<link rel="stylesheet" href="node_modules/@tfs-8/basecss" />
 ```
 
 #### In a JavaScript/TypeScript Project:
 
-Import the CSS in your entry file:
+Import the CSS in your entry file: 📜🔗📦
 
 ```javascript
-import "@tfs-8/basecss/base.min.css";
+import "@tfs-8/basecss";
 ```
 
 #### In SCSS:
 
-If you're using SCSS:
+If you're using SCSS: ✂️🎨📄
 
 ```scss
-@import "node_modules/@tfs-8/basecss/base.min.css";
+@import "node_modules/@tfs-8/basecss";
 ```
 
 ## Using BaseCSS via CDN
 
 ### Installation
 
-To use the CDN, link to the following URL:
+To use the CDN, link to the following URL: 🌐📡✨
 
 ```url
-https://unpkg.com/@tfs-8/basecss/base.min.css
+https://unpkg.com/@tfs-8/basecss
 ```
 
 ### Importing
 
 #### In Plain HTML:
 
-Link the CSS file in your `<head>` tag:
+Link the CSS file in your `<head>` tag: 🧾🌍🔗
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@tfs-8/basecss/base.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/@tfs-8/basecss" />
 ```
 
 #### In a JavaScript/TypeScript Project:
 
-Import the CSS in your entry file:
+Import the CSS in your entry file: 📥📜🔧
 
 ```javascript
-import "https://unpkg.com/@tfs-8/basecss/base.min.css";
+import "https://unpkg.com/@tfs-8/basecss";
 ```
 
 #### In SCSS:
 
-If you're using SCSS:
+If you're using SCSS: 🎨📄✂️
 
 ```scss
-@import "https://unpkg.com/@tfs-8/basecss/base.min.css";
+@import "https://unpkg.com/@tfs-8/basecss";
+```
+
+## Using Specific Sections of BaseCSS
+
+Instead of importing the entire compiled CSS file, you can include only the specific sections you need by importing the corresponding files from the `dist` folder. This allows for greater flexibility and reduced file size. 🎯🗂️⚡
+
+### Available Sections
+
+- **vars**: Variables for theming and custom properties.
+- **reset**: Browser style resets.
+- **type**: Responsive typography styles.
+- **utilities**: Utility classes for quick styling.
+- **components**: Predefined UI components.
+- **scroll**: Smooth scrolling and scrollbar styling.
+
+### Importing Specific Sections
+
+#### In Plain HTML:
+
+Link the desired CSS file in your `<head>` tag: 📂🔗🧾
+
+```html
+<link rel="stylesheet" href="node_modules/@tfs-8/basecss/dist/reset.min.css" />
+```
+
+#### In a JavaScript/TypeScript Project:
+
+Import the specific section in your entry file: 🛠️📜📦
+
+```javascript
+import "@tfs-8/basecss/dist/type.min.css";
+```
+
+#### In SCSS:
+
+If you're using SCSS: ✂️📁🎨
+
+```scss
+@import "node_modules/@tfs-8/basecss/dist/utilities.min.css";
 ```
 
 ## Getting Started
 
-Once BaseCSS is imported, it will:
+Once BaseCSS is imported, it will: 🌟📐💡
 
 1. Reset the default browser styles for consistency.
 2. Apply responsive typography for better readability.
 3. Provide a clean slate for adding your custom styles.
 
-You can now start building your styles on top of this foundation.
+You can now start building your styles on top of this foundation. 🚀🎉💻
 
 ## Contributing
 
-We welcome contributions! Please check the [CONTRIBUTING.md](https://github.com/MFM-347/BaseCSS/blob/main/CONTRIBUTING.md) for guidelines.
+We welcome contributions! Please check the [CONTRIBUTING.md](https://github.com/MFM-347/BaseCSS/blob/main/CONTRIBUTING.md) for guidelines. 🤝💡🌱
 
 ## Credits
 
-Created with ❤️ by [@MFM-347](https://github.com/mfm-347).
+Created with ❤️ by [@MFM-347](https://github.com/mfm-347). 🎨🌟👏
 
 ## License
 
-The code in this repository is licensed under the **MIT License**. View more info [here](https://github.com/MFM-347/BaseCSS/blob/main/LICENSE)
+The code in this repository is licensed under the **MIT License**. View more info [here](https://github.com/MFM-347/BaseCSS/blob/main/LICENSE). 📜✅🖋️