Grid 12

v3.0.0

A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more easily, using a responsive, scrollable column structure.

Released

History
View changes
Install
npm i @gold.au/grid-12
Tags
Requires
Contributors
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Dominik Wilkowski avatar picture

Default

The grid is similar to the bootstrap grid system. This means you can access different breakpoints by changing the class name or by using the variables below. The breakpoints for each value are:

  • xs : $AU-media-xs : 576px
  • sm : $AU-media-sm : 768px
  • md : $AU-media-md : 992px
  • lg : $AU-media-lg : 1200px

These sizes can be overridden as necessary.

Example

<main class="au-grid">
  <div class="container">
    <div class="row">
      <div class="col-xs-1"><span>1</span></div>
      <div class="col-xs-2"><span>2</span></div>
      <div class="col-xs-2"><span>2</span></div>
      <div class="col-xs-3"><span>3</span></div>
      <div class="col-xs-4"><span>4</span></div>
    </div>
    <div class="row">
      <div class="col-xs-6"><span>6</span></div>
      <div class="col-xs-6"><span>6</span></div>
    </div>
    <div class="row">
      <div class="col-xs-12"><span>12</span></div>
    </div>
  </div>
</main>

Pull and Push

You can control the visual order of columns within a row by using the pull and push modifiers in class names.

Example

<main class="au-grid">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-xs-push-8"><span>First in source, last to display.</span></div>
      <div class="col-xs-4"><span>Second in source, second to display.</span></div>
      <div class="col-xs-4 col-xs-pull-8"><span>Last in source, first to display.</span></div>
    </div>
  </div>
</main>

Offset

You can offset a row by a specified number of columns by using the offset class name.

Example

<main class="au-grid">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">6</div>
      <div class="col-xs-offset-3 col-xs-3">3</div>
    </div>
  </div>
</main>

Fluid

Use container-fluid class for a full width container, spanning the entire width of your viewport.

Example

<main class="au-grid">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-4"><span>4</span></div>
      <div class="col-xs-4"><span>4</span></div>
      <div class="col-xs-4"><span>4</span></div>
    </div>
  </div>
</main>

Feedback