0.8.6 beta

| Axle | '960 grid' | 12 col | fluid

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 an alternative, Axle's fluid grid is using a percentage based solution. For the standard pixel solution, click here.

Axle's fluid 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.

ALERT!!! The fluid grid is STILL IN DEVELOPMENT. This kind of works, I am using hacks that I am not proud of. Do not use at this time.

1. 960 Site fluid grid

960 grid layout for UI placement

  • .flgrid_12(1)
  • .flgrid_12(11)
  • .flgrid_12(2)
  • .flgrid_12(10)
  • .flgrid_12(3)
  • .flgrid_12(9)
  • .flgrid_12(4)
  • .flgrid_12(8)
  • .flgrid_12(5)
  • .flgrid_12(7)
  • .flgrid_12(6)
  • .flgrid_12(6)
  • .flgrid_12(7)
  • .flgrid_12(5)
  • .flgrid_12(8)
  • .flgrid_12(4)
  • .flgrid_12(9)
  • .flgrid_12(3)
  • .flgrid_12(10)
  • .flgrid_12(2)
  • .flgrid_12(11)
  • .flgrid_12(1)
  • .flgrid_12(4)
  • .flgrid_12(4)
  • .flgrid_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 .flgrid_12() or .flgrid_16() depending on the layout you want to use. The same syntax will be used for .flprefix_12(), flsuffix_12(), flpull_12() and flpush_12() or .flprefix_16(), flsuffix_16(), flpull_16() and flpush_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 .flpush_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;
  .flgrid_12(7);
  float: left;
  .flpush_12(.25);
}

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