Grid

Create a fully responsive, fluid and nestable grid layout.

The grid system of Clique.UI follows the mobile-first development approach and uses units with semantic, predefined classes inside each grid component which define the width of it's columns.

The grid component incorporates flexbox technology, giving you greater control of grid layout and alignment in modern browsers with a CSS-only ready fallback for browsers that don't support flexbox.


Basic Usage

Each grid is bound by a .row element, and populated by .col elements. Both the .row and .col elements have different modifier classes that we'll explore later.

The .col element class with a predefined width is prefixed with col, to represent a column within the row. The class is then followed by two integers, seperated by a single dash, which represents the fraction of space it takes up within the parent .row element. Let's look at how this plays out in the Base 12 and Base 10 grid systems.

NOTE The grid has no style related CSS. In these examples we included elements from the Panel component.

Components

Class Description
.row Defines the style and behaviors of the grid. Apply this class and any modifiers to an element which contains child columns.
.col-*-* Add this class to a <ul> element to create a navigation. Use <a> elements as menu items within the list.
.push-*-* Add this class to a list item to apply an active state.
.pull-*-* Add this class to indicate a parent menu item.

Sub Objects

Class Description
.row-*-cols Creates a grid of even-width columns

Modifiers

Class Description
.row-collapse Removes spacing between columns
.row-small Reduces spacing between columns to 10px
.row-medium Reduces spacing between columns to 20px
.row-divider Adds a horizontal seperator between it's columns
.row-match Applies the same height to each of it's columns' immediate child element

Columns

A basic grid component is created by adding the .rowclass to a wrapping element and .col-*-* classes to it's children. This allows for optimum control over the spacing and layout of your content.

Each column of the grid is represented by a class that is broken down into three pieces seperated by hypens - the first, .col identifies the element itself as a column. The second, -*, or a hyphen followed by a number, represents the value of the total whole which that element's width will expand to. The final piece, -*, once again a hyphen represented by another number, represents the total value from which the element's width could potentially occupy.

Usage

  • Class CSS Example
    .col-12-12 width: 100%;
    .col-11-12 width: 91.667%;
    .col-10-12 width: 83.333%;
    .col-9-12 width: 75%;
    .col-8-12 width: 66.667%;
    .col-7-12 width: 58.333%;
    .col-6-12 width: 50%;
    .col-5-12 width: 41.667%;
    .col-4-12 width: 33.333%;
    .col-3-12 width: 25%;
    .col-2-12 width: 16.667%;
    .col-1-12 width: 8.333%;
  • .col-4-12
    .col-4-12
    .col-4-12
    .col-6-12
    .col-6-12
    .col-3-12
    .col-2-12
    .col-7-12
  • <div class="row">
        <div class="col-4-12">...</div>
        <div class="col-4-12">...</div>
        <div class="col-4-12">...</div>
    </div>
    <div class="row">
        <div class="col-6-12">...</div>
        <div class="col-6-12">...</div>
    </div>
    <div class="row">
        <div class="col-3-12">...</div>
        <div class="col-2-12">...</div>
        <div class="col-7-12">...</div>
    </div>

Push

Grid columns can be given additional preceding space by applying the .push-*-* class. Like the grid's column, the two numbers in the class represent the value of the parent the element is being pushed.

Usage

  • Class CSS Example
    .push-11-12 left: 91.6667%;
    .push-10-12 left: 83.3333%;
    .push-9-12 left: 75%;
    .push-8-12 left: 66.6667%;
    .push-7-12 left: 58.3333%;
    .push-6-12 left: 50%;
    .push-5-12 left: 41.6667%;
    .push-4-12 left: 33.3333%;
    .push-3-12 left: 25%;
    .push-2-12 left: 16.6667%;
    .push-1-12 left: 8.3333%;
  • .col-4-12
    .col-4-12 .push-4-12
    .col-6-12 .push-3-12
  • <div class="row">
        <div class="col-4-12">...</div>
        <div class="col-4-12 push-4-12">...</div>
    </div>
    <div class="row">
        <div class="col-6-12 push-3-12">...</div>
    </div>

Pull

In contrast to the .push-*-* component, applying the .pull-*-* class will add a negative left value to the element.

Usage

  • Class CSS Example
    .pull-11-12 left: 91.6667%;
    .pull-10-12 left: 83.3333%;
    .pull-9-12 left: 75%;
    .pull-8-12 left: 66.6667%;
    .pull-7-12 left: 58.3333%;
    .pull-6-12 left: 50%;
    .pull-5-12 left: 41.6667%;
    .pull-4-12 left: 33.3333%;
    .pull-3-12 left: 25%;
    .pull-2-12 left: 16.6667%;
    .pull-1-12 left: 8.3333%;
  • .col-4-12
    .col-4-12 .pull-4-12
    .col-6-12 .pull-3-12
  • <div class="row">
        <div class="col-4-12">...</div>
        <div class="col-4-12 pull-4-12">...</div>
    </div>
    <div class="row">
        <div class="col-6-12 pull-3-12">...</div>
    </div>

