COMPANY BLOG & NEWSROOM

28Mar

How to Choose the Right Responsive CSS Framework

With a wide variety of grid systems based on responsive web design technology these days, it’s rather hard to choose the right framework without knowing the specific features of each one.

Let’s review 3 kinds of frameworks which provide some variety for webpage markup realization. Each framework adapts to the screen width and is based on the grid. The grid properties are the basic difference between frameworks.

CSS Grid

http://cssgrid.net/

For allocation of the elements on the page 1140 CSS Grid provides 12 liquid columns with maximum width of 1140px. Authors consider this to be the the most appropriate size for a 1280px screen resolution. If the screen resolution is smaller, columns get resized according to the width of the browser window. The same happens to the images.
This way the page always corresponds to the width of a browser window. This is implemented via setting up the width properties in percents. Media queries give a possibility to use styles for different screen resolutions. Support for Media queries in old browsers is provided by JavaScript.
This framework is extremely easy in use.

Less Framework

http://lessframework.com/

This framework is based on a 10-column grid, where the width is set in pixels. This is why it is only possible to adapt a webpage with 4 types of resolution: Default (desktop) Layout, Tablet Layout, Mobile Layout and Wide Mobile Layout – all based on general grid. However within one layout type, webpage elements will not be scaled.
Less Framework doesn’t contain preset classes for the grid, thus providing ability to name elements randomly and use only necessary properties.
Among additional options, 3 options of Typography presets and optional support of HTML5 tags for IE8 are definitely worth mentioning.
Well-designed layout system and no extra code are the core values of this framework.

Fluid Baseline Grid

http://fluidbaselinegrid.com/

This framework grid is very simple and consists only of 3 liquid columns, which by default fit the following sizes: 31.333, 64.667 and 48%. The authors of the framework state that the system’s obvious advantage is its ability to be easily customized.

Besides the liquid grid, the framework offers some typography settings and styles for CSS normalization. Media queries and HTML5 work in old browsers via JavaScript. This simple and convenient framework is easy to configure which makes it a great base for a project.

Now, when choosing a framework for your project, you can select the one that fits your parameters most.

About PSD2HTML.com

PSD2HTML.com provides fast, high-quality conversion of graphic Web design into Hypertext Markup Language (HTML) and its extensions, as well as skins / themes / templates for various Content Management Systems (CMS). The company accepts source files in all common formats, including PSD, PNG, AI and even HTML (existing markup). Founded in early 2005, PSD2HTML.com was the first service of its kind and has more than 60,000 clients to date. The company employs more than 300 professionals, ensuring the highest quality for each and every project.

leave a comment

All posts Back to top