The popularity of CSS frameworks has grown immensely in the past few years. While few of them try fitting in everything – form styles, style reset, typography, grid system and more, others focus just on the grid aspect, yet end up getting bloated. The more complexity you add to the code, the more complex it becomes! The result – increased production time, plenty of learning and a harrowing time during the debugging phase.
The creator of 1kb Grid tool presents an altogether new approach to the CSS grid, based more or less on 960 Grid system (of Nathan Smith). The whole idea of his approach is to keep things light. What’s even better is that his grid system can even be employed for streamlining CMS page templates; all under 1 kB, 662 bytes to be precise!
A bit on the 12 columns, 960 pixels system
The basic configuration of this system is a 12 column grid that is spread over 960 pixels. Every column of the grid has a width of 60 pixels and there are 20 pixel gutters between the columns. Although this is the configuration used by the creator of 1kb Grid in his designs, you are free to employ the same technique on different widths and number of columns.
Let’s now go over the CSS. As expected, a class is used corresponding to each one of the column widths, starting from 1 till 12. As mentioned above, every column has a width of 60 pixels and there are 20 pixel gutters between the columns. Hence, ‘.grid2’ calculation works out to 60 + 20 + 60 = 140 pixels.
Apart from the column widths, only couple of other classes are defined, namely ‘row’ and ‘column’. There is a 10 pixels margin on the right and left edges of the column class, leading to a total of 20 pixel gutter. An ‘overflow: hidden’ attribute is also applied on both rows and columns.
The main intent of using this technique is to clear floats, and do away with the need of ‘clear: both’ declaration. Lastly, ‘display: inline’ property is set on ‘.column’ for prevention of the Internet Explorer double-margin bug.
Coming to the HTML part of it, it’s quite minimal, just like the CSS. Every column has a class, with its width. Columns are contained by rows, which helps in clearing the floating columns and also facilitates page templating. The most important thing to be kept in mind here is that the number of columns in a row should add up to a total of 12.
Now, let’s find out how this grid can be used in streamlining of page templates in content management systems.
Usage in content management systems (CMS)
All CMS are driven by nothing but the templates. What’s special about templates is that you need to edit only one single file and the entire site gets updated. However, imagine having a website which features two different layouts – one for the home page and another one for the sub- pages of the website. In such a situation, you’d need two different template files, and in order to make site-wide changes, you’d be required to update two different files, rather than one.
It isn’t too difficult to manage 2 different templates. But think of a situation wherein you need to work on a website having several different layouts. Making site-wide changes can be a pretty hard job in that case!
1kb CSS grid to the rescue!
The solution to the above problem lies in the tidiness of the CSS grid rows we just created. They can be instrumental in reducing the number of different page templates needed for a website.
To begin, you should add an ID for the current page to the body tag.
body id = “home”
body id = “subpage”
Majority of content management systems have a mechanism for doing this. Furthermore, doing so is considered a good practice regardless of whether you use the grid system or not.
Secondly, you must introduce an additional class for every row of the grid, which works as the description of the columns contained in them. For instance, a class row_5_5 can be added to a row that has 2 columns of 5 units’ width each.
Thereafter, create a new file titled layout.css which instructs the browser to display only certain rows in case the body ID tag is “home,” and other set of rows when it’s set to “subpage.” This can be achieved by hiding every row by default, and then displaying only the ones that you need.
Hope you get the drift!
By simply creating one template that’s applicable to your entire website, you can significantly reduce the usage of different templates on the website. Less number of templates translates into easier development and less maintenance related issues.
Please note, you should employ this front-end method only after all the options of templates’ consolidation have been explored at the server-end. In addition, you must hide the unwanted rows only in cases wherein there’s no substantial content in those rows, else it can lead to another set of avoidable problems.
So, we learnt how to set up the basic 1kb CSS grid and how to use it in streamlining of templates in content management systems. Let’s now focus on its usage in difficult real-life situations such as nested rows and flexible grids.
The nested rows
As mentioned earlier, all content management systems are driven by templates. Now, the best part about these templates is that you can update or edit the entire website by making changes to one single file. Sometimes, it’s better to divide one single column into multiple rows. For instance, if there are couple of side-by-side columns with width equivalent to 6 column units each (from the 12 column example earlier), you’ll need to introduce something known as nested rows in order to divide either/both of them into two rows.
To begin, you’ll need to add a small CSS snippet. The grid will by default set the .row class to 960 pixels, which will need to be overwritten. The .column class will have a 10 pixel margin on the left and right (a 20 pixel gutter in total). You’ll need to retain this gutter for the nested columns too, but appropriate compensations will need to be made for the right margin of last nested column and left margin of first nested column. Hence, the margin attribute will need to be set as margin: 0 – 10px.
The HTML will not be too difficult to handle. It’ll follow the same pattern as the normal columns and rows, only with nesting inside a pre-existing column.
It’s pretty easy to achieve flexible grid layouts with the grid system explained above. The HTML will stay exactly the same as in case of a fixed grid. When it comes to the CSS, you’ll need to divide every specified pixel width by 960, and then add a percentage sign at the end. However, please keep in mind that flexible grids aren’t compatible with nested rows that we discussed above.
How 1kbgrid tool comes into the picture?
Throughout the examples explained above we took only a 12 column grid into consideration. It’s pretty evident that a 12 column grid may not work in all situations. Hence, the creator of 1kb Grid tool has developed a unique and simple generator which lets you specify the number of columns, column width and the gutter width, and then delivers the perfect CSS file, exactly as per your requirements. As simple as that!