CSS \ Resources
January 17, 2012
7 Comments
thumbnail

The development of technology, especially devices like Smartphones and Tablets and bigger and bigger monitors introduced a new concept in web design: Responsive Web Design.

What does responsive web design means? Let`s say that you have to build a website for a client and you want to do it based on a standard grid system, for example 960.gs. But the client also wants versions of the website for Iphone and Ipad screens too. You`re not going to build 3 different websites, instead you`re going to use a responsive grid system which adapts the website for all types of screen resolutions. This is how responsive web design works.

Is all about adapting the dimensions of the website (columns, images, font-size, etc) to different screen resolutions.

The things which make all the magic are the CSS media queries. They are the ones which tests which resolution the screen has and according to it, are changing the CSS to fit the screen.

After the appearance of this new trend in web design, developers started to work on some new and responsive CSS frameworks to help designers adapt their work to this days requirements. Therefore, I want to present you some of the best frameworks ready to upgrade your designs to a new level.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait).Skeleton is not a UI framework. It’s a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.

skeleton 12 Responsive CSS Frameworks for Modern Web Design

Less Framework

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.The goal of Less Framework is to make building websites with mul­tiple layouts efficient, and to make the layouts feel consistent.Less Framework is simple. It does not contain any pre­defined column classes, pre-compilers, or other wizardry. The point of it is to let everyone keep writing HTML and CSS as they always have, because everyone does it differently.

less framework 12 Responsive CSS Frameworks for Modern Web Design

Foundation

Foundation is an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.Foundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff.

foundation 12 Responsive CSS Frameworks for Modern Web Design

The 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.

1140 12 Responsive CSS Frameworks for Modern Web Design

Golden Grid System

Golden Grid System contains 4 features: columns, gutters, a baseline and a script.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.

golden grid system 12 Responsive CSS Frameworks for Modern Web Design

Frameless Grid

Frameless is the brother of Golden Grid System, but from another mother. Instead of adapting the layout pixel by pixel, like fluid frameworks do, Frameless is adapting the layout column by column. Is not quite a framework because it doesn’t include any code. It’s just an idea for a specific type of adaptive grid. You can use it as a good starting point for a new design, but you’ll still have to do all the hard work of designing and coding yourself, which is not so bad.

frameless 12 Responsive CSS Frameworks for Modern Web Design

MQFramework

A responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes. MQFramework is built and designed around a 12 column grid. For each of the supported screen sizes MQFramework has adopted a different width of container to house the grid. As for mobile versions, the twelve columns become one stacking up vertically.

mq framework 12 Responsive CSS Frameworks for Modern Web Design

InuitCSS

inuit.css is a very stripped back framework designed to be built upon by you… no undoing things, and the minimum predefined styles. inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

inuitcss 12 Responsive CSS Frameworks for Modern Web Design

Fluid Baseline Grid

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.

fluid baseline grid 12 Responsive CSS Frameworks for Modern Web Design

HTML5 Boilerplate

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed. It was not built as a responsive framework, but is working as responsive thanks to a javascript file called respond.js . So, if you`re going to use it as responsive, please include the file too.

html5 boilerplate 12 Responsive CSS Frameworks for Modern Web Design

320 and Up

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action. The framework starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design.

320 and up 12 Responsive CSS Frameworks for Modern Web Design

Amazium

Amazium is a responsive framework based on a 960 grid system with 12 columns. This is rare. The 960 Grid is what you would expect most modern websites to follow as its set up to be a max width of 960px which will fit the most common screen resolution 1024×768. Amazium uses 4 main media queries to adjust the layout of your website to match the size of your screen. The media queries in Amazium only target at max and min widths rather than device sizes or orientations, which means that any new mobile or browsers that don’t match the exact dimensions will still benefit from the styling.

amazium 12 Responsive CSS Frameworks for Modern Web Design

Share with us which framework did you use or which framework do you find it to fits better in design world.

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • http://jordimundo jordi

    Hi,
    congrats, this is a great and useful post first of all!!
    but, I am wondering, what does bootstrap so bad that hasn’t been included in your list?
    I used it a few times and was quite good for me….

  • http://www.wowthemes.net/ WowThemes.net

    Here’s an elegant theme based on Ivory Framework:
    http://www.wowthemes.net/demo/salique/salique-boxed/index.html

  • lakshmikanth

    Hello everybody,

    Ivory framework – http://zoymedia.com/kanth/ivory This is a responsive fluid grid. Try this grid, It is also a best one.

  • http://pnnetportal.blogspot.com Yan

    Just checked getskeleton and downloaded but it doesn’t have any js file.
    Anyway, I’d still try using it.

    Thanks for the list!

    • http://www.pubexplorer.com.au Chris

      Skeleton (as of v1.2) only contains CSS boilerplate code. No Javascript files are included or required for use of GetSkeleton.

  • Hani

    Good Collection… BTW which is the best frame work?

    • http://dsignvilla.com mpe

      I think best frame work is Skeleton css frame work