Grid System

BaseWeb is built with a very flexible grid system. Out of the box, you can use the default classes and settings to have a basic twelve column flexible grid. The basic things to know when using the base grid system is the markup structure.

<div class="container">
  <div class="row">
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
  </div>
  <div class="row">
    <div class="col col-6">...</div>
    <div class="col col-6">...</div>
  </div>
  <div class="row">
    <div class="col col-12">...</div>
  </div>
</div>

.col-4

.col-4

.col-4

.col-6

.col-6

.col-12

The class based grid system is generated using: build-grid-system(). By default it’s going to generate all the classes for the container, row and columns based on the grid variables. You can also pass in a map to override any default grid map settings based on different media breakpoints.

You can also set the grid type by passing a non-map parameter build-grid-system(mobile) which will make columns staked at 100% width.

@include build-grid-system('mobile');

@include media-min('medium') {
  @include build-grid-system(('total-width': 740px));
}

@include media-min('large') {
  @include build-grid-system(('total-width': 960px));
}

Semantic Grids

The BaseWeb grid system also supports the use of semantic grids. That means you can define a grid without having to use grid classes and instead use mixins to define grid elements directly in your stylesheets.

wrapper {
  @include make-container();

  .content {
    @include make-row();

    .aside {
      @include make-column(4);
    }
    .article {
      @include make-column(8);
    }
  }
}

There are also a set of functions that you can use for setting column and spacing widths. These can be used along with make-column-base() to define multiple columns and set the widths separately to reduce our CSS output.

.wrapper {
  @include make-container();

  .content {
    @include make-row();

    .aside,
    .article {
      @include make-column-base();
    }
    .aside {
      width: column-width(4);
    }
    .article {
      width: column-width(8);
    }
  }
}

.wrapper

.content

.aside

.article

Prefix and Suffix

You can also create spacing on columns using the prefix and suffix modifiers. These classes are used by adding the prefix and suffix class with the appropriate amount of column spacing you want to be added before or after a column.

<div class="container">
  <div class="row">
    <div class="col col-4 suffix-3">...</div>
    <div class="col col-3 prefix-2">...</div>
  </div>
  <div class="row">
    <div class="col col-5 prefix-4 suffix-3">...</div>
  </div>
</div>

The semantic grid system equivalent would use the add-prefix() and add-suffix mixins.

.aside {
  @include make-column(4);
  @include add-suffix(3);
}
.article {
  @include make-column(3);
  @include add-prefix(2);
}
.section {
  @include make-column(5);
  @include add-prefix(4);
  @include add-suffix(3);
}

.suffix-3

.prefix-2

.prefix-4 .suffix-3

Nested Columns

You can created nested columns in your grid system by adding a new row element inside a column. It’s important to note that the first element inside a row should always be a column. Otherwise, you’ll need to either manually remove the gutter margin or use the .col-no-gutter modifier class.

When using a fluid grid (percent based) the sum of columns in a row must equal the total column value $grid('columns'). But when using a fixed grid (pixel based), the sum must equal the column span of it’s parent column element. If you want to mix fixed and fluid grids between breakpoints, it’s recommended to use the semantic grid method.

<div class="container">
  <div class="row">
    <div class="col col-6">
      ...
      <div class="row">
        <div class="col col-6">...</div>
        <div class="col col-6">...</div>
      </div>
    </div>
    <div class="col col-6">
      ...
      <div class="row">
        <div class="col col-4">...</div>
        <div class="col col-4">...</div>
        <div class="col col-4">...</div>
      </div>
    </div>
  </div>
</div>

.col-6

.col-6

.col-6

.col-6

.col-4

.col-4

.col-4

By default, our grid system uses inner-gutter-width (padding) instead of gutter-width (margins). So we’re able to keep absolute gutters with a fluid grid for nested elements. But if you used margin gutters with a fluid grid, gutters would need to be percentage based.

Variable Map

All grid variables are defined within the $grid map and is used as the default settings for all grid system mixins and functions. You can modify these settings directly to effect all grid systems, or pass in a custom map to specific mixins.

$grid: (
  'output' : true,
  'output-mobile' : true,

  'class-container' : 'container',
  'class-row' : 'row',
  'class-column' : 'col',
  'class-column-left' : 'col-left',
  'class-column-right' : 'col-right',
  'class-prefix' : 'prefix',
  'class-suffix' : 'suffix',

  'type' : 'normal',

  'total-width' : 100%,
  'gutter-width' : 0,
  'inner-gutter-width' : 1.5rem,

  'columns' : 12,
  'column-float' : left,

  'container-margin' : 0 auto,
  'container-padding' : 0 1.5rem,
  'container-min-width' : none,
  'container-max-width' : 75rem,

) !default;

Grid Functions

These functions are used to calculate specific grid maths such as the width a set number of columns should span. These are used within grid mixins and are often used when defining semantic grid systems.

column-width

A function that returns the width of a column span.

$return: column-width( $index, $options: () );
Parameter Type Default Description
$index Integer None The number of column span you want returned.
$options Map $grid
Return Unit (pixel, percentage)

spacing-width

A function that returns the spacing of a column span.

$return: spacing-width( $index, $options: () );
Parameter Type Default Description
$index Integer None The number of column spacing you want returned.
$options Map $grid
Return Unit (pixel, percentage)

Grid Mixins

These mixins are used to output styles that define a grid system’s components. Such as grid containers, rows and columns as well as modifier classes like prefix and suffix spacing. They are also used for outputting the class based grid system.

make-container

Outputs all the styles needed to make an element a grid container.

@include make-container( $options: () );
Parameter Type Default
$options Map $grid

make-row

Outputs all the styles needed to make an element a grid row.

@include make-row( $options: () );
Parameter Type Default
$options Map $grid

make-column-base

Creates the base styles for a column but excludes setting the width. Also creates modifier classes for floating columns left or right giving you more flexibility with markup order. Default classes are col-left and col-right, respectively.

@include make-column-base( $options: () );
Parameter Type Default
$options Map $grid

make-column

Creates all the styles for a column and sets its width.

@include make-column( $index, $options: () );
Parameter Type Default Description
$index Integer None The number of column span you want returned.
$options Map $grid

add-prefix

Creates the base styles for a column and sets its width.

@include add-prefix( $index, $options: () );
Parameter Type Default Description
$index Integer None The number of column spacing you want returned.
$options Map $grid

add-suffix

Creates the base styles for a spacing suffix.

@include add-suffix( $index, $options: () );
Parameter Type Default Description
$index Integer None The number of column spacing you want returned.
$options Map $grid

build-grid-system

Outputs all the classes and styles for the class based grid system. You can either pass in a map that overrides the grid map defaults, or a single grid type parameter to trigger normal or mobile grid systems.

@include build-grid-system( $grid-type | $options: () );
Parameter Type Default Description
$grid-type | $options String or Map $grid Pass either a grid type string or a map with grid settings.

Example Usage

The most basic use of build-grid-system() is to output mobile styles and within a media query output our standard grid system. This is present in your custom/_custom.scss file by default.

// Output our mobile grid system classes.
@include build-grid-system('mobile');

// Media query for styles that target tablet sized devices and above.
@include media-min('medium') {
  // Output our standard grid system using all our default settings.
  @include build-grid-system();
}

Classes Output

These are all the default classes that become available when generating your grid. Keep in mind that class names can be changed using the class name variables in our $grid map.

<div class="container">
  <div class="row">
    <div class="col col-4">...</div>
    <div class="col col-8">...</div>
  </div>
  <div class="row">
    <div class="col col-4 suffix-2">...</div>
    <div class="col col-4 prefix-2">...</div>
  </div>
</div>

.col-4

.col-8

.col-4

.col-4

You can disabled the output of prefix and suffix classes by setting their class name variables to none in $grid map or passing it directly to the mixin manually.

© 2018 . All rights reserved.