Grid

Documentation of media queries, grids, wrappers and layout utility classes.

Files

app/styles/utils/_media.scss
app/styles/layout/_grid.scss
app/styles/tools/_utilities.scss

Media queries

There are three main media queries for screen layouts: S, M, L; and two supplementary media queries XS and XL. Breakpoints for these layouts are described bellow.

Breakpoints

XL: width > 1440px
L: width < 1439px
M: width < 959px
S: width < 639px
XS: width < 479px

Mixins

Code:

@include media-w-xl {
  ... styles XL ...
}
@include media-w-l {
  ... styles L ...
}
@include media-w-m {
  ... styles M ...
}
@include media-w-s {
  ... styles S ...
}
@include media-w-xs {
  ... styles XS ...
}

Wrappers

By default there is one main wrapper class .wrapper-main.

wrapper-main: width: 960px

Code:

<div class='wrapper-main'>
  ...
</div>

Grid 12

Grid 12 consists of 12 columns and 5 different media layouts XL / L / M / S / XS.

Note

Start by creating horizontal container with a class of .row. Now you can add elements with a class of .col and specify width of each with .col-[layout]-[width], where layout is one of xl/l/m/s/xs and width is number 1-12.

Warning

Media queries for layouts are set by max width, so for example stuff for layout M inherit also in S and XS.

Basic

Example:

XL4L3M5S12

XL4L6M7S12

XL4L3M12S12

XL4L3M5S12

XL4L6M7S12

XL4L6S6XS12

Code:

<div class="row">
  <div class="col col-l-3 col-xl-4 col-m-5 col-s-12"> ... </div>
  <div class="col col-l-6 col-xl-4 col-m-7 col-s-12"> ... </div>
  <div class="col col-l-3 col-xl-4 col-m-12 col-s-12"> ... </div>
</div>

<div class="row">
  <div class="col col-l-4 col-xl-4 col-m-5 col-s-12"> ... </div>
  <div class="col col-l-8 col-xl-8 col-m-7 col-s-12"> ... </div>
</div>

<div class="row">
  <div class="col col-l-6 col-xl-7 col-xs-12"> ... </div>
  <div class="col col-l-6 col-xl-5 col-xs-12"> ... </div>
</div>

Nesting

Rows and columns can be also nested.

Example:

L3M12

Nested L6Nested XS12

Code:

<div class="row">
  <div class="col col-l-3 col-m-12"> ... </div>
  <div class="col col-l-9 col-m-12">
    <div class="row">
      <div class="col col-l-6 col-xs-12"> ... </div>
      <div class="col col-l-6 col-xs-12"> ... </div>
    </div>
  </div>
</div>

Offsets

Colums can be moved to the right by using classes like .ofst-[layout]-[width]. You can also center column with class .ofst-[layout]-center.

Example:

L3M4S5, ofst S1XS6, ofst XS0

L8, ofst L1L8, ofst M0S10, ofst S1XS12, ofst XS0

L8, center LM10, center LXS 12, center L

Code:

<div class="row">
  <div class="col col-l-3 col-m-4 col-s-5 ofst-s-1 col-xs-6 ofst-xs-0">
    ...
  </div>
  <div class="col col-l-8 ofst-l-1 ofst-m-0 col-s-10 ofst-s-1 col-xs-12 ofst-xs-0">
    ...
  </div>
</div>
<div class="row">
  <div class="col col-l-8 ofst-l-center col-m-10 col-xs-12">
    ...
  </div>
</div>

Vertical space

Vertical space between rows can be created by using class .row-space and vertical space between columns can be created by using class .col-[layout]-space.

Example:

L12

L6M12, col space

Code:

<div class="row row-l-space row-m-nospace">
  <div class="col col-l-12">
    ...
  </div>
</div>
<div class="row row-l-space row-m-nospace">
  <div class="col col-l-6 col-m-12 col-m-space">
    ...
  </div>
  <div class="col col-l-6 col-m-12 col-m-space">
    ...
  </div>
</div>

Utilities

Grid utilities contains basic classes for utility like pull right/left, clearfix, margin/padding resets, hide classes etc.

Some utilities can be set for specific layout by adding postfix representing layout. These postfixes are not needed in case you don't want target specific layout.

Warning

Layout L (Large), don't need postix.
Use these classes wise and only if needed since they use !important directive !

Example:

L: Pull leftM: Pull rightS: Inline blockXS: Pull center

Code:

<div class="clearfix">
  <div class="pull-left pull-right-m inline-block-s pull-center-xs">
    ...
  </div>
</div>

Layout hacks

These utilities provides hacks as clearfix or center-unknown.

Code:

<div class="clearfix">
  ... floating elements ...
</div>

<div class="center-unknown">
  ... unknown element to be centered ...
</div>

<div class="clear"> ... </div>

Flex justify

These utilities provides justify align by using flex box. Wrap elements in .flex-justify-space-between, .flex-justify-space-around, .flex-justify-center or .flex-justify-end.

Example:

Space between

Space around

Center

End

Code:

<h4>Space between</h4>
<div class="flex-justify-space-between mrg-20-bottom">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Right</button>
</div>
<hr>
<h4>Space around</h4>
<div class="flex-justify-space-around mrg-20-bottom">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Right</button>
</div>
<hr>
<h4>Center</h4>
<div class="flex-justify-center mrg-20-bottom">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Right</button>
</div>
<hr>
<h4>End</h4>
<div class="flex-justify-end mrg-20-bottom">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Right</button>
</div>

Absolute positioning

You can position element absolute to relative container. You could add .relative class to ancestor, .absolute class to offspring and then align by .absolute-[vertical]-[horizontal]. E.g.: .absolute-top-right.

Example:

Absolute positioning

Top right

Top left

Bottom left

Bottom right

Code:

<h4>Space between</h4>
<div class="flex-justify-space-between mrg-20-bottom">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Right</button>
</div>
<hr>
<h4>Space around</h4>
<div class="flex-justify-space-around mrg-20-bottom">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Right</button>
</div>
<hr>
<h4>Center</h4>
<div class="flex-justify-center mrg-20-bottom">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Right</button>
</div>
<hr>
<h4>End</h4>
<div class="flex-justify-end mrg-20-bottom">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Right</button>
</div>

Space resets

Use classes like .no-pad or .no-mrg to reset margins or paddings. Target specific layout with .no-mrg-[xs/s/m/xl] and .no-pad-[xs/s/m/xl].

Code:

<div class="no-mrg"> reset margins </div>
<div class="no-mrg-top"> reset top margin </div>
<div class="no-mrg-bottom"> reset bottom margin </div>
<div class="no-mrg-left"> reset left margin </div>
<div class="no-mrg-right"> reset right margin </div>
<div class="no-mrg-vertical"> reset top and bottom margin </div>
<div class="no-mrg-horizontal"> reset left and right margin </div>

<div class="no-pad"> reset padding </div>
<div class="no-pad-top"> reset padding-top </div>
<div class="no-pad-bottom"> reset padding-bottom </div>
<div class="no-pad-left"> reset left padding </div>
<div class="no-pad-right"> reset right padding </div>
<div class="no-pad-vertical"> reset top and bottom padding </div>
<div class="no-pad-horizontal"> reset left and right padding </div>

Spaces

Use classes like .mrg-10-horizontal or .pad-10-vertical to add margins or paddings.

Code:

<div class="mrg-10-top"> ... </div>
<div class="mrg-10-right"> ... </div>
<div class="pad-20-horizontal"> ... </div>
<div class="pad-20-vertical"> ... </div>

Hide

You can hide elements for specific layout by using classes like .hide-[layout]-only. For all layouts lower including specified by classes like .hide or .hide-[layout].

Note

Hide for 'XL and lower' and 'XS and lower' are worthless. In first case you hide for all layouts and in second case there is no lower than XS.

Example:

Active layout:XLLMSXS

Hide for XL only

Hide for L and lower

Hide for L only

Hide for M and lower

Hide for M only

Hide for S and lower

Hide for S only

Hide for XS only