This article was published 5 years ago, therefore the contents of this post may be out of date.

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 Modern Css Framework Built With Flexbox

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

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.

3. Vanilla Framework

Vanilla Framework

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

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.

5. Spectre

Spectre Lightweight, Responsive And Modern Css Framework

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 A Highly Customisable Low Level Css Framework

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.

7. Cirrus

Cirrus

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.

8. Base

Base Responsive Css Framework

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!

9. Fomantic

Fomantic Ui A Community Fork Of Semantic Ui

Fomantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Fomantic is responsively designed allowing your website to scale on multiple devices.

10. Bootstrap

Bootstrap Framework

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.

11. Semantic

Semantic Ui

Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed, allowing your site to scale on multiple devices.

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.

12. Foundation

Foundation Css

Foundation is a library of modular components that add plenty of fits and finish to your projects. There are a wide array of options here, everything from responsive layouts to animation, Foundation also has its own JavaScript plugin API.

Last but not least, the framework comes with ARIA attributes and roles for building sites with accessibility in mind.

Share

12 CSS Frameworks to help speed up the design process