Egyptian blogger from Cairo.
Revolutionary Socialist.
Partner & Creative Director at ThePlanet.

1KB CSS Grid: Your Basic Framework

It has become evident that the best way to build a new website is to do it from scratch, and using proven frameworks. That saves you a lot of time and effort, and allows you to focus on the actual design of the website instead of having to worry about whether or not your layout is developed properly. I have previously discussed the 960 Grid System as an ideal CSS framework to build your website on, and while I still hold my stance towards it, I believe that in some cases, a solution such as the 1KB CSS Grid could be more appropriate.

1KB CSS Grid prides itself in its simplicity. You want to develop a relatively basic, straight-forward website, and do not feel it necessary to spend a significant amount of time setting up and building the foundations. With the 960 GS (or for that matter, the Bluprint CSS, which I have also talked about), you can construct a reliable foundation to your website. That includes a CSS reset to remove any default values that would cause inconsistencies between the different browsers, and another CSS file with all of the possible values of the columns, giving you complete freedom of using different-sized columns in any order you want. More importantly, with the 960 GS, you can download the Photoshop template, for example, and design your website with the exact coordinations of the columns in mind.

However, in many cases, you just want to build a simple website, without having to go through so many decision-making processes, and without investing an entire afternoon for features that you couldn’t care less about. For those of you working on quick and easy websites, 1KB CSS grid gives you the power to create the necessary CSS file in less than a minute, and start developing on top of that. No CSS reset, no limitless possibilities, just a light-weight file with the various column sizes that you are going to use.

The 1KB CSS Grid website

The 1KB CSS Grid website

You won’t even need to enter the values. Just drag the indicators to your desired number, and you will see what the total width will be. The CSS file with the standard 960px values looks like this:

/* ================ */
/* = The 1Kb Grid = */
/* 12 columns, 60 pixels each, with 20 pixel gutter */
/* ================ */

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
margin: 0 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}

It is recommended that you use a CSS reset, but if you’re doing something simplistic, the above code will work fine on its own. Creator Tyler Tate took into consideration the main values everyone’s after. At the end of the day, in many cases, particularly in this one, less is more. So if you are working on a relatively large project, start from scratch with the 960 GS, for everything else, there’s the 1KB CSS Grid.

Related posts

Leave a reply