2 ms·
i collect these CSS frameworks for fun! here's my list: ### Drop-in CSS Frameworks preview some of these with https://sites.yax.com/ https://sites.yax.com/ -
by swyx 4y ago
i collect these CSS frameworks for fun! here's my list:
### Drop-in CSS Frameworks
preview some of these with https://sites.yax.com/ https://sites.yax.com/
- [Spectre.css](https://picturepan2.github.io/spectre/getting-started/installation.html https://picturepan2.github.io/spectre/getting-started/instal...)
- https://latex.vercel.app/ https://latex.vercel.app/
- https://purecss.io/ https://purecss.io/
- https://picocss.com/ https://picocss.com/
- https://gdcss.netlify.app/ https://gdcss.netlify.app/ (inspired by UK design system)
- https://simplecss.org/demo https://simplecss.org/demo
- https://ajusa.github.io/lit/ https://ajusa.github.io/lit/
- https://screencss.com/ https://screencss.com/
- https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/
- https://github.com/xz/new.css https://github.com/xz/new.css
- https://github.com/oxalorg/sakura https://github.com/oxalorg/sakura
- https://native-elements.dev/ https://native-elements.dev/
- https://watercss.kognise.dev/ https://watercss.kognise.dev/
- https://luxacss.com/ https://luxacss.com/
- https://jenil.github.io/chota/ https://jenil.github.io/chota/
- https://chr15m.github.io/DoodleCSS/ https://chr15m.github.io/DoodleCSS/ hand drawn look
- https://github.com/susam/spcss https://github.com/susam/spcss
- https://elementcss.neocities.org/ https://elementcss.neocities.org/
- https://codepen.io/web-dot-dev/pen/abpoXGZ https://codepen.io/web-dot-dev/pen/abpoXGZ the base classes for web.dev/learn/csss
- https://open-props.style/ https://open-props.style/ css variables framework - "tailwind without tailwind"
- https://github.com/alvaromontoro/almond.css https://github.com/alvaromontoro/almond.css classless css framework. [thin fonts]
(https://news.ycombinator.com/item?id=30497165 https://news.ycombinator.com/item?id=30497165).
- Collections of even more:
- https://github.com/dohliam/dropin-minimal-css
- https://github.com/dbohdan/classless-css
- https://github.com/ubershmekel/cssbed (https://www.cssbed.com/)
- https://thesephist.github.io/paper.css/ and https://thesephist.github.io/blocks.css/
full list here: https://github.com/sw-yx/spark-joy/blob/master/README.md#drop-in-css-frameworks https://github.com/sw-yx/spark-joy/blob/master/README.md#dro...
- doodlesdev 4y ago> https://chr15m.github.io/DoodleCSS/ https://chr15m.github.io/DoodleCSS/ hand drawn look Just found the stylesheet for my website's redesign, thank you :) I'm surprised that Tacit is missing from the list though. When it comes to modern design using classless CSS my order of preference is normally water.css, tacit, and then MVP.css. It just looks great and uses the HTML5 semantic elements to their full potential.
- swyx 4y agowell, i just added it :)
- leokennis 4y agoMy go to seems to not be in your list yet: https://newcss.net https://newcss.net I always use this if I need to quickly make some structured info visible on the web. Works on mobile, works in dark mode, looks inoffensive and professional and is super small.
- swyx 4y agoyup, i have it under https://github.com/xz/new.css https://github.com/xz/new.css but noted!
- uallo 4y agoThe problem with some of these is that they are terrible for accessibility. There is extremely low contrast, missing focus styling, invalid non-semantic HTML, ... Having a list of good examples only would be much more interesting than a list of everything.
- swyx 4y agonone of them tripped my "low contrast" radar - and i'm usually pretty good on that - please let me know which in particular and i'll add a warning
- jamietanna 4y agoI'd also say https://classless.de https://classless.de should be on the list - I use it quite heavily and really like it, as well as being able to theme it more easily too!
- pauljonas 4y agoMy favorite: https://classless.de/ https://classless.de/