Introduction to columns in Skeleton CSS framework

Skeleton is a dead simple, responsive CSS framework which is just 8.4 kg  in size when zipped. If you are developing a smaller site and don’t want the overhead of a larger CSS framework , you can use skeleton CSS framework to build a quick website. It is easy to learn. It is also pure CSS framework, doesn’t need any javascript.

To use skeleton , download the Skeleton framework from their website.  Or you can visit the github too. Both have download links to Skeleton framework. Download the skeleton framework and unzip into your folder. Link the CSS files in the following way.

<link href="css/normalize.css" type="text/css" rel="stylesheet" />
<link href="css/skeleton.css" type="text/css" rel="stylesheet" />

Skeleton uses 12 column grid with maximum width is set to 960 pixels. Its columns are added within a container or row similar to bootstrap.

The column should be immediate  child of the row. Columns are defined by adding classes like “one column” , “two columns” to elements. Below is the example of making a grid using the column layout helpers in Skeleton CSS framework.

<div class="row">
      <div class="two columns">
          <h3>Two Columns</h3>
      </div>
      <div class="two columns">
          <h3>Two columns</h3>
      </div>
      <div class="four columns">
          <h3>Four columns</h3>
      </div>
      <div class="three columns">
          <h3>Four Columns</h3>
      </div>
      <div class="one column">
          <h3>One Column</h3>
      </div>
  </div>

Notice the class names “one column” , “three columns” etc.

This will result in the following column grid.

We can also use shorthand notation for grid layout too. For making a column that occupies half of page would be a class “one-half column” . For making a column that occupies one third of the page would be a class “one-third column” . Below is the example for such shorthand notation.

<div class="row">
     <div class="one-third column">One Third of the width</div>
     <div class="two-thirds column">Two thirds of the width</div>
 </div>
 <div class="row">
     <div class="one-half column">Half of the width</div>
     <div class="one-half column">Half of the width</div>
 </div>

This will result in the following layout

Skeleton has styles for some other elements like buttons, input tools, lists, tables etc. The columns built by skeleton framework are responsive too.  Skeleton gives a good starting point for a project.