A simple, clean CSS design system built from scratch — no heavy frameworks, just straightforward components you can drop into any project.
WebCSS is a lightweight front-end design system that gives you ready-to-use UI components styled with pure CSS. Think of it as your own mini Bootstrap — but simpler, easier to understand, and fully in your control.
The project has three main sections:
- Examples — Live demos of 18 common UI components
- Colors — A color palette with hex values and usage guides
- Fonts — 5 italic Google Fonts with live previews and CSS classes
Spinners, Toasts, Tooltips, Pagination, Progress bars, Scrollspy, Popovers, Forms, Navigation (tabs & pills), Tables, Cards, Badges, Accordion, Alerts, Breadcrumbs, Buttons, and Button groups.
- Clone or download this repository
- Open the folder in your code editor
- Launch
WebCSS.htmlin your browser — that's it!
website-design-system-starting/
├── WebCSS.html
├── WebCSS.css
└── logo.jpg
No installs. No build tools. No dependencies. Just open and go.
Every component has a live demo and a code snippet right on the page. Find what you need, copy the HTML, paste it into your project, and make sure WebCSS.css is linked.
For example, to add a button:
<link rel="stylesheet" href="WebCSS.css">
<button class="btn btn-primary">Click me</button>Five italic fonts are available as simple CSS classes:
| Class | Font |
|---|---|
.font-playfair |
Playfair Display |
.font-dancing |
Dancing Script |
.font-lora |
Lora |
.font-cormorant |
Cormorant Garamond |
.font-crimson |
Crimson Pro |
Usage:
<p class="font-lora">Beautiful italic text</p>Click the Dark Mode button in the top-right corner of the navbar to toggle between light and dark themes. Every component supports it out of the box.
Works in all modern browsers — Chrome, Firefox, Safari, and Edge.
- Plain HTML5
- Plain CSS3
- Vanilla JavaScript
- Google Fonts
Feel free to use this for personal or commercial projects. No attribution required.