Hello Coders,
Using Bootstrap or other fully featured CSS Framework definitely is a good idea for complex projects with a lot of requirements, but for small, one-page projects using a Lightweight CSS Framework might be a better choice. A small CSS framework should be easier to learn by a pure developer and the end-product consumed by users that appreciate simplicity and loading speed. The list contains only frameworks that are actively supported and provide all basic features to code modern, responsive websites
- 🔥 Pico.CSS - Minimal Design System
🔥 Pure - responsive CSS modules
👉 FICTOAN - intuitive, modular CSS Framework
👉 Milligram - a minimalist CSS framework
👉 Spectre - a modern framework for faster development
👉 Picnic CSS - a lightweight CSS for hackers 🤔
Pico.CSS 🎁 7.7 kB
Pico might be a good starting point for a clean and lightweight design system - features:
Responsive - Elegant and consistent adaptatives spacings and typography on all devices. Light or Dark mode - Shipped with two beautiful color themes, automatically enabled according to the user preference. One CSS File - No dependencies, package manager, external files or JavaScript.
- Pico.CSS - HOMEPage (docs included)
- Basic Sample - with dark mode
FICTOAN 🔥🔥
Fictoan is an intuitive framework for designers looking to code interfaces that comes with a ready-to-use version for React.
Intuitive Naming - FICTOAN uses straight-forward and intuitive class names like .horizontal-center-this, .no-padding-left, .center-on-mobile and so on. Simple to use, and easy to recollect.
Development-ready - It comes with a set of pre-defined elements that you can simply drop into your project. Cards, sidebar menus, modal windows and more.
Milligram 🎁 2kb
Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.
Spectre.CSS 🎁 ~10kb
A Lightweight, Flexbox-based CSS Framework - Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.
- Spectre.CSS - project HOMEpage
- Spectre.CSS - Github repo
Pure CSS 🎁 3.7kb
Pure is ridiculously tiny. The entire set of modules clocks in at 3.7KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.
Picnic CSS 🎁 10kb
Picnic is completely modular so you can easily modify and test each part. Picnic is written in SCSS with many variables and classes (placeholders) to make it easy to extend.
Mobile-First CSS Framework - Picnic's mission is to be under 10kb of compressed CSS for a better and faster mobile load.
- Picnic CSS - product HOMEpage
- Components page
Let me know your thoughts in the comments and please mention projects you built using a Lightweight CSS Framework.
Thanks for reading! Other resources and articles you might like:
- Free React Dashboards - a curated list | Dev.to
- Next JS Templates - Dev.to article
Top comments (17)
Another one to check out would be SpryCss by default it is about 12kb, but it defaults with 3 breakpoints and 10 colors, but I typically only use 2 breakpoints and 7 colors for most of my projects, which brings it down to about 9kb. It is easy to manage the breakpoints, colors, sizing options, etc in the variables file. Full disclosure I created it and I am looking for suggestions, so let me know what you think or add issues to the project. Thanks
Sounds great @ggedde
A minimal presentation/docs side migth help the adoption.
In case you have the time, drop here a message one is done.
🚀🚀
Yes, a link to the docs is posted on the Readme.
Here it is: ggedde.github.io/spry-css
Let me know if you have any suggestions.
Thanks
looks nice
MOD-CSS is another relatively new framework, which supports 6 breakpoints, states, a Bootstrap-like flexbox grid and almost all CSS properties. It is a very lightweight utility-first CSS framework (barely 10kb) that can do almost everything in terms of quick customization.
Le Site internet
Le Github
Worthy to check is Sugar CSS sugar-css.com/ In less than 8KB it brings very nice styling with super convenient customisation. Compared to other similar frameworks Sugar css includes very interesting and innovative Grid system.
ty
Yeah, Pico is really sweet for these sorts of things. I like that they have the
Extendpage and say they like classes. Very pragmatic -- they built a classless framework essentially that's pretty amazing at that but also point out that if you need to do more you'll need to add some classes.I think these frameworks are a great place to code dive as a learner as well. Not too big to get confused by and generally well coded. One could do worse then to have two windows with one of these source code and the other MDN docs and really learn what's going on ⭐ 🍰 🙌 💪
🚀🚀
Pico is beautiful
Feel free to share a link in case you have a public project built with Pico
Check Skeleton, it is neat too getskeleton.com/
Ty!
Good Post!! 😉 I really like Pure CSS
Pure CSS is super. 21k+ GH Stars is quite something.
P.S. also my favorite :)
✌️great.
Ty!