Welcome to AltCSS, the opinionated, offbeat, lightweight CSS component library you didn't know you needed! 🎉
AltCSS is all about simplicity and style, without the fuss. It's built on Tailwind CSS and designed to make your web projects look sleek and modern with minimal effort.
- Typography: Beautifully styled headings, paragraphs, and links to make your content pop.
- Layouts: Easy-to-use structural elements like sections and articles, with card designs and responsive tables.
- Base Styles: Simple yet elegant base styles for a consistent look across your site.
- Don't write class names.
- Don't write CSS.
- Keep it simple.
- Keep it clean.
Interested to know more about why I created this? Read this blog post.
To get started with AltCSS, add it to your project:
npm install altcsspnpm add altcssbun add altcssImport AltCSS in your project (E.g. In sveltekit, you would import this under the script tag of +layout.svelte):
import 'altcss/alt.min.css';And voilà! You're ready to go. Just use native html without any further CSS in your project.
Only these tags are supported at the moment. More will be added soon. To understand how to use them, you can refer to index.html.
- Headings:
h1,h2,h3,h4 - Text:
p - Links:
a
- Sections:
section,article - Cards:
divelements with nested structures - Tables: Responsive and clean table designs
- Body: Responsive margins and padding
- Horizontal Rule: Stylish horizontal lines
Here's a quick example to see AltCSS in action: https://aditya-xq.github.io/altcss/
- Design frequently used HTML tags
- Clean and minify CSS
- Light/Dark mode
- Design builder
AltCSS is licensed under the MIT License. See the LICENSE file for more information.
Special thanks to the Tailwind CSS community for their amazing work. Also, special mention to ChatGPT/Copilot/Cody for being the awesome companions in helping with debugging, writing code and creative support.
This project is frequently updated.