Awesome
fieber.css
fieber.css is a classless and accessible CSS framework. It combines semantic markup with minimalist, brutalist, and opinionated styles.
Check out the demo site.
Features
- Based on semantic HTML5 π
- Accessibility-first approach πͺ
- Supports every modern HTML element π
- Responsive layout π₯π±
- Light/dark theme ππ
- Written in vanilla CSS π¦
- Just 17 kB unminified π€
- Easily customizable π§
- Print styles included π¨
- RTL-ready π
Usage
Download the fieber.css
file and insert it into the <head>
of your website:
<link rel="stylesheet" href="fieber.css">
A npm package may come in the future.
Customization
You can easily change the basic appearance like text and colors by adjusting the custom properties.
Things to keep in mind when using fieber.css:
- Classless frameworks come with a lot of limitations. Using them as a starting point for a more complex website with lots of class-based stylings may be a bad choice.
- This framework does not include a full-featured CSS reset, e.g. most default
margin
values are kept. - Please ensure an adequate contrast when using custom colors.
- Right-to-left content is supported by adding
dir="rtl"
to the<html>
tag. - The current font stacks may not be perfect for writing systems like Arabic script.
- Remember to respect your usersβ motion preferences when adding animations. (Example)
There are many other classless frameworks that may be better suited for your specific use case.
Browser support
Browser | Version |
---|---|
Chrome | 105+ |
Edge | 105+ |
Opera | 91+ |
Safari | 15.4+ |
Firefox | 121+ |
License
fieber.css is licensed under the MIT License.
The example video is from Big Buck Bunny by the Blender Foundation (CC BY 3.0).