Width & height setters

These setter classes help you set width and height for elements, they are defined in _config.scss file, so you can add more setter classes with custom values.

Width

index.html

<div class="my-box style-blue width-100p">100%</div>
<div class="my-box style-green width-75p">75%</div>
<div class="my-box style-purple width-50p">50%</div>
<div class="my-box style-orange width-25p">25%</div>
<div class="my-box style-red width-10p">10%</div>

style.css

.my-box {
  height: 30px;
  padding: 5px 10px;
  margin: 20px 0;
  border-radius: 12px;
}

index.html

<div class="my-box style-blue width-100p">100%</div>
<div class="my-box style-green width-75p">75%</div>
<div class="my-box style-purple width-50p">50%</div>
<div class="my-box style-orange width-25p">25%</div>
<div class="my-box style-red width-10p">10%</div>

style.css

.my-box {
  width: 30px;
  padding: 5px 10px;
  margin: 0 10px;
  border-radius: 12px;
  writing-mode: sideways-rl;
}

Width predefined classes:
width-0p
width-10p
width-15p
width-25p
width-30p
width-50p
width-60p
width-75p
width-90p
width-95p
width-100p

Height predefined classes:
height-0p
height-10p
height-15p
height-25p
height-30p
height-50p
height-60p
height-75p
height-90p
height-95p
height-100p

Custom helper classes

Note that these classes can be customized in _config.scss file, there are two variable called $WIDTH_LIST and $HEIGHT_LIST, all classes are generated from this list. So it is possible to create customized helper classes for width and height simply!

_config.scss

// This list will be converted to helper classes.
// .width-[]
$WIDTH_LIST: (
  0p: 0,
  10p: 10%,
  15p: 15%,
  25p: 25%,
  30p: 30%,
  50p: 50%,
  60p: 60%,
  75p: 75%,
  90p: 90%,
  95p: 95%,
  100p: 100%,
  50-pixels: 50px,
  5-em: 5em,
);

// This list will be converted to helper classes.
// .height-[]
$HEIGHT_LIST: (
  0p: 0,
  10p: 10%,
  15p: 15%,
  25p: 25%,
  30p: 30%,
  50p: 50%,
  60p: 60%,
  75p: 75%,
  90p: 90%,
  95p: 95%,
  100p: 100%,
  50-pixels: 50px,
  5-em: 5em,
);