2013年6月18日 星期二

12 Useful Responsive Grid Frameworks

12 Useful Responsive Grid Frameworks

1. Base Framework

base-framework From the word itself, it is the foundation of the things that you need to have before you run up your site because of its CSS framework, which makes things already responsive through its 12-column 960px grid that has a complete package. Some of the perks it provides are customization of stylesheet because of LESS file, basic styles for stylesheet, HTML 5 template inclusive of jQuery and a default JavaScript file.

2. Bourbon Neat

Bourbon-Neat This is built through Bourbon and Sass that have block mix-ins, and breakpoint mix-in that promotes and maintains semantic and clean markup. Expect that you’ll avoid extra wrapping div and other html presentation which keeps everything intact.

3. Kube CSS Framework

Kube-CSS-Framework It offers multiple styles and layouts while maintaining the responsiveness of its CSS framework. It only requires a CSS file in minimal ratio. It does not impose styles since it stands and carries the simple adage that “simplicity is beauty” to give web developers the freedom to personalize their site that will carry and define their individuality.

4. One% CSS Grid

One CSS Grid This is recommended to those who want to be freed from the hassles of setting up and building a website. It is made possible through their CSS grid system that is fluid, based and composed of 12 columns. You can quickly and easily design a very responsive layout because of its two starting points.

5. Proportional Grids

Proportional Grids Things are made easier through its fixed gutters because it does not focus on widths, but on proportions that simply allows web designers to achieve a fluid and responsive grid that is built by boon.

6. RWD Grid

RWD Grid It is derived from the famous 960.gs which can be compared to the 960.gs_ but has been changed to a hyphen instead of underscore for improve readability.

7. Responsify.it – A Responsive Template Generator

responsify With its interface, it allows anyone to build a site with minimal effort because of its framework generator that is also responsive in creating grid framework, which can also be customized according to preferences and needs.

8. Simple Grid

Simple Grid If you are one of the website developers and designers who are looking for barebones, 1140px layout, and a responsive yet simple grid, this one would really work for you. It can adapt to any layout sizes along with its very fluid column that also responds and compliments any mobile device. It is indeed a super platform since it does not offer other features that you could see on other grid frameworks that you’ll find on this list, such as typography, tables, and even styles for buttons.

9. The Goldilocks Approach

responsiveaeon This is one of the best responsive grid frameworks that suits for mobile users. It allows web owners to use media queries, ems, and max width whether for single, narrow, and even multi-column. It is also resolution independent, which can be seen once you open it through your smartphones, or mobile devices. It has a boilerplate HTML file and CSS files to help you commence your site.

10. Titan Framework

Titan-Framework It is founded through the 960.gs that has two types; the 16-column and the 12-column grids. It’s recommended operational and active sites since it allows quick change of web design by just replacing it through the support of Titan Frameworks and 960.gs CSS files.

11. Toast CSS Framework

Toast-CSS-Framework For simple designs, this framework works best whether it’s for a 12-column layout on desktop or a single column for mobile phone users. It has a developed normalize.css and its very own stylesheets.

12. Ivory

ivory-framework Among the grid frameworks that you’ll see on this list, this is the only one that allows you to take 1200px down to 320px aside from its flexibility, simplicity, and powerful features. It is very lightweight, has more customer support, it works in any mobile device, has defined grid fluidity, and is compatible with multiple browsers.

沒有留言:

張貼留言

google ad