Aione Grid

Containers

Use .container for a responsive fixed width container.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Aione grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Use rows to create horizontal groups of columns.

  • Content should be placed within columns, and only columns may be immediate children of rows.

  • Predefined grid classes like .row and .ac s100 m50 l are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.

  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.

  • Grid columns are created by specifying the number of 100 available columns you wish to span.

  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices.Therefore, e.g. applying any
    .ac s100 m50 class to an element will not only affect its styling on medium devices but also on large devices if a .ac s100 l50

Example: Mobile and desktop

1
2
3
4
5
6
7
8
9
10
11
12
ac s100 m50 l50
ac s100 m50 l50
ac s100 m50 l25
ac s100 m50 l25
ac s100 m50 l25
ac s100 m50 l25

Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-m* classes.

ac s100 m50 l20
ac s100 m50 l50
ac s100 m50 l30

Example: Column wrapping

If more than 100 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

ac s100 m33 l30
ac s100 m33 l70
ac s100 m33 l30
ac s100 m33 l40
ac s100 m33 l30