Wed, January 25, 2012 Clinton Skakun

Learn How To Rock Your Templates with HTML KickStart Columns

Fun with Columns

HTML KickStart has totally streamlined the process of building columns into your template. This solves the problems surrounding widths and dealing with padding. It also saves you the time you'd normally spend fiddling with floats and adding containers.

How Columns Work in HTML KickStart

Columns are sized from a scale of 1 to 12, using the built in css classes .col_1 to .col_12. When adding columns, note that the columns have to add up to 12 in order to float properly. So for example, if you're building a three column template, you could use the classes col_4, col_3 and col_5. You can choose what size your columns are, which order they are in and how many(as long as there's no more than 12).

Let's take a look at some examples of HTML Kickstart columns and how they can be used in your project:

Example 1: Two columns

In this example, I'm using a class col_9 on the left and col_3 on the right.

A two column template

The code looks somthing like this:

<div class="col_9">
<h3>Main Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
</div>
<div class="col_3">
<h4>Sidebar</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
</div>

Emaple 2: Three columns

This example shows three columns with the same width using .col_4 for each div.

A three column template

And the code:

<div class="col_4">
<h3>Header One</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
</div>
<div class="col_4">
<h4>Header Two</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
</div>
<div class="col_4">
<h4>Header Three</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
</div>

Example 3: Nested columns

It's also just as easy to nest columns in HTML KickStart. The same column 1 to 12 rule applies.

Here's an example of two nested columns in a parent column:

 Nested columns

<div class="col_12">
<h4>Parent</h4>
<div class="col_6">Left</div>
<div class="col_6">Right</div>
<p>More content</p>
</div>

Example 4: Using .inner for padding control

The .inner class was created in response to many HTML KickStart users asking for a way to control padding in columns.

The inner feature allows you to easily control the padding of all or any of your columns,without needing to adjust each column size. The class .column is dynamically added to the column and a div with the .inner class is dynamically added inside each column, wrapping the content, so you do not have to add it yourself. By default the .inner class has a padding of 10 pixels.

 

You can easily change the padding of any specific column using inheritance:

#my-column .inner {padding: 20px;} /* Style for the #my-column inner div */

Conclusion

The great thing about HTML KickStart's columns is that they "just work." This feature alone is a huge time saver in any project. The framework defaults to a template structure that looks good and can work with any design, yet giving you the wiggle room to customize.

I hope these examples help you better understand how to use columns in the HTML KickStart's framework. If you have any questions, please leave a comment.

99Lime Announcements & Releases.