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 👇
Class | Description |
| Large container (1080px wide) |
| Small container (896px) |
| Smaller container (620px) |
Class | Description |
| To make the text look like headings |
| To make the text look like headings on smaller screens only |
| To make the text look smaller |
| Adds a |
| Same as above, but for smaller screens only |
| To change the |
| To change the text contrast |
| To change the default text color |
| Transforms text to uppercase |
Class | Description |
| Sets the |
| Sets the |
| Sets the |
| Sets the |
| Sets the |
| Sets the |
| Sets the |
| Sets the |
| Very helpful when used on an empty div as vertical spacer. Sets a |
| Same as above, but for smaller screens only |
Class | Description |
| Makes content invisible but accessible to screen reader users |
| Resets the default style of unordered ( |
| Inverts the Useful if you want to turn the light |
| Inverts the This class is often used in combination with |
| Center aligns the element and its descendants |
| Same as above, but for smaller screens only |
| Same as above, but for larger screens only |
| Adds a Often used for |
| Ensure that an image |
| Makes an image overflow its parent container of a certain number of pixels. Variable for exceeding pixels is and can be found in |
| Adds some in |