Responsive web design is becoming a hot topic recently. Looks time are saved as no need to develop different styles for different devices but it’s really not easy to change a very complicate website to a responsive one. Or if you would like to build a brand new website, maybe you should try to start thinking about responsive layout in the beginning.
Responsive falls into fixed (Column grid’s width are changing fixedly depending on the screen size) and fluid (Column grid’s width are changing dynamically depending on the screen size) There are many techniques developed by experts to create a responsive website and a number of responsive frameworks can help to start with. Also there are two flows: focus on mobile device first then adapt to bigger screen responsively, or focus on large monitors first then adapt to smaller devices responsively.
Today we choose 14 responsive framework that are fully functional, well documented and intuitive to adapt. The first 9 are developed using CSS and JS. The last 5 adapted SASS (or LESS) which is predecessor of CSS. To know more about SASS and LESS, check out articles on SmashingMag and CSS-Tricks. Let us know what’s your thought of them. What is your experience when using them to develop a responsive site?
Amazium
Amazium provides a 960 grid system and a lot of other areas like typography, forms, tables, images and videos are all covered regarding responsive layout. Pretty knit system.
Fluid Baseline Grid
As the name goes FBG system is built with typographic standards in mind and combines principals of fluid-column layouts and mobile-first responsive design.
Foundation
Foundation claims it has rapid prototyping that “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.”
Gridless
Gridless is also a responsive framework utilising HTML5 and CSS3 that makes mobile-first responsive with beautiful typography.
Less framework
Less Framework is a fixed-width responsive grid system to design adaptive websites. It includes four layouts of different screen size (default, tablet, mobile and wide mobile) I think this one is the easiest and most intuitive one to try responsive layout change.
Inuit.css
Same functions as above also includes a generator to create styles of different number of columns and widths.
Simplegrid
Like Amazium and Lessframework, it’s nesting and knit, which designed as one class per element rather than one class for all units of a single size.
Skeleton
Skeleton is a tool for rapid development. It includes an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more to.
1140 Grid
It’s a fluid responsive system. Instead of doing mobile-first responsive, it focuses on 1280 monitor and adapt to work on any other device.
320 and Up
Obviously it uses the “small screens up” as responsive web design flow. Guess what? The developer of 320 and Up was actually doing the other way around. Have a look at their website about their “mistake”.
Bootstrap
Bootstrap supports HTML5, CSS3 and built on LESS. It is a simple but fully functional frameworks, and it’s responsive.
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 Semantic Grid System
Runs on LESS, SCSS or Stylus. Includes examples of fixed, fluid, maximum width, nested columns and of course, the responsive one.
Responsive grids for Compass
It’s built on Compass. Compass is built on SASS. SASS is predecessor of CSS. CSS is.. I’m confused. Here is a tutorial of using SASS and Compass to build a responsive website.
What do you think of them? Or any other nice framework that I missed? Leave your best comment below.
Useful framework collection for better and rapid web design and development. Among them i like Skeleton which is more responsive mobile friendly development framework.
Would love to see MIT-licensed Mobify.js (http://mobifyjs.com) in the next revision of this article. Mobify is a JavaScript framework that helps responsive websites with common UI elements (image galleries, menus, etc) as well as provides functionality for giving any website the benefits of being responsive.
Hey. thanks for sharing this! I know that many people are goning to benefit from this information. I am wanting to learn developing a mobile site, so this post is just for me! Keep it up !
Awesome web page! Look is so refreshing in comparison with many other copy writers. Appreciate it with regard to producing once you have the chance to, We are certain to be able to save your blog!