shadow

Short About

Coolumns percentage based grid system uses standard, cross browser CSS3 and media queries. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. Using percentage based layout is quickly becoming the standard way of modern, device independent web sites.

Main Difference

Coolumns base grid system doesn’t uses decimal numbers for columns width as first (fundamental) condition for correct performance in Safari and Opera. If you would prefer to use decimal width values e.g. for nested columns - NO PROBLEM! - lightweight Jquery script is included (emulates "subpixel rendering").

Requirement

For best perfomance you need to detect browser and add proper class to the body tag. While browsing the web, you can find a lot of browser detection scripts, CMS plugins etc. which can perform this job. I’m using Contao CMS where browser, operating system detection is 100% PHP-based core feature.

How it works?

For 12 columns we have 11 spaces (margins) between them. Let’s set these margins to 2% each and column width to 6% then we get ...

12 x 6% = 72% (columns) 11 x 2% = 22% (margins) 72 + 22 = 94%

6% still rest ?!?   ... so we can simple center content by adding 3% left margin of the first and 3% right margin of the last column (this solution has no radical impact for design purposes)   ... finaly 100%

3kB minified
Download package contains both minified and uncompressed source files. Tested on IE8+, Firefox 17+, Safari 5+, Chrome 24+, Opera 12 and various desktops and devices.

shadow

grid1 first

grid1

grid1

grid1

grid1

grid1

grid1

grid1

grid1

grid1

grid1

grid1 last

grid2 first

grid2

grid2

grid2

grid2

grid2 last

grid3 first

grid3

grid3

grid3 last

grid4 first

grid4

grid4 last

grid5 first

grid2

grid5 last

grid6 first

grid6 last

grid7 first

grid5 last

grid8 first

grid4 last

grid9 first

grid3 last

grid10 first

grid2 last

grid11 first

grid1 last

grid12 first last

How to use it

First of all you need to attach stylesheets "grid12_percent.css" to your webpage.

Create the wrapping container with id="wrapper" for the whole page. It is centered horizontally and 1200px wide by default.

The best way is to wrap each row of columns in to the container with class="row" (clearing floats after).

Then you can create grid columns, use classes "grid1, grid2, grid4 ... grid11, grid12" to set widths.

For first column in row add class .first (e.g. class="grid4 first") and for last one in row class .last (centring content).

Sample HTML code

<head>
  ...
  <link rel="stylesheet" href="grid12_percent.css">
  ...
</head>
<body>
  <div id="wrapper">
	<div class="row">
		<div class="grid3 first"> content... </div>
		<div class="grid3"> content... </div>
		<div class="grid6 last"> content... </div>
	</div>
	<div class="row">
		<div class="grid4 first"> content... </div>
		<div class="grid4"> content... </div>
		<div class="grid4 last"> content... </div>
	</div>
	<div class="row">
		<div class="grid12 first last"> content... </div>
	</div>
  </div>
</body>

Safari, Opera trick

In contrast to Firefox, Chrome, IE (even IE8) which are able handle differences when calculate 1% (e.g. 1% from 1024px is 10,24px) by "subpixel rendering" for Safari and Opera we need to use a trick to correct display.

As mentioned in "Requirement" first we need to detect the browser and add proper class to the body tag. There are a lot of resources and methods on the web. Then we can force wrapper width depends on browser window width.

By using media queries we can use "steps" so we get only integral numbers for 1% (1200px wide 1%=12px, 1100px wide 1%=11px, ... until 800px wide).

Note: WebKit has subpixel rendering now Chrome 24 implemented it, Opera Next using Webkit core

Sample code

<!-- Contao CMS handles it like this (Safari 5.1.7, Win 7) -->
<body id="top" class="win safari webkit sf5">
  
<!-- Minimum requirement -->
<body class="safari">

Used media queries

@media (max-width:1200px)
{
	.safari #wrapper, .opera #wrapper {width:1100px;}
}
@media (max-width:1100px)
{
	.safari #wrapper, .opera #wrapper {width:1000px;}
}
@media (max-width:1000px)
{
	.safari #wrapper, .opera #wrapper {width:900px;}
}
@media (max-width:900px)
{
	.safari #wrapper, .opera #wrapper {width:800px;}
}

Nested columns

Nested columns uses its own percentage system (there is NO PROBLEM to accept decimal number values! - read below) driven by classes "grid1, grid2 ... grid11 (grid12=100%)".

We can wrap each row of nested columns in to an container with class="nested row". This not only clearly floats after, but it is needed for additional jQuery script - j_sofixair.min.js. This script performs great job for Safari or Opera browser (proper body class exploited) - emulates subpixel rendering.

Also for first column in row add class .first (e.g. class="grid3 first") and for last one in row class .last.

Sample HTML code

<head>
  <!-- Don’t forget add jQuery to your site e.g.: -->
  <script src="jquery/1.8.3/jquery.min.js"></script>
  ...
</head>
<body class="safari">
  <div id="wrapper">
    ...
	<div class="row">
		<div class="grid8 first">
          ... 
          <div class="nested row">
            <div class="grid4 first"> content... </div>
            <div class="grid4"> content... </div>
            <div class="grid4 last"> content... </div>
          </div>
          ...
        </div>
		<div class="grid4 last"> content... </div>
	</div>
  </div>
<!-- Add jQuery script to fix percent rounding (Safari, Opera) -->
<script src="files/coolumns/j_sofixair.min.js"></script>
</body>

grid6 first

grid4 first

grid4

grid4 last

continue ...

grid6 last

grid6 first

grid6 last

continue ...

grid6 first

grid4 first

grid2

grid2

grid4 last

continue ...

grid6 last

grid6 first

grid4

grid2 last

continue ...

In conclusion

COOLUMNS grid system is easy to use, adaptable, lightweight and very helpful tool for building responsive web sites. Together with other percentage-based grid systems is not exactly 100% pixel perfect in all cases due to math reasons and different browser abilities. However, it works great and with maximum precision. It is free for any use under MIT license. Try to resize your browser window to see it in action.

shadow

COOLUMNS extension for Contao CMS

Feedbacks HERE




Please calculate 4 plus 2.
shadow