readme + index update

aditya-xq · Jun 8, 2024 · 1a20697 · 1a20697
1 parent ade2799
commit 1a20697
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -15,24 +15,30 @@ Alt CSS is all about simplicity and style, without the fuss. It's built on Tailw
 3. **Keep it simple.**
 4. **Keep it clean.**
 
+Interested to know more about why I created this? Read this [blog post](https://medium.com/p/8f8e11f4a875).
+
 ## 📦 Installation
 To get started with Alt CSS, add it to your project:
 
 ```sh
 npm install altcss
+```
+```sh
 pnpm add altcss
+```
+```sh
 bun add altcss
 ```
 
 ## 🛠 Usage
 
-Import Alt CSS in your project:
+Import Alt CSS in your project (E.g. In sveltekit, you would import this under the script tag of +layout.svelte):
 
-```css
-@import 'altcss/alt.min.css';
+```ts
+import 'altcss/alt.min.css';
 ```
 
-And voilà! You're ready to go. Just use native html without any further CSS in your project. Check out the example usage in our `index.html` file for more details.
+And voilà! You're ready to go. Just use native html without any further CSS in your project.
 
 ## 📝 Documentation
 ### Typography
@@ -50,7 +56,7 @@ And voilà! You're ready to go. Just use native html without any further CSS in
 - **Horizontal Rule**: Stylish horizontal lines
 
 ## 📄 Example
-Here's a quick example to see Alt CSS in action.
+Here's a quick example to see Alt CSS in action: https://aditya-xq.github.io/altcss/
 
 ## 🚧 Roadmap
 - Design frequently used HTML tags
@@ -62,7 +68,7 @@ Here's a quick example to see Alt CSS in action.
 Alt CSS is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
 
 ## 🎉 Acknowledgments
-Special thanks to the Tailwind CSS community for their amazing work.
+Special thanks to the Tailwind CSS community for their amazing work. Also, special mention to ChatGPT for being the awesome companion in helping with debugging, writing code and creative support.
 
 ## Caution
 This project is frequently updated.
diff --git a/dist/README.md b/dist/README.md
@@ -15,24 +15,30 @@ Alt CSS is all about simplicity and style, without the fuss. It's built on Tailw
 3. **Keep it simple.**
 4. **Keep it clean.**
 
+Interested to know more about why I created this? Read this [blog post](https://medium.com/p/8f8e11f4a875).
+
 ## 📦 Installation
 To get started with Alt CSS, add it to your project:
 
 ```sh
 npm install altcss
+```
+```sh
 pnpm add altcss
+```
+```sh
 bun add altcss
 ```
 
 ## 🛠 Usage
 
-Import Alt CSS in your project:
+Import Alt CSS in your project (E.g. In sveltekit, you would import this under the script tag of +layout.svelte):
 
-```css
-@import 'altcss/alt.min.css';
+```ts
+import 'altcss/alt.min.css';
 ```
 
-And voilà! You're ready to go. Just use native html without any further CSS in your project. Check out the example usage in our `index.html` file for more details.
+And voilà! You're ready to go. Just use native html without any further CSS in your project.
 
 ## 📝 Documentation
 ### Typography
@@ -50,7 +56,7 @@ And voilà! You're ready to go. Just use native html without any further CSS in
 - **Horizontal Rule**: Stylish horizontal lines
 
 ## 📄 Example
-Here's a quick example to see Alt CSS in action.
+Here's a quick example to see Alt CSS in action: https://aditya-xq.github.io/altcss/
 
 ## 🚧 Roadmap
 - Design frequently used HTML tags
@@ -62,7 +68,7 @@ Here's a quick example to see Alt CSS in action.
 Alt CSS is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
 
 ## 🎉 Acknowledgments
-Special thanks to the Tailwind CSS community for their amazing work.
+Special thanks to the Tailwind CSS community for their amazing work. Also, special mention to ChatGPT for being the awesome companion in helping with debugging, writing code and creative support.
 
 ## Caution
 This project is frequently updated.
diff --git a/dist/package.json b/dist/package.json
@@ -1,6 +1,6 @@
 {
     "name": "altcss",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "description": "Opinionated, unconventional, lightweight CSS component library.",
     "main": "alt.min.css",
     "files": [

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Alt CSS</title>
+    <title>🌈 Alt CSS</title>
     <link rel="stylesheet" href="dist/alt.min.css">
 </head>
 <body>
@@ -15,8 +15,8 @@ <h3>CSS Component Library</h3>
     <main>
         <section>
             <p>This is a paragraph of text that explains something important. It's styled to be clean and readable in dark mode.</p>
-            <p>Visit the <a href="#">Github repo</a> for a sneak peek on the code.</p>
-            <p>Check out this <a href="#">blog post</a> for more details.</p>
+            <p>Visit the <a href="https://github.com/aditya-xq/altcss" target="_blank" rel="noopener noreferrer">Github repo</a> for a sneak peek on the code.</p>
+            <p>Check out this <a href="https://medium.com/p/8f8e11f4a875" target="_blank" rel="noopener noreferrer">blog post</a> for more details.</p>
         </section>
         <hr>
         <table>
@@ -26,18 +26,18 @@ <h3>CSS Component Library</h3>
                         <div>
                             <div>
                                 <h4>Design Principles</h4>
-                                <p>- Don't write class names.</p>
-                                <p>- Don't write CSS.</p>
-                                <p>- Keep it simple.</p>
-                                <p>- Keep it clean.</p>
+                                <p>- Don't write class names</p>
+                                <p>- Don't write CSS</p>
+                                <p>- Keep it simple</p>
+                                <p>- Keep it clean</p>
 
                             </div>
                         </div>
                     </td>
                     <td>
                         <div>
                             <div>
-                                <h4>Implemented v0.0.4</h4>
+                                <h4>Implemented v0.0.6</h4>
                                 <p>- Typography: h1, h2, h3, h4, p, a</p>
                                 <p>- Layouts: div card, table</p>
                                 <p>- Content: section, article</p>
@@ -49,7 +49,7 @@ <h4>Implemented v0.0.4</h4>
                         <div>
                             <div>
                                 <h4>Roadmap</h4>
-                                <p>- Design frequently used html tags</p>
+                                <p>- Design for all html tags</p>
                                 <p>- Clean and minify CSS</p>
                                 <p>- Light/Dark mode</p>
                                 <p>- Design builder</p>

diff --git a/src/index.css b/src/index.css
@@ -3,4 +3,3 @@
 @import './typography.css';
 @import './layout.css';
 @import './base.css';
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,4 +3,3 @@
		@import './typography.css';
		@import './layout.css';
		@import './base.css';