Thursday, November 29, 2012

Responsive frameworks

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.

Responsive frameworks

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.

Responsive frameworks

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 frameworks

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.

Responsive frameworks

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.

Responsive frameworks

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.

Responsive frameworks

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.

Responsive frameworks

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 frameworks

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.

Responsive frameworks

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!

Responsive frameworks

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.

Responsive frameworks

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.

Responsive frameworks

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.

Responsive frameworks

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.

Responsive frameworks

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.

Responsive frameworks

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.

Responsive frameworks