|
| 1 | +# launch.css |
| 2 | + |
| 3 | +<p align="center"> |
| 4 | + <img src="https://img.shields.io/npm/v/launch.css?style=flat-square" alt="npm version"> |
| 5 | + <img src="https://img.shields.io/npm/dt/launch.css?style=flat-square" alt="npm downloads"> |
| 6 | + <img src="https://img.shields.io/github/license/TorstenDittmann/launch-css?style=flat-square" alt="license"> |
| 7 | +</p> |
| 8 | + |
| 9 | +> A classless CSS framework built for speed. Style your website later—build it now. |
| 10 | +
|
| 11 | +launch.css is a minimalist, classless CSS framework focused on helping you launch projects quickly. It applies sensible styling to HTML elements without requiring class names, so you can build functional interfaces fast and style them later. |
| 12 | + |
| 13 | +## Features |
| 14 | + |
| 15 | +- **Zero Classes** - Style HTML elements directly, no need for complex class naming |
| 16 | +- **Light/Dark Themes** - Built-in theme support with simple switching |
| 17 | +- **Multiple Layouts** - Choose between website and dashboard layouts |
| 18 | +- **Responsive** - Looks great on all devices with built-in breakpoints |
| 19 | +- **Lightweight** - Only the essentials, no bloat |
| 20 | +- **Modern** - Built with modern CSS features |
| 21 | + |
| 22 | +## Installation |
| 23 | + |
| 24 | +### NPM (recommended) |
| 25 | + |
| 26 | +```bash |
| 27 | +npx nypm add launch.css |
| 28 | +``` |
| 29 | + |
| 30 | +Then import in your JavaScript: |
| 31 | + |
| 32 | +```js |
| 33 | +import "launch.css"; |
| 34 | +``` |
| 35 | + |
| 36 | +### CDN |
| 37 | + |
| 38 | +Add the following to your HTML: |
| 39 | + |
| 40 | +```html |
| 41 | +<link rel="stylesheet" href="https://unpkg.com/launch.css" /> |
| 42 | +``` |
| 43 | + |
| 44 | +## Basic Usage |
| 45 | + |
| 46 | +Just write semantic HTML and launch.css will style it for you. Add data attributes to control layout and theme: |
| 47 | + |
| 48 | +```html |
| 49 | +<!DOCTYPE html> |
| 50 | +<html lang="en" data-theme="dark"> |
| 51 | + <head> |
| 52 | + <meta charset="UTF-8" /> |
| 53 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 54 | + <title>My launch.css Site</title> |
| 55 | + </head> |
| 56 | + <body data-layout="website"> |
| 57 | + <header> |
| 58 | + <nav> |
| 59 | + <a href="/">My Site</a> |
| 60 | + <menu> |
| 61 | + <li><a href="/">Home</a></li> |
| 62 | + <li><a href="/about">About</a></li> |
| 63 | + <li><a href="/contact">Contact</a></li> |
| 64 | + </menu> |
| 65 | + </nav> |
| 66 | + </header> |
| 67 | + <main> |
| 68 | + <section> |
| 69 | + <h1>Welcome to my site</h1> |
| 70 | + <p>Built with launch.css - no classes needed!</p> |
| 71 | + <button>Click me</button> |
| 72 | + </section> |
| 73 | + </main> |
| 74 | + </body> |
| 75 | +</html> |
| 76 | +``` |
| 77 | + |
| 78 | +## Theme Switching |
| 79 | + |
| 80 | +Toggle between light and dark themes with a simple attribute change: |
| 81 | + |
| 82 | +```html |
| 83 | +<html data-theme="light"> |
| 84 | +<!-- or --> |
| 85 | +<html data-theme="dark"> |
| 86 | +``` |
| 87 | + |
| 88 | +## Layout Options |
| 89 | + |
| 90 | +launch.css provides two main layout options: |
| 91 | + |
| 92 | +```html |
| 93 | +<!-- Standard website layout --> |
| 94 | +<body data-layout="website"> |
| 95 | + |
| 96 | +<!-- Dashboard/app layout with fixed header --> |
| 97 | +<body data-layout="dashboard"> |
| 98 | +``` |
| 99 | + |
| 100 | +## Examples |
| 101 | + |
| 102 | +Check the `examples` directory for complete implementation examples: |
| 103 | + |
| 104 | +- Website example with blog layout |
| 105 | +- Dashboard/application layout |
| 106 | + |
| 107 | +## Documentation |
| 108 | + |
| 109 | +Visit [https://launch-css.dev](https://launch-css.dev) for complete documentation and examples. |
| 110 | + |
| 111 | +## License |
| 112 | + |
| 113 | +MIT © [Torsten Dittmann](https://github.com/TorstenDittmann) |
0 commit comments