Designing a site from scratch can be a long and consuming experience, as it always welcomes that web designers always use shortcuts while maintaining quality always a top priority.
Using a good CSS framework can provide you with a complete set of responsive layouts and UI elements. that helps you to get your projects off to a quick start while still allowing plenty of room for customisation.
In this post, you’ll find a selection of twelve CSS frameworks available, some you may have heard of, while other frameworks may be entirely new to you. Each of these frameworks offers a variety of useful, cutting-edge features that can improve your workflow.
1. Butter Cake
Butter Cake is an open source and lightweight modular CSS framework, It makes it possible to craft modern and mobile-first designs without having to write too many lines of CSS. It is highly modular, and offers a large number of responsive components and elements that you can choose from.
2. Biomatic CSS
Biomatic CSS is an atomic-focused CSS library with utilities, layout, and basic components classes for faster development. Biomatic’s goal is to be a foundation to create and extend a maintainable CSS for your design systems
Biomatic is unopinionated, so you can customise atomic classes, colours, font, spacing’s and more from the simple SCSS configuration files and use them across your project.
Vanilla Framework is a simple extensible CSS framework, built using Sass and is designed to be used either directly or by using themes to extend or supplement its patterns.
4. Concise CSS
Concise CSS is a hybrid of the most common practices in web development. The small core allows the inclusion of custom styles and add-ons without the bloat or excessive overwrites. The UI add-on provides pre-made components as the other well-known frameworks, and the Utils add-on provides utility classes to make prototypes quickly.
Spectre is a side project based on years of CSS development work on a large web service project. 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.
6. Tailwind CSS
Tailwind CSS is a highly customisable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Cirrus is a fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh.
Base is a modular CSS framework that, as its name indicates, aims to provide a solid foundation for your design projects. It has been built on top of Normalize.css and provides basic styles that are easy to customise. You won’t find anything too fancy here, but that’s the point!
Created by Twitter, you see Bootstrap pretty much everywhere these days. It because it’s well-maintained and offers a massive library of pre-built features and while you can roll with the default setup, Bootstrap is also quite extensible, adding themes or custom components to the mix will help personalise the UI even further with sass variables and mixins, it’s responsive grid system and has powerful plugins built on jQuery.
Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.
Last but not least, the framework comes with ARIA attributes and roles for building sites with accessibility in mind.