Global Less variables

• The following variables are default values used in creating grids. They can be overridden in your application's stylesheet. Most mixins allows you to override these values by passing them arguments.

• • @wrapper-width: 1200px;

  • The grid's maximum width in px.

• • @gutter-width: 30px;

  • The fixed width between columns.

• • @total-columns: 12;

  • The total number of columns used in calculating column widths.

• • @debug

  • Gives column blocks a background color if set to true.

Wrapper

• Wrappers are centered containers with a max-width and fixed gutters that match the gutter widths of columns.
• If you want IE 6/7 support, ensure boxsizing.htc is in the same dir as your stylesheet. Read more: https://github.com/Schepp/box-sizing-polyfill.

• Less mixin

  • .wrapper( @wrapper-width: @wrapper-width )

  • You can create wrappers with different max-widths by passing a pixel value into the mixin.

• Usage

  • .main-wrapper {
      .wrapper();
    }
    .wide-wrapper {
      .wrapper( 1900px );
    }

  • <div class="main-wrapper">
      This container now has left and right padding and a centered max width.
    </div>
    <div class="wide-wrapper">
      This container is the same except it has a wider max-width.
    </div>

Columns

• Less mixin

  • .column( @columns: 1; @total: @total-columns; @prefix: 0; @suffix: 0 )

  • Computes column widths and prefix/suffix padding.
  • CSS borders are used for fixed gutters.

• Usage

  • .main-wrapper {
      .wrapper();
    }
    .half {
      .column(1, 2);
    }

  • <div class="main-wrapper">
      <div class="half">I am half of my parent.</div>
      <div class="half">I am half of my parent.</div>
    </div>

• This is a placeholder for documenting prefix and suffix

  • ...

Push and Pull mixins for source ordering

• • .push( @offset: 1, @total-columns: @total-columns )

  • .pull( @offset: 1, @total-columns: @total-columns )

• Usage

  • .first {
      .column(1, 2);
      .pull(1)l
    }
    .second {
      .column(1, 2);
      .push(1)l
    }

  • <div>
      <div class="second">I am first in the markup but appear after .first.</div>
      <div class="first">I am second in the markup but appear before .second.</div>
    </div>

Nested columns

• Since all cf-grid columns have left and right gutters you will notice undesireable offsetting when nesting columns. Normally this is removed with complex selectors or by adding classes to the first and last column per 'row'. In cf-grid the way to get around this is by wrapping your columns in a container that utilizes the .nested-col-group() mixin. This mixin uses negative left and right margins to pull the columns back into alignment with parent columns.
• NOTE: Working this way allows you to easily create responsive grids. You are free to control the number of columns per 'row' without having to deal with the first and last columns of each row.
• NOTE: cf-grids does not use 'rows' and there is no row container. To clarify, if you have a 12 column grid and place 24 columns inside of a wrapper cf-grid columns will automaitcally stack into 2 'rows' of 12.

• Less mixin

  • .nested-col-group()

• Usage

  • .main-wrapper {
      .wrapper();
    }
    .cols {
      .nested-col-group();
    }
    .half {
      .column(1, 2);
    }

  • <div class="main-wrapper">
      <div class="half">
        <div class="cols">
          <div class="half"></div>
          <div class="half"></div>
        </div>
      </div>
      <div class="half">
        <div class="cols">
          <div class="half"></div>
          <div class="half"></div>
        </div>
      </div>
    </div>