15+ Responsive CSS Frameworks to Kickstart Your Responsive Website Project

With the number of mobile Internet users increasing rapidly and now counting more than 1 billion, it is almost certain that your website will have mobile visitors every day. There are multiple options to consider if your organization plan to create a mobile friendly experience. Responsive web design seems to be extremely hot right now but depending on your needs it still may not be the right direction to take. Keep in mind that native apps, hybrid apps and mobile websites also have pros and cons worth investigating.

Since well implemented responsive layouts perfectly adapt to any screen size and device type they may be quite costly to design and implement. However, the value of having “one website to fit them all” should not be underestimated. Just consider what it means to the system and content maintenance.

When starting a responsive website project, there  are a few key decisions to make. First of all it may be worth considering if you want to start from scratch when implementing the layouts. This is the hard way, and in any case you should consider using a responsive CSS framework. On the other hand, if you know, that the website will be build on a CMS like e.g. WordPress, you may have better options at hand. In this case, it is possible to kickstart the process by choosing a responsive WordPress theme or responsive theme framework. Another way to make a significant shortcut is to use responsive HTML5 templates as a starting point and adjust it to your specific needs.

This article covers some of the most popular and best responsive CSS frameworks you can use to kickstart your responsive website project. They ensure you have the responsive grids setup in a standard and best practice fashion, which saves you time coding and testing. It further allows you to focus on the specific design and content needs for the website. If you want a detailed lineup of some of the most popular frameworks (Skeleton, Bootstrap and Foundation), I recommend you check this resources. It will also help you to figure out what to look for when checking out the many other frameworks.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

Bootstrap

Bootstrap is a 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer. Bootstrap utilizes LESS CSS and is compiled via Node. It is probably one of the best know and mature responsive frameworks around. Check the examples to see it in action. Also consider looking up some WordPress bootstrap themes and bootstrap website templates  There is a cool collection at nowthemes.com with some of the best bootstrap based themes available.

Skeleton

Skeleton is a small collection of CSS & JS files and a CSS framework with a lightweight 960 grid that seamlessly scales down to downsized browser windows, tablets, mobile phones. This works well in both landscape and portrait. You will find that it use a organized file structure and offer the most needed basic UI elements like lightly styled forms, buttons, tabs and more.

Foundation 3

Foundation 3 is a quite advanced and feature rich CSS frameworks for building responsive websites. It is built with Sass, a powerful CSS preprocessor. This gives you the tools needed to quickly customize and build on top of Foundation. It also comes with a Add-on concept where you can find more templates, responsive tables etc. to get things done even faster.

Responsive Aeon

Responsive Aeon is a responsive grid CSS based framework all based on percentage with media-queries, html5 starting point and javascript. It is a basic responsive grid system based on 12 columns layout. Responsive Aeon is clean and simple making it great for setting up mockups fast, but it will also work for full website development.

Susy: Responsive grids for Compass

Susy is based on Natalie Downe’s CSS Systems, made possible by Sass, and made easy with Compass (Compass is an open-source CSS Authoring Framework.). You can use it anywhere, from static sites to Django, Rails, WordPress and more. It even comes packaged as part of Middleman, to make your life easy.

You can build grids of all kinds with Susy. Define you grid using any unit of measurement (ems, pixels, percentages, inches, etc.) and then determine how and when you want that grid responding to the viewport. Susy converts all internal grid-widths into percentages, so that once you have a grid it is able to respond and flex in any way you choose. How the grid responds depends on the outer container.

CSS Horus

Css horus is a quite new competitor in the responsive framework area, but it it looks very interesting and may end up as a really good option. The framework is a grid system 1200, 960 down to mobile, adaptive for desktop and mobile screen. It contains 16 grid columns and basic style formats (Resets, Basics, Typography, Lists, Links, Table, Form, Button) for your web project.

Titan Framework

With Titan Framework you can create responsive layouts that adjust to any screen resolution at maximum width. The framework uses the same CSS classes as 960.gs so if you are familiar with this it may be an advantage for you. It should also make it simpler to make existing 960.gs based websites responsive.

1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Responsive Grid System

Fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Gridiculous – A Fully Responsive Grid Boilerplate

Gridiculous is a responsive HTML5 Boilerplate based framework using a twelve column grid. It starts off at 1200px and works itself down to 320px. Gridiculous is also available for WordPress and this is great news for WordPress theme developers. On most WordPress market places responsive WordPress themes are the top selling items, so there is a demand for frameworks like this!

Less+ Framework

Less+ Framework is a cross-device CSS grid system using media queries. This framework is an extension of the Less Framework built by Joni Korpi with the difference that it has extended support for Internet Explorer. This branch of the Less Framework uses the Jquery Media Queries library built by Protofunc as suggested by Richard Shepherd.

320 and Up

320 and up will work as an extension to HTML5 Boilerplate or a set of standalone files. It offers five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px to fit most browsing needs. It rely on Bootstrap styles for buttons, forms and tables.

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

Ingrid

Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to re-flow for responsive layouts. Ingrid is also meant to be an extendable system, easy to customize to your own needs.

Gumby 960 Grid Responsive CSS Framework

Gumby allows you to build your own custom package and either download a 12 column version, 16 column version, hybrid 12/16 column version or the full framework in a single bundle.
As part of the framework the developer have packaged up several styles and commonly used interface elements (forms, buttons, tabs, and pure CSS dropdowns). This will help you get started quickly and allow you to add responsive capabilities with minimal CSS coding.

YAMB

YAMB is a small set of tools and best practices for building responsive websites faster. It includes a fluid grid, a drop-down menu with the option of unlimited sub-levels or/and mega subs (for small screens a drop-down menu is automatically converted into a select box) and a responsive image slideshow with captions. Please note that it is not maintaned as many of the other frameworks.

Lars

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.