SimpleGrid

simplegrid.scss

/*! -----------------------------------------------
* simplegrid.scss
* https://gist.github.com/gists/1409900/
* Custom version of 960.gs (http://960.gs/)
* Naming inspired by SimpleBits (http://simplebits.com/)
* Licensed under GPL and MIT
* 
* Custom:
* - columns     > 12
* - underscores > dashes
* - container   > wrap
* - alpha       > first
* - omega       > last
* - clearfix    > group
* - wrap        + position:relative
---------------------------------------------------*/

/* Wrap
---------------------------------------------------*/

.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  position: relative;

  /* Grid
  ---------------------------------------------------*/

  .grid-1,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-7,
  .grid-8,
  .grid-9,
  .grid-10,
  .grid-11,
  .grid-12 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
  }

  .grid-1   { width: 60px; }
  .grid-2   { width: 140px; }
  .grid-3   { width: 220px; }
  .grid-4   { width: 300px; }
  .grid-5   { width: 380px; }
  .grid-6   { width: 460px; }
  .grid-7   { width: 540px; }
  .grid-8   { width: 620px; }
  .grid-9   { width: 700px; }
  .grid-10  { width: 780px; }
  .grid-11  { width: 860px; }
  .grid-12  { width: 940px; }

  /* Prefix / Suffix
  ---------------------------------------------------*/

  .prefix-1   { padding-left: 80px; }
  .prefix-2   { padding-left: 160px; }
  .prefix-3   { padding-left: 240px; }
  .prefix-4   { padding-left: 320px; }
  .prefix-5   { padding-left: 400px; }
  .prefix-6   { padding-left: 480px; }
  .prefix-7   { padding-left: 560px; }
  .prefix-8   { padding-left: 640px; }
  .prefix-9   { padding-left: 720px; }
  .prefix-10  { padding-left: 800px; }
  .prefix-11  { padding-left: 880px; }

  .suffix-1   { padding-right: 80px; }
  .suffix-2   { padding-right: 160px; }
  .suffix-3   { padding-right: 240px; }
  .suffix-4   { padding-right: 320px; }
  .suffix-5   { padding-right: 400px; }
  .suffix-6   { padding-right: 480px; }
  .suffix-7   { padding-right: 560px; }
  .suffix-8   { padding-right: 640px; }
  .suffix-9   { padding-right: 720px; }
  .suffix-10  { padding-right: 800px; }
  .suffix-11  { padding-right: 880px; }

  /* Push / Pull
  ---------------------------------------------------*/

  .push-1, .pull-1,
  .push-2, .pull-2,
  .push-3, .pull-3,
  .push-4, .pull-4,
  .push-5, .pull-5,
  .push-6, .pull-6,
  .push-7, .pull-7,
  .push-8, .pull-8,
  .push-9, .pull-9,
  .push-10, .pull-10,
  .push-11, .pull-11 {
    position: relative;
  }

  .push-1   { left: 80px; }
  .push-2   { left: 160px; }
  .push-3   { left: 240px; }
  .push-4   { left: 320px; }
  .push-5   { left: 400px; }
  .push-6   { left: 480px; }
  .push-7   { left: 560px; }
  .push-8   { left: 640px; }
  .push-9   { left: 720px; }
  .push-10  { left: 800px; }
  .push-11  { left: 880px; }

  .pull-1   { left: -80px; }
  .pull-2   { left: -160px; }
  .pull-3   { left: -240px; }
  .pull-4   { left: -320px; }
  .pull-5   { left: -400px; }
  .pull-6   { left: -480px; }
  .pull-7   { left: -560px; }
  .pull-8   { left: -640px; }
  .pull-9   { left: -720px; }
  .pull-10  { left: -800px; }
  .pull-11  { left: -880px; }

  /* First / Last
  ---------------------------------------------------*/

  .first  { margin-left: 0; }
  .last   { margin-right: 0; }

}

/* Helpers
---------------------------------------------------*/

/* For modern browsers */
.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.group {
  zoom: 1;
}