Responsive layouts are rapidly moving towards being the standard and as more and more responsive CSS frameworks have been cropping up on the web and with a huge variety of frameworks available that includes every single one of them employing a different grid properties and techniques, it can be sometimes be difficult choice to make when to choose the right one.
You can always choose what I think the four main and popular ones are and these are the 1140 CSS Grid, Less+ Framework, Twitter Bootstrap and Zurb’s Foundation. But you won’t find any of them below today as this post features 12 lightweight frameworks that will quickly help you get going with your next project.
1. RWD Grid
The RWDgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).
RWDgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens. This can be used as a base grid system that will help you to build responsive webdesign with your existing proficiency over popular grid systems.
2. One% CSS Grid
One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearranging your layout for each platform separately. One% CSS Grid will do all this for you.
One% CSS Grid is a percentage based grid system, it means that it will perfectly adapt to all screen resolutions (mobile, tablets and big screens). One% CSS Grid has 2 starting options, one which fits 1280px screens (in full screen view) and another one which fits 1024px screens (in full screen view).
3. IVORY Framework
A simple, flexible, powerful and fully responsive grid based front-end web framework makes your web development faster and easier, & it takes you all the way from 1200px on down to 320px.
4. Base Framework
Base is a super simple, responsive framework built to work on mobile devices, tablets, netbooks and desktop computers. The Base Framework contains a minimal HTML5 template that includes jQuery, stylesheet that includes basic styles for for typography, blockquotes, code, form elements, tables and a LESS file to easily customise your base stylesheet.
5. Simple Grid
Built with responsive sites in mind Simple Grid was created for developers who need a barebones grid.
Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile. This is not a framework with everything from forms to buttons styled but a lightwight simple CSS grid.
6. Kube CSS Framework
The CSS-framework for professional developers, Kube wasn’t built as an overblown responsive CSS framework with multiple layouts and styles. To get started with Kube you need a minimal CSS file as it gives you the freedom to create your own site exactly as you like. A LESS files are also available for download.
7. Proportional Grids
Don’t think widths, think proportions. A dead simple method of creating responsive fluid grids with fixed gutters. Use classes to set the proportions you want your columns to take at which breakpoint. Supports nested grids and requires no or :first-child nonsense. Even works in IE7 and below
8. Titan Framework
The Titan Framework which is based on the 960.gs, comes in two versions, a 12 column grid and a 16 column grid. If you have already developed websites in the past with 960.gs you will love this framework as you can easily switch them to responsive web design very quickly by simply replacing the 960.gs CSS files with the Titan Frameworks CSS files.
9. 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 reflow for responsive layouts. Ingrid is also meant to be an extendable system, easy to customize to your own needs.
10. Toast
Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing. Toast includes two main states – a single column layout for narrow screen and mobile devices, and a 12 column layout up to 960px.
It’s super easy to adjust Toast for your own needs – simply change the min-width in grid.css, or write your own media queries for the screen sizes you want. Toast supports IE8 and up as well of all the popular browsers.
11. The Goldilocks Approach
The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent. It Contain 2 well commented CSS files that consider, 3 CSS Media Query increments, multi column, narrow column and single column and good typographic defaults out of the box (including print contexts.
12. Bourbon Neat
Neat is an open source semantic grid framework built on top of Sass and Bourbon. It is simple enough to get you up and running in minutes, and powerful enough to handle almost anything you throw at it. Using Sass 3.2 block mixins, Neat makes it extremely easy to build responsive layouts. Go ahead and resize your browser when you are on the Bourbon Neat website
Source : creativeproject[dot]wordpress[dot]com
0 comments:
Post a Comment