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 |