Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.
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 foundin settings/base/_colors.scss ($bg--color array) |