A clean classless classy cascading style sheet for a lil' pazazz you need on the go.
It [may] also help incentivize/promote cleaner semantic HTML.
All fonts within the repo are 100% free to use and are from <dafont.com>. This project is licensed under GNU AGPLv3.
- Tacit: tactful, and it just works (I stole your html page to test against thx🙇🏿♂️🙏🏿)
- Bulma: it may not be classless but it's my personal favourite and adds some nice buff in base (without classes)
- concrete: solid base and beautiful B/W styling, I like it
- MVP: it's got some opinions but it's good especially if you want easy to use components
I tried to keep the sizing and overall look and feel of the page as close to browser defaults as possible (which I think is sexy in its own way). But with some intentional markup changes beautiful pages a cascade away.
- tables are scrollable, but to do this (without enforcing a parent element) the height is constrained so it scrolls in the y-axis as well (at 80vh)
- nest inputs in labels: this makes them fullwidth → hence nicer
- add a height and width attributes to
img's especially SVG images (in case they don't have a set/intrinsic width and height)
Add link to your HTML file:
<!-- recommended -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/csc530/cacssade/cacsscade.min.css">or
<link rel="stylesheet" href="https://raw.githubusercontent.com/csc530/cacssade/refs/heads/main/cacsscade.min.css">or clone the repo and download the file and link to it locally.
- basics [styling]
- colours
- printer friendly
- dark-mode
- Catppuccin compliance
- ⭐style✨
- responsive
- animations