✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Helper classes

Cruip CSS

We use a semantic approach for the templates, which means we tend to name classes with human-readable and meaningful terms (e.g. .button, .header-nav, .section, etc). That’s crucial for different reasons.

We don’t disregard the advantages of functional CSS, and for this reason we have included a set of utility classes that can be used to change an element style. Here is the full list 👇


Containers

Class Description
.container Large container (1080px wide)
.container-sm Small container (896px)
.container-xs Smaller container (620px)

Typography

Class Description
.h1, .h2, .h3, .h4, .h5, .h6 To make the text look like headings
.h1-mobile, .h2-mobile, .h3-mobile, .h4-mobile, .h5-mobile, .h6-mobile To make the text look like headings on smaller screens only
.text-sm, .text-xs, .text-xxs To make the text look smaller
.ta-l, .ta-c, .ta-r Adds a text-align property (left, center, right)
.ta-l-mobile, .ta-c-mobile, .ta-r-mobile Same as above, but for smaller screens only
.fw-400, .fw-500, .fw-600, .fw-700 To change the font-weight property with the corresponding value
.text-color-high, .text-color-mid, .text-color-low To change the text contrast
.text-color-primary, .text-color-secondary, .text-color-error, .text-color-warning, .text-color-success To change the default text color
.tt-u Transforms text to uppercase

Spacing

Class Description
.m-0, .m-4, .m-8, .m-12, .m-16, .m-24, .m-32 Sets the margin property to the corresponding value
.mt-0, .mt-4, .mt-8, .mt-12, .mt-16, .mt-24, .mt-32 Sets the margin-top property to the corresponding value
.mr-0, .mr-4, .mr-8, .mr-12, .mr-16, .mr-24, .mr-32 Sets the margin-right property to the corresponding value
.ml-0, .ml-4, .ml-8, .ml-12, .ml-16, .ml-24, .ml-32 Sets the margin-left property to the corresponding value
.mb-0, .mb-4, .mb-8, .mb-12, .mb-16, .mb-24, .mb-32 Sets the margin-bottom property to the corresponding value
.p-0, .p-4, .p-8, .p-12, .p-16, .p-24, .p-32 Sets the padding property to the corresponding value
.pt-0, .pt-4, .pt-8, .pt-12, .pt-16, .pt-24, .pt-32 Sets the padding-top property to the corresponding value
.pr-0, .pr-4, .pr-8, .pr-12, .pr-16, .pr-24, .pr-32 Sets the padding-right property to the corresponding value
.pl-0, .pl-4, .pl-8, .pl-12, .pl-16, .pl-24, .pl-32 Sets the padding-left property to the corresponding value
.pb-0, .pb-4, .pb-8, .pb-12, .pb-16, .pb-24, .pb-32 Sets the padding-bottom property to the corresponding value
.spacer-4, .spacer-8, .spacer-12, .spacer-16, .spacer-24, .spacer-32, .spacer-48, .spacer-64 Very helpful when used on an empty div as vertical spacer.
Sets a padding-top property with the corresponding value
.spacer-4-mobile, .spacer-8-mobile, .spacer-12-mobile, .spacer-16-mobile, .spacer-24-mobile, .spacer-32-mobile, .spacer-48-mobile, .spacer-64-mobile Same as above, but for smaller screens only

Other utility classes

Class Description
.screen-reader Makes content invisible but accessible to screen reader users
.list-reset Resets the default style of unordered (<ul>) and ordered lists (<ol>)
.has-bg-color Inverts the background-color of an element.
Useful if you want to turn the light background-color of a section to dark, and vice-versa
.invert-color Inverts the color of an element and its descendants (i.e. the color of text).
This class is often used in combination with .has-bg-color
.center-content Center aligns the element and its descendants
.center-content-mobile Same as above, but for smaller screens only
.center-content-desktop Same as above, but for larger screens only
.has-top-divider, .has-bottom-divider Adds a top and/or a bottom line divider to an element.
Often used for sections
.image-full Ensure that an image width is 100%
.image-larger Makes an image overflow its parent container of a certain number of pixels.
Variable for exceeding pixels is $image-larger--extra-width
and can be found in settings/base/_misc.scss
.has-shadow Adds some box-shadow to an element, and the value can be found
in settings/base/_colors.scss ($bg--color array)
Last updated on August 17, 2021