Helper Classes

Helper classes are a core component of Stylyn and what provides the library with the majority of its utility.

Margin

Set the margin m-, margin-left ml-, margin-right mr-, margin-top mt- and margin-bottom mb- in increments of 0.25rem from 0.25 to 9.

i.e. mr-2.25 will set the margin-right to 2.25rem.

Padding

Set the padding p-, padding-left pl-, padding-right pr-, padding-top pt- and padding-bottom pb- in increments of 0.25rem from 0.25 to 9.

i.e. pt-1.5 will set the padding-top to 1.5rem.

Position

Set the position using the absolute, fixed, relative and unset classes.

Border

Set the border in any available text color using the border- followed by the color name class. i.e. to set a pink border, use the border-pink class. If you would like to set only one side of the border, use the border-left|right|top|bottom classes.

border-black border-blue border-green border-left-green border-grey border-light-grey border-orange border-pink border-purple border-red border-violet border-white border-yellow

Dashed border style: dashed.

Set the border width from 1 to 9px using the border-<num>px class. i.e. border-3px.

Icons

icon burger

icon tick

icon cross

Shadows

shadow

rainbow

Heavy shadow

text-shadow

Lighter shadow

text-shadow-grey