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

AU-grid-12-make-grid-columns

Iterates through all 12 columns (≥2) to calculate the correct amount of left and right padding for each of the classes.

Example

@include AU-grid-12-make-grid-columns;

AU-grid-12-float-grid-columns

Iterates through the columns to create a new list and then sets the float.

Props

Prop name Type Description
class string The class to iterate and set the float against

Example

@include AU-grid-12-float-grid-columns( 'xs' );

AU-grid-12-calc-grid-column

Calculates the correct widths as a percentage based on the column count, column breakpoint class, and type (pull or offset).

Props

Prop name Type Description
i number The current column 1-12
class string The current class xs, sm, md, lg
type string The type of styles to be applied

Example

@include AU-grid-12-calc-grid-column( 1, 'xs', 'width' );

AU-grid-12-loop-grid-columns

Calls the AU-grid-12-calc-grid-column mixin and combines them.

Props

Prop name Type Description
columns number Total number of columns
class string The current class xs, sm, md, lg
type string The type of styles to be applied

Example

@include AU-grid-12-loop-grid-columns( $AU-grid-12-columns, $class, width );

AU-grid-12-make-grid

Create the grid and all the necessary classes.

Props

Prop name Type Description
class string The current class xs, sm, md, lg

Example

//create xs classes
@include AU-grid-12-make-grid( xs );

//create sm classes
@include AU-media( sm ) {
  @include AU-grid-12-make-grid( sm );
}

//create md classes
@include AU-media( md ) {
  @include AU-grid-12-make-grid( md );
}

//create lg classes
@include AU-media( lg ) {
  @include AU-grid-12-make-grid( lg );
}

Feedback