Helpers
Helpers are a collection of useful classes.
preview helpers.scss on github
# Available classes
| Hiding | |
|---|---|
.hidden |
|
.hidden--mobile |
|
.hidden--phone |
|
.hidden--tablet |
|
.hidden--desktop |
|
| Visibility | |
.visible--mobile |
|
.visible--phone |
|
.visible--tablet |
|
.visible--desktop |
|
| Media | |
.img--rwd |
|
.img-circle |
|
.video--rwd |
|
| Positioning | |
.inline-left |
|
.inline-left--phone |
|
.inline-right |
|
.inline-right--phone |
|
.inline-center |
|
.inline-center--phone |
|
.inline-justify |
|
.inline-justify--phone |
|
.block-center |
|
.vertical-top |
|
.vertical-middle |
|
.vertical-bottom |
|
.float-right |
|
.float-left |
|
.box--flex |
|
.box--flex--wrap |
|
.full-width |
full Width Containers in Limited Width Parents (reference) |
.object-fit--cover |
object-fit references ( CSS tricks, object-fit and Flexbox on CodePen) |
.object-fit--fit |
|
.object-fit--contain |
|
| Others | |
.no-margin |
|
.radius-none |
|
.link-neutral |
href color as default color of text |
.truncate |
truncating text using text-overflow: ellipsis |
.mate-blink |
useful for focusing user eyes on changed element |