Helper classes

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

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

.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

.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)