| Author: | TorstenDittmann |
|---|---|
| Views Total: | 0 views |
| Official Page: | Go to website |
| Last Update: | April 15, 2025 |
| License: | MIT |
Preview:
Description:
launch.css is a minimalist, classless CSS framework that helps you build and launch web projects quickly.
Unlike traditional CSS frameworks (like TailwindCSS and Bootstrap) that require learning complex class naming conventions, launch.css applies styling directly to HTML elements themselves.
It’s great for proofs-of-concept, MVPs, or even simple sites where you don’t need a complex design system.
Features:
- Zero Classes: Styles applied directly to HTML tags. Forget
.btnor.containerfor basic setup. - Light/Dark Themes: Switch themes using a simple
data-themeattribute on the<html>tag. - Multiple Layouts: Choose between a standard
websitelayout or adashboardlayout (often implying a fixed header) viadata-layouton<body>. - Responsive: Adapts reasonably well to different screen sizes out of the box.
- Lightweight: Very small footprint. No kitchen sink included, just the essentials.
- Modern CSS: Built using current CSS features like custom properties.
How to use it:
1. Install launch.css and import it in your main JavaScript entry point:
# NPM $ npm install launch.css
import "launch.css";
2. Or load the main stylesheet in your HTML document’s head:
<link rel="stylesheet" href="https://unpkg.com/launch.css" />
3. Create a standard HTML document, write semantic HTML elements, and let launch.css handle the styling.
4. Switch between dark and light modes using the data-theme attribute:
<!-- Light theme --> <html data-theme="light"> <!-- Dark theme --> <html data-theme="dark">
5. Switch between website and dashboard layouts using the data-layout attribute:
<!-- Standard website layout with flowing content --> <body data-layout="website"> <!-- Dashboard/application layout with fixed header --> <body data-layout="dashboard">
See Also:
Responsive Classes CSS Framework – Prime.css
Modern Classless CSS Framework – cosmoCSS
Minimal Classless CSS Framework – Simple.css
Modern Web Styling Without Class Declarations – Classless.css
Minimal Clean CSS Design System – Pico.css
Class-Less CSS Framework for Responsive Accessible Web Design – VanillaHTML
Classless Themeable CSS Framework For Modern Web Design – Dev.css
Minimal Classless CSS Framework To Build Elegant Webpages – Magick.css