A small, opinionated CSS framework to make sites look alright with minimal effort
โ ๏ธ Work in progress. Things are most certainly incomplete and/or broken, and will definitely change.
- ๐ฅ Embraces semantic HTML to make native elements look great out of the box, without classes
- ๐ Small set of utilities for additional states and convenience
- ๐ Tiny footprint with no runtime dependencies or build step required
- ๐ Automatic color system that reduces time spent fiddling with color palettes
- ๐ช Fully responsive
From a CDN:
@import url("https://esm.sh/gh/andreasphil/[email protected]/dist/index.min.css")
layer(theme);
import { useThemeColor } from "https://esm.sh/gh/andreasphil/[email protected]";
With a package manager:
npm install github:andreasphil/design-system#<tag>
Find the demo at https://design-system.a13i.dev.
First, import the CSS. I recommend using layers to avoid conflicts and to avoid specificity chaos when customizing.
@import "@andreasphil/design-system/style.css" layer(theme);
@layer theme {
/* You can add customizations and override variables here. */
}
There is a helper that will manage the theme color for light and dark mode automatically:
import { useThemeColor } from "@andreasphil/design-system";
const { unsubscribe } = useThemeColor();
// Call when you want to stop automatic theme color management
unsubscribe();
Design System is built with Lightning CSS. Packages are managed by pnpm. The following commands are available:
pnpm dev # Compile stylesheets in watch mode
pnpm build # Bundle for production
For a demo, open index.html in a browser.
Deployment should work out of the box when linking the repository to a project on Netlify.
This library uses a number of open source packages listed in package.json. Icons are from Lucide. It was inspired by Pico.css.
Thanks ๐