0.8.6 beta

| Axle | '960 grid' | 12 col | px

Axle's grid system is based off of the 960 grid system developed by Nathan Smith. You and others led the way ... thanks for all the hard work. As as base, Axle's grid is using a standard pixel based solution. For a fluid solution, click here.

Axle's grid.LESS can support both a 12 and 16 col grid system. Below is an example of a 12 col. See code instructions and examples below.

1. 960 Site grid

960 grid layout for UI placement

  • .grid_12(1)
  • .grid_12(11)
  • .grid_12(2)
  • .grid_12(10)
  • .grid_12(3)
  • .grid_12(9)
  • .grid_12(4)
  • .grid_12(8)
  • .grid_12(5)
  • .grid_12(7)
  • .grid_12(6)
  • .grid_12(6)
  • .grid_12(7)
  • .grid_12(5)
  • .grid_12(8)
  • .grid_12(4)
  • .grid_12(9)
  • .grid_12(3)
  • .grid_12(10)
  • .grid_12(2)
  • .grid_12(11)
  • .grid_12(1)
  • .grid_12(4)
  • .grid_12(4)
  • .grid_12(4)

Instructions:

Axle's grid solution is based on 5 mixins per grid solution. These mixins support Grid width, prefix, suffix, pull and push.

In your semantic class, use the mixin of .grid_12() or .grid_16() depending on the layout you want to use. The same syntax will be used for .prefix_12(), suffix_12(), pull_12() and push_12() or .prefix_16(), suffix_16(), pull_16() and push_16()

In the () you will enter the column values and Axle takes care of the rest.

Axle's solution is completely mathematical, fluid and based on percentages. Whereas a .pull or .push in 960gs will move the block a full 60px or 80px, Axle's grid solution will allow you to move a fraction of a grid if needed.

Using something like .push_12(.5) will push the block element 1/2 a grid (or 40px per this example).

Building a semantic block element class using mixins.

HTML Example:

<article class="summary_quote">
  <p>Axle is not a CSS framework, but is more of a process in which to develop visual assets. The real power behind Axle is to develop your UI solution in an abstract environment from the application.</p>
  <p>If you like OOCSS and crave real semantic markup, you will LOVE AXLE!</p>
  <blockquote>BTW- axle.dalesande.com is fucking awesome</blockquote>
  <p><cite>-- <a href="http://twitter.com/#!/whazzmaster">whazzmaster</a></cite></p>
</article>
<aside class="home_twitter_feed">
  <?php include 'partials/twitter.php'?>
</aside>

LESS Example:

.summary_quote {
  .large;
  .grid_12(7);
  float: left;
  .push_12(.25);
}

.home_twitter_feed {
  .grid_12(5);
  .box_shadow (0 0px 10px, @shadow_color);
  float: left; 
  .push_12(1);
}