An opinionated fork of PicoCSS with more components and a refined visual design
DaftCSS is a fork of the excellent PicoCSS framework. Just like Pico, it's a minimal class-light semantic CSS framework that adds and changes a few things:
- Semantic HTML - Focus on writing HTML the way it was intended
- Class-Light - Most HTML components come prestyled reducing the use of classes
- Tiny Footprint - DaftCSS is even smaller than Pico because of a new color system
- No Dependencies - The single CSS file includes everything you need
- Element Sizing Utilities - Added
.smalland.largeclasses for buttons, form elements and forms - Grid Column Spanning -
.span-2,.span-3, and.span-4make grid items span multiple columns - Badge Component -
.badgecomponent with size and color variants<span class="badge">Badge</span> - Status Indicators -
.statuscomponent for showing online/offline states<span class="status success"></span>
- Default Only - We removed
classless,fluidandconditionaloptions - No Themes - Instead of different CSS files, just change the
--daft-themebase color - Disabled Scaling - Elements and fonts remain consistent sizes on bigger viewports
- Less Spacing - Reduced padding and margins inside and between different elements
- Simplified Variables - Reduced from 336+ color variables to ~30 core variables
- Visual Details - Multiple small design, color and layout changes
- Inter Font - As the default font family if it's installed
Download Daft CSS and link /css/daft.min.css in the <head> of your website.
<link rel="stylesheet" href="css/daft.min.css">Change your entire theme with just one CSS variable:
:root {
--daft-theme: #0066cc; /* Any color you want! */
}Or use any CSS color format:
- RGB:
rgb(255, 107, 107) - HSL:
hsl(0, 100%, 71%) - Named colors:
dodgerblue
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="css/daft.min.css">
<title>Hello world!</title>
</head>
<body>
<main class="container">
<h1>Hello world!</h1>
</main>
</body>
</html>- Major SCSS optimizations - Reduced codebase by 10%+ through two critical improvements:
- Eliminated element-sizes.scss duplication - Reduced file from 265 to 167 lines (37% reduction) by creating unified mixins that generate both direct and container-based selectors
- Created shared interactive element base - Extracted common styles from buttons and form elements into a reusable mixin, removing ~100 lines of duplicate code
- Fixed search input text overlap - Implemented CSS variable-based spacing system for
.smalland.largeform elements, ensuring consistent padding calculations across all input types including search fields
This project is built upon the excellent foundation of PicoCSS, created by Lucas Larroche. We are grateful for their work in creating a minimal, semantic CSS framework that serves as the perfect starting point for this more opinionated variant.
We welcome contributions! Please read our contributing guidelines before submitting PRs.
Like the original PicoCSS, this project is licensed under the MIT License.