Recently I’ve discussed with a friend about the eco system of javascript and how populated and full with libraries, frameworks, open source projects and more. When i suggested that CSS also have a lot of frameworks and libraries we disagree – so here we go, here’s a list of CSS libraries and frameworks just to showcase that design with CSS has a big utility, and eco system world. Before we jump to the list, If you like a list like information like libraries, features, frameworks etc – I recommend you to check my blog tag “list-of” in which I publish from time to time lists like this one below.
| Name | Description | Publish Date | When to Use | Key Features |
|---|---|---|---|---|
| modern-normalize | Normalize browsers’ default style. | 2018 | Resetting default styles across different browsers | Cross-browser consistency, Modern styles |
| ress | Modern CSS reset. | 2018 | Resetting default styles to a consistent baseline | Simplified CSS resets |
| Natural Selection | Collection of best-practice CSS selectors. | 2020 | Applying best-practice CSS selectors to improve styling | Best-practice CSS selectors |
| MVP.css | Minimalist stylesheet for HTML elements. | 2017 | Providing minimal styles for HTML elements | Lightweight, Minimalistic design |
| sakura | Minimal classless CSS framework/theme. | 2016 | Creating minimalistic and clean designs | Classless, Lightweight |
| Simple.css | Lightweight, classless CSS framework. | 2015 | Providing a lightweight and simple CSS framework | Classless, Lightweight |
| Tacit | CSS framework for dummies, without classes. | 2015 | Simplifying CSS for beginners | Classless, Simple |
| Pure | Set of small, responsive CSS modules. | 2013 | Creating responsive web designs | Responsive, Modular |
| Picnic CSS | Lightweight and beautiful library. | 2012 | Adding lightweight and visually appealing styles | Lightweight, Beautiful |
| Chota | Really small CSS framework. | 2018 | Adding minimalistic styles to web projects | Small, Minimalistic |
| Carbon Components | Component library behind IBM’s Carbon Design System. | 2018 | Integrating IBM’s Carbon Design System components | IBM Design System components, Modular |
| Fomantic-UI | Build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging. | 2017 | Building fast and visually appealing websites | Concise HTML, Intuitive JavaScript |
| Blaze UI | Open source modular toolkit providing great structure for building websites quickly. | 2019 | Building websites quickly with a scalable and maintainable foundation | Modular, Scalable |
| Cirrus | Component and utility centric SCSS framework designed for rapid prototyping. | 2018 | Rapid prototyping for web interfaces | Component-centric, Rapid prototyping |
| Vanilla Framework | Simple, extensible CSS framework. Written by the Canonical Web Team. | 2016 | Providing a simple and extensible CSS framework | Simple, Extensible |
| PatternFly | UI framework for enterprise web applications. | 2014 | Developing enterprise-level web applications | Enterprise UI components, Flexible |
| HiQ | Simple CSS foundation with responsive typography and input styling. | 2019 | Implementing responsive typography and input styling | Responsive typography, Input styling |
| Material Components Web | Modular and customizable Material Design UI components for the web. | 2016 | Implementing Material Design UI components in web applications | Material Design, Customizable |
| Beer CSS | Build material design interfaces in record time without stress for devs. | 2017 | Creating interfaces with material design quickly | Material Design, Fast development |
| Materialize | Responsive front-end library based on Google’s Material Design. | 2014 | Implementing Google’s Material Design in web projects | Material Design, Responsive |
| Material Components Web | Modular and customizable Material Design UI components for the web. | 2016 | Implementing Material Design UI components in web applications | Modular, Customizable |
| NES.css | NES-style CSS Framework. | 2018 | Building interfaces with a retro NES gaming style | NES gaming style, Retro design |
| 98.css | CSS library for building interfaces that look like Windows 98. | 2018 | Creating interfaces with a Windows 98-style design | Windows 98 style, Nostalgic design |
| Tufte CSS | Style your webpage like Edward Tufte’s handouts. | 2015 | Applying Edward Tufte’s design principles to web pages | Tufte’s design principles, Clean design |
| Gutenberg | Modern framework to print the web correctly. | 2018 | Ensuring web content looks correct when printed | Print layout, Correct printing of web content |
| XP.css | CSS library for building interfaces that look like Windows XP. | 2017 | Creating interfaces with a Windows XP-style design | Windows XP style, Nostalgic design |
| TuiCss | Library to create MS-DOS interfaces. | 2016 | Creating interfaces with a retro MS-DOS command line style | MS-DOS style, Retro design |
| 7.css | CSS library for building interfaces that look like Windows 7. | 2018 | Creating interfaces with a Windows 7-style design | Windows 7 style, Nostalgic design |
| Bojler | Email framework for developing responsive and lightweight email templates. | 2015 | Developing responsive and lightweight email templates | Responsive email templates, Lightweight |
| Bootstrap | The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web. | 2011 | Developing responsive websites with a consistent and modern design | Responsive design, Mobile-first approach |
| Bulma | Modern CSS framework based on Flexbox. | 2016 | Creating modern and flexible web layouts | Flexbox-based, Modern design |
| Foundation | The most advanced responsive front-end framework in the world. | 2011 | Developing highly responsive and customizable web interfaces | Responsive design, Advanced customization |
| UIkit | Lightweight and modular front-end framework for developing fast and powerful web interfaces. | 2013 | Building fast and powerful web interfaces with a modular and lightweight framework | Modular components, Lightweight |
| Primer | CSS framework that powers GitHub’s front-end design. | 2012 | Implementing GitHub’s front-end design principles in web projects | GitHub design, Customizable styles |
| Pico.css | Elegant styles for all native HTML elements, dark mode automatically enabled. | 2019 | Adding elegant styles and dark mode support to web interfaces | Dark mode support, Lightweight |
Even if you don’t need any CSS library or framework right now, it’s good to be generally familiar with those library especially as a senior or future-to-be software architect. Whenever in the future you’ll face s situation where you need to pick or lead your team with new libraries or frameworks or technologies you’ll be able and pull knowledge or strong baseline from above list. for instance, if you need to design a responsive email templating you’ll know you have “Bojler” if you’ll need to reset the css cross browsers for browser compatibility you’ll know you have modern normalize or ress if you’ll need responsive typography you’ll have HiQ library etc. so save this list in your bookmark and come back from time to time in the future!
Lior Amsalem embarked on his software engineering journey in the early 2000s, Diving into Pascal with a keen interest in creating, developing, and working on new technologies. Transitioning from his early teenage years as a freelancer, Lior dedicated countless hours to expanding his knowledge within the software engineering domain. He immersed himself in learning new development languages and technologies such as JavaScript, React, backend, frontend, devops, nextjs, nodejs, mongodb, mysql and all together end to end development, while also gaining insights into business development and idea implementation.
Through his blog, Lior aims to share his interests and entrepreneurial journey, driven by a desire for independence and freedom from traditional 9-5 work constraints.
Leave a Reply