Fluid Grid

In today’s time when there are plenty of available devices for web application, responsiveness of web application is a major concern. In this context first point which comes in mind that do you have to create different application for different devive as per the width of the device? Answer is no.

The above issue can be resolved by not having fixed width design but a fluid one. Here is a major concern. How to create a fluid stylesheet for fluid layout.

Let us suppose we have a layout of width 988px. Also we have seven columns of 124px each, separated by 20px-wide gutters, all of which totals up to a width of 988px. We have sidebar is first and last column of 124px. Also let’s take default paragraph size to 16px Arial, an ordered list 14px and heading H1 24px.First of all we have to transform pixels to ems for fluid layout. This is done as follows.

Every browser has a default font size (for most of the browser it is 16px). Now we have to change each pixel font to ems. This is done by using following formula.

responsive web design:fluid grid

target ÷ context = result

Here target will be 16px for paragraph, 24px for heading and 14 px for list. And Content will be default font size for browser which is taken as reference or context. So we will have

H1: (24/16) = 1.5em
UL: (14/16) = 0.875em
P:  (16/16) = 1em

In the same way we have to transform width of sidebar and content area. For sidebar and content area context will be 988px. So the width will be as follows:

Sidebar : (124/988) = .1255 or 12.55%
Content : (700/988) = .7085 or 70.85%

Further if we require some regions in content area i.e. area with width 700px, context will be taken as 700px. Above calculation when combined with css will be us the desired layout.

January 16, 2012 | By developmenticon | Tagged: CSS, fluid grid, responsive web design | Category: Code