Create a Grid Layout Using Less Mixins

Appkit uses the Semantic Grid System — or Semantic.gs for short — to power page layout. It’s a methodology that we developed specifically for Appkit, but that has since gained traction in the wider community (see the Smashing Magazine article and the GitHub application).

Semantic.gs uses parametric Less mixins that provide the designer with simple controls for positioning elements on the page. At its core, a grid system consists of a given number of columns, each separated by a gutter. The grid system can either be fixed, using specific pixel values to define width; or it can be fluid, using percentages to achieve layouts that flex according to the size of the browser window.

First, this documentation covers the handful of configuration options available in Semantic.gs. Then it describes how to use the .column() and other mixins for assigning dimensions to elements.

  • @column-width (number)

  • @gutter-width (number)

  • @columns (number)

  • @gutter-method (string)

  • @total-width (see description)

  • Columns

    • .column([@column-units,@column-units-of-parent,@gutter-method])

  • Rows

    • .row([@column-units-of-parent])

  • Push and Pull

    • .push(@column-units-to-push[,@column-units-of-parent,@gutter-method])

    • .pull(@column-units-to-pull[,@column-units-of-parent,@gutter-method])

  • Responsive Layouts

Configuration Variables

These configuration variables are set by default in themes/twigkit/mixins-core/grid.less, but they can be overridden in theme.less or other stylesheets.

@column-width (number)
The width of a single column.
Default 1

@gutter-width (number)
The width of a gutter (the space between columns).
Default 1

@columns (number)
The total number of column units for the grid system.
Default 16

@gutter-method (string)
Whether the gutter should be created using margin or padding.: Default: padding

@total-width (see description)
Whether the layout should be fixed (pixel-based) or fluid (percentage based). Set @total-width: @gridsystem-width; for a fixed layout, or @total-width: 100%; for fluid layout.
Default 100% (fluid layout)

Both @column-width and @gutter-width can use either pixel values or numbers without any unit. To achieve the classic 960-pixel fixed grid, for example, @column-width and @gutter-width could be set to 60px and 20px, respectively. But because Appkit defaults to a fluid layout. Here we use a value of 1 to signify that a column and gutter should be of equal proportion.

Here is an example of how these configuration variables could be configured in theme.less:

@column-width: 1;
@gutter-width: 1;
@columns: 16;
@gutter-method: padding;
@total-width: 100%;

Mixins

Columns

Columns are used to define the horizontal dimensions of elements on the page. In a 16-column grid system, for example, setting a given element to .column(8) would direct it to occupy 50% of the horizontal layout. (View the Semantic.gs fixed and fluid examples.)

.column([@column-units,@column-units-of-parent,@gutter-method])
Sets the width of an element to the desired number of column units, and sets either margin or padding to achieve the appropriate gutter spacing.

  • '@column-units' – The desired width for the current element, in column units.

  • '@column-units-of-parent' – The width of the parent element, in column units. This parameter is only needed for nested columns.
    Default: the total number of columns in the grid system

  • '@gutter-method' – Whether the gutter should be created using margin or padding.
    Default: the grid system’s gutter method

To achieve a two-column layout with a primary column and a sidebar, for example, you could provide these Less rules (assuming a total of 16 columns):

article#primary-content {
    .column(11);
}
section#secondary-content {
    .column(5);
}

The above Less would compile to this CSS:

article#primary-content {
    display: inline;
    float: left;
    width: 28.125%;
    padding-left: 1.5625%;
    padding-right: 1.5625%;
}
article#secondary-content {
    display: inline;
    float: left;
    width: 65.625%;
    padding-left: 1.5625%;
    padding-right: 1.5625%;
}

Rows

Many layouts consist of only a single level of columns. In some cases, however, it can be advantageous to nest columns within other columns. To achieve this, a row must be placed within the outermost column, and the nested columns should appear within the row element. (View the Semantic.gs nested columns example.)

.row([@column-units-of-parent])

  • '@column-units-of-parent' – The width of the parent element, in column units.
    Default: the total number of columns in the grid system

The row must be provided the number of column units assigned to its parent (9, in the example below), and, likewise, the nested columns must be informed of the column units assigned to their containing row (also 9). For example:

section#country {
    .column(9);

    ul#city-list {
        .row(9);

        li.city {
            .column(3,9);
        }
    }
}

Push and Pull

The .push() and .pull() mixins enable the designer to indent elements (either a left indent or a right indent, respectively) by a given number of column units. (View the Semantic.gs push and pull example).

.push(@column-units-to-push[,@column-units-of-parent,@gutter-method])
Adds left margin or padding (depending on @gutter-method) to an element equal to the number of column units specified.

  • @column-units-to-push – The size of the left margin/padding that should be applied, in column units. *@column-units-of-parent – The width of the parent element, in column units.
    Default: the total number of columns in the grid system. @gutter-method – Whether the gutter should be created using margin or padding.
    Default: the grid system’s gutter method

.pull(@column-units-to-pull[,@column-units-of-parent,@gutter-method])
Adds right margin or padding (depending on @gutter-method) to an element equal to the number of column units specified.

  • @column-units-to-push – The size of the left margin/padding that should be applied, in column units.

  • @column-units-of-parent – The width of the parent element, in column units.
    Default: the total number of columns in the grid system

  • @gutter-method – Whether the gutter should be created using margin or padding.
    Default: the grid system’s gutter method

Responsive layouts tutorial

The Semantic Grid Systems mixins can be combined with CSS media queries to create responsive layouts—that is, page layouts that adapt to the current size of the browser window. See the Semantic.gs tutorial on responsive layouts for more details.