Sizing helpers

Here is the list of available sizing helpers:

  • .w0 = { width: 0; }
  • .w1 = { width: 1%; }
  • .w2 = { width: 2%; }
  • .w3 = { width: 3%; }
  • .w5 = { width: 5%; }
  • .w10 = { width: 10%; }
  • .w15 = { width: 15%; }
  • .w20 = { width: 20%; }
  • .w25 = { width: 25%; }
  • .w30 = { width: 30%; }
  • .w33 = { width: 33.333%; }
  • .w40 = { width: 40%; }
  • .w45 = { width: 45%; }
  • .w49 = { width: 49%; }
  • .w50 = { width: 50%; }
  • .w60 = { width: 60%; }
  • .w66 = { width: 66.666%; }
  • .w70 = { width: 70%; }
  • .w75 = { width: 75%; }
  • .w80 = { width: 80%; }
  • .w90 = { width: 90%; }
  • .w95 = { width: 95%; }
  • .w100 = { width: 100%; }
  • .mw50 = { max-width: 50%; }
  • .mw60 = { max-width: 60%; }
  • .mw80 = { max-width: 80%; }
  • .mw100 = { max-width: 100%; }
  • .h100 = { height: 100%; }
  • .h100v = { height: 100vh; }

Some other are available, please check in your Sass files the ones used, you can define Sass variables to generate the ones your need:

  • $list-width-px
  • $list-width-rem
  • $list-width-em
  • $list-max-widths
    (ex.: .mw100 = { max-width: 100%; })
  • $list-max-width-px
  • $list-max-width-em
    (ex.: .mw15e = { max-width: 15em; })
  • $list-min-width-em

Height helpers

<div class="h100">
Applies height: 100% to element.

h100v Applies height: 100vh to an element.

<div class="hauto">
  
Applies height: auto to element. Make sure this is really needed.