Grid System

Every framework relies on a grid system as part of its foundation. Wirefy is no exception. However, most grid systems add classes and additional markup to your code. Our grid is completely semantic. Your columns, rows and gutter widths live in your CSS rather than your HTML. The grid is extremely flexible and responsive.

The grid defaults to 12 columns at 960 pixels. To customize the columns and gutters override the default variables found in _grid.scss

<article>
  <p>8/12</p>
</article>
<aside>
  <p>4/12</p> 
</aside>

article {
  @include column(12); 
  @media(min-width: 55em) { 
    @include column(8);
  }
}
aside {
  @include column(12);
  @media(min-width: 55em) {
    @include column(4);
  }
}

The result would look like:

Nested Columns

Nested columns can be extremely useful to add even more flexibility to your wireframes. By applying the .row() mixin to the containing element, you can nest columns within. You should always include the number of grid units of the parent (8, in this case), and then the same number must be passed into the nested columns as the second parameter. Most grid systems do not support this type of fluid nesting.

<article>
<ul>
  <li>4/8</li>
  <li>4/8</li>
</ul>
</article>
<aside>
  <p>4/12</p> 
</aside>

article {
  @include column(12); 
  @media(min-width: 55em) { 
    @include column(8);
  }
  ul{
	@include row(12, 12);
	@media(min-width: 55em) {
	  @include row(8);
	}
	li{
	  @include column(12, 12);
	  @media(min-width: 55em) {
        @include column(4,8);
      }	
	}
  }
}
...

Push & Pull

Occasionally, you might need to offset a column. You can do this by including either a .push() or .pull() attribute to your scss file.

article {
  @include column(6);
  @include push(2);	
}
aside{
  @include column(2);
  @include pull(2);	
}