20 Best Free CSS Frameworks for Responsive Mobile & Web

If you are looking forward to speedup your website development then these free responsive css frameworks, grids, boilerplate will help you accomplish that easily. While some frameworks have steep learning curve, eventually it will become easy as there are lots of documentation available for them. Stay tuned for more updates on other important CSS Frameworks which we will include here.

Some experienced developers might stick with grid system alone as entire framework needs time to learn from scratch. Still frameworks are good for people who are new to web development and those who cannot waste time writing lots of CSS and js scripts on their own. I have chosen to include only responsive frameworks which will scale easily on multiple mobile, tablet, desktop devices. Share in your comments and let us know if we missed any important frameworks here.

1.Semantic UI Framework

Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.


Semantic User Interface

2.Twitter Bootstrap Framework

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.


Bootstrap 3.3 version

3.Foundation Framework

Foundation 5 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.

foundation css framework

4.UIkit Framework

UIkit gives you a comprehensive collection of HTML, CSS, and JS components. It can be extended with themes and is easy to customize to create your own look.


ui kit

5.Skeleton CSS Boilerplate

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.


Boilerplate for Responsive

6.99lime HTML KickStart

Ultra–Lean HTML5, CSS, & JS Building Blocks for Rapid Website Production.



7.Kube — Professional CSS-framework

Minimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.


Kube — Professional CSS-framework


8.Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.


Less Framework 4

9.Yet Another Multicolumn Layout ‘YAML’

YAML is a modular CSS framework for truly flexible, accessible and responsive websites. The framework is focused on device independent screen design and provides bullet-proof modules for flexible layouts.


modular CSS framework

10.YUI Framework

YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.


 YUI Grids CSS


With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today in virtually al browsers. Using HTML5 makes for much cleaner mark up. This framework fully uses all the great advantages of HTML5.


52framework css


As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.



13.FEM CSS Framework

FEM is based a lot in the 960 Grid System, but with a twist in the philosophy to make it more flexible and in my opinion more powerful.
The downside is that it’s a bit more complicated to learn, you write more code, and it’s a bit heavier. Is up to you to decide if it’s worth for you.


FEM CSS Framework

14.KNACSS Framework

KNACSS is supplied as three different versions : a classic that is most purposes, as well as two versions written in languages preprocessors LESS-CSS and Sass. Each version is designed to be adapted to your needs and desires. I invite you, however do not you take it before going through the Complete Tutorial as well as documented and commented code.


knacss CSS framework

15.Groundwork CSS Framework

Groundwork CSS’s flexible grid system enables you to do rapid development and scales to fit any screen size, from handheld devices to large format televisions.


Groundwork CSS

16.Gumby 2.6

Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.



17.Unsemantic CSS Framework

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.



18.Tuktuk CSS Framework

Not trying to compete with Bootstrap or Foundation because they play in another league. Just worry about creating responsive and fully extensible sites easily.



19. 960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.


960grid css

20. 978 Grid CSS

The 978 grid system uses 12 columns at 54px, with extra roomy 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024×768 monitor. Almost every computer and tablet in the world today is capable of displaying designs built on this grid.


978 Grid System for Web Design

Leave a Comment