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.
Less Framework
Less Framework is a CSS grid system for designing adaptive websites. 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 multiple layouts efficient, and to make the layouts feel consistent.Less Framework is simple. It does not contain any predefined 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Share with us which framework did you use or which framework do you find it to fits better in design world.