Sub Objects

Columns of Even Widths

To create a grid whose child elements' widths are equal add one of the .row-*-cols classes to the row itself. This provides a significantly simpler and more elegant solution to repeatedly applying the same fixed column-width class across all row children.

Usage

  • Class Width of Columns
    .row-12-cols 8.3333%
    .row-11-cols 9.0909%
    .row-10-cols 10%
    .row-9-cols 11.1111%
    .row-8-cols 12.5%
    .row-7-cols 14.2857%
    .row-6-cols 16.6667%
    .row-5-cols 20%
    .row-4-cols 25%
    .row-3-cols 33.3333%
    .row-2-cols 50%
  • .row-12-cols

    .row-11-cols

    .row-10-cols

    .row-9-cols

    .row-8-cols

    .row-7-cols

    .row-6-cols

    .row-5-cols

    .row-4-cols

    .row-3-cols

    .row-2-cols

  • <ul class="row row-12-cols">
        ...
    </ul>
    
    <ul class="row row-2-cols">
        ...
    </ul>
    
    

Modifiers

Gutter Collapse

To remove spacing between row columns add the .row-collapse class.

Usage

  • Lorem ipsum
    Lorem ipsum
    Lorem ipsum
  • <div class="row row-collapse">
        ...
    </div>

Gutter Small

To apply reduce the space between each colummn add the .row-small class.

Usage

  • Lorem ipsum
    Lorem ipsum
    Lorem ipsum
  • <div class="row row-small">
        ...
    </div>

Gutter Medium

Add the .row-medium class to apply a medium (20px) sized gutter between each row column.

Usage

  • Lorem ipsum
    Lorem ipsum
    Lorem ipsum
  • <div class="row row-medium">
        ...
    </div>

Row Divider

Add the .row-divider class to separate grid columns with lines.

NOTE The horizontal divider cannot be applied to grids with any of the push-*-* or pull-*-* classes.

Usage

  • .col-4-12-medium
    .col-4-12-medium
    .col-4-12-medium
    .col-4-12-medium
    .col-4-12-medium
    .col-4-12-medium
  • <div class="row row-divider">
        ...
    </div>

Row Match

The Grid component uses Flexbox, so the height of grid columns is matched automatically. To achieve the same effect in older browsers that don't support Flexbox, just add the data-row-match attribute to your grid. If your grid wraps into multiple rows, only grid columns within the same row are matched. To match grid columns accross all rows just use data-row-match="{row: false}".

NOTE If grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.

Usage

  • Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  • <div class="row row-divider" data-row-match>
        <div class="col-4-12-medium">...</div>
        <div class="col-4-12-medium">...</div>
        <div class="col-4-12-medium">...</div>
    </div>

Match height of panels

If you want to match the heights of panels in a grid, just add the .row-match class. When using the data attribute, you need to add the {target:'.panel'} selector.

Usage

  • Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    Lorem ipsum dolor sit amet.
  • <div class="row row-divider" data-row-match="{target:'.panel'}" data-row-match>
        <div class="col-4-12-medium">
            <div class="panel panel-box">...</div>
        </div>
        <div class="col-4-12-medium">
            <div class="panel panel-box">...</div>
        </div>
        <div class="col-4-12-medium">
            <div class="panel panel-box">...</div>
        </div>
    </div>

Responsive

Like the responsive visiblity utility classes, you can suffix the .row and .col components with *-small, *-medium, or *-large to limit the application of it's style to a particular viewport width.

Usage

  • Class Example Description
    .* (No class suffix) .row Affects all device widths.
    .*-xsmall .col-6-12-xsmall Affects device widths of 480px and smaller only.
    .*-small .row-6-cols-small Affects device widths of 480px and higher. Grid columns will stack on smaller sizes.
    .*-medium .col-6-12-medium Affects device widths of 768px and higher. Grid columns will stack on smaller sizes.
    .*-large .row-2-cols-large Affects device widths of 960px and higher. Grid columns will stack on smaller sizes.
  • 50% >= 768px
    33.333% >= 960px
    display: none < 960px
    33.333% >= 960px
    50% >= 768px
    33.333% >= 960px
    50% @ all widths
    33.333% >= 768px
    display: none < 768px
    33.333% >= 768px
    50% @ all widths
    33.333% >= 768px
    100% @ all widths
    display: block < 767px;
    100% @ all widths
    display: block < 959px;
    100% @ all widths
    display: block >= 960px;
  • <div class="col-4-12-large hidden-medium">
    	<div class="panel panel-box">
    		display: none less than 960px
    		33.333% >= 960px
    	</div>
    </div>