Toolkit

Grid System

ApplePie Grid is easy to work with and very powerful tool for building complex flexible and responsive layouts. This grid 6-column nestable grid which is really simple because it is based on proportions rather than columns count. It is similar to OOCSS Grid with extra features and more consistent naming.

  • Minimalistic and simple grid based on proportions (allows you not to count columns but divide page into half, thirds, fourth, etc.)
  • It is fluid and doesn't use fixed width for columns, so can scale to an arbitrary size (defined by the max width of the row)
  • Infinite nesting and stacking
  • It uses box-sizing: border-box so that borders and padding do not affect the overall width of the columns

Usage

Creating grid is pretty simple. Just add element with a class of row to create a horizontal block that will contain vertical columns. Row basically acts as css clearfix to fight the zero-height container problem.

Columns are represented by various class names that describe their widths. For instance .col1of2 has a width of 50%, and .col1of5 would have a width of 20%

All content which is visible to users needs to be contained inside a grid column. This ensures that the content will be rendered properly.

Let's start with a simple example. Here's a grid with three equal columns:


          <body>
            <div class="row">
              <div class="col1of3">
                <!-- Content for first column -->
              </div>
              <div class="col1of3">
                <!-- Content for second column -->
              </div>
              <div class="col1of3">
                <!-- Content for third column -->
              </div>
            </div>
          </body>
      

Grid Column Sizes

ApplePie ships with 6-column grid. Why not 12 or 24 columns? Because 6 is enough to build any layout! You are unlikely to have need to create as narrow grind units as 1/12 or 1/24 of your 960px overal width (but if you do, you can always nest columns inside other columns). And it is more convenient to think about columns in terms of proportions rather than think about how much space will take 4 columns out of 24 or 8 columns out of 24.

Columns don't always have to be equal width, you can mix different column width inside one row, but they should not take more than 100% width or parent row element. Depending on your needs you can create mixed grids:


        <div class="row">
          <div class="col2of3">
            <!-- Content for first column -->
          </div>
          <div class="col1of3">
            <!-- Content for second column -->
          </div>
        </div>
      

or


        <div class="row">
          <div class="col1of4">
            <!-- Content for first column -->
          </div>
          <div class="col1of2">
            <!-- Content for second column -->
          </div>
          <div class="col1of4">
            <!-- Content for third column -->
          </div>
        </div>
      

Nesting Grids

If you need to create smaller fractions for your layout or if it is obvious that content of one grid column should also be divided into columns - you can nest grids as many times as you need. Remember that column width is calculated related to a parent element, not overall page width. So if you place col1of3 into another column of 480px, you'll get a 160px wide fraction.

Trivial example: you have main content and a sidebar and there are 3 columns of text in main section - following markup will solve this problem:


        <div class="row">
          <div class="col3of4">
            <div class="row">
              <div class="col1of3">
                <!-- Content column one -->
              </div>
              <div class="col1of3">
                <!-- Content column two -->
              </div>
              <div class="col1of3">
                <!-- Content column three -->
              </div>
            </div>
          </div>
          <div class="col1of4">
            <!-- Sidebar -->
          </div>
        </div>
      

Grid Gutters

By default ApplePie grid columns don't have gutters because you might just not need them. And it's always easier to apply paddings where you need them, than do a reset each time when you don't. You can directly apply paddings and borders to columns – this won't break layout because of use of box-sizing: border-box.