</> cf-grid docs

view the repository

Less variables

  • The following variables are exposed, allowing you to easily override them before compiling. Most mixins allows you to further override these values by passing them arguments.
  • @grid_box-sizing-polyfill-path: '../../box-sizing-polyfill;
  • The path where boxsizing.htc is located.
  • This path MUST be overridden in your project and set to a root relative url.
  • @grid_wrapper-width: 1200px;
  • The grid's maximum width in px.
  • @grid_gutter-width: 30px;
  • The fixed width between columns.
  • @grid_total-columns: 12;
  • The total number of columns used in calculating column widths.
  • @grid_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.
  • To support IE 6/7, ensure that the path to boxsizing.htc is set using the @grid_box-sizing-polyfill-path Less variable. Read more: https://github.com/Schepp/box-sizing-polyfill.

Less mixin

  • .grid_wrapper( @grid_wrapper-width: @grid_wrapper-width )
  • You can create wrappers with different max-widths by passing a pixel value into the mixin.

Usage

  • .main-wrapper {
  .grid_wrapper();
}
.wide-wrapper {
  .grid_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

  • .grid_column( @columns: 1; @total: @grid_total-columns; @prefix: 0; @suffix: 0 )
  • Computes column widths and prefix/suffix padding.
  • CSS borders are used for fixed gutters.

Usage

  • .main-wrapper {
  .grid_wrapper();
}
.half {
  .grid_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, @grid_total-columns: @grid_total-columns )
  • .pull( @offset: 1, @grid_total-columns: @grid_total-columns )

Usage

  • .first {
  .grid_column(1, 2);
  .grid_pull(1);
}
.second {
  .grid_column(1, 2);
  .grid_push(1);
}
  • <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 .grid_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

  • .grid_nested-col-group()

Usage

  • .main-wrapper {
  .grid_wrapper();
}
.cols {
  .grid_nested-col-group();
}
.half {
  .grid_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>