CSS Helper Classes

Estimated reading: 2 minutes 78 views Contributors

Utilizing the preset classes in the Docy theme allows you to quickly and efficiently create your website’s design. Additionally, using pre-defined CSS classes ensures that your website is user-friendly in dark mode. Learn how to optimize your website’s appearance today.

Shadow Classes

Check out these examples of shadows with corresponding class names. Note that the class names are highlighted in red. Explore how to apply these classes and enhance your website’s design today.

shadow-none No shadow

shadow-sm Small shadow

shadow Regular shadow

shadow-lg Larger shadow

Color Classes

bg-white: Use this class to set a white background color, which will be applied automatically.

For black background colors, use the following classes with varying levels of darkness indicated by the suffix after the class name. A smaller number indicates less darkness, while a larger number indicates greater darkness.

A total of 13 classes are available in the theme for different shades of dark colors. Learn how to apply these classes to achieve your desired design today.


black-25, black-50, black-100, black-200, black-300, black-350, black-400, black-500, black-600, black-700, black-800, black-900

Inline Style Classes

Badge

<span class="badge"> badge </span>

Bootstrap Classes

In this case, the content value represents the Elegant Icon code. Please note that you will not find the icon code directly on the Elegant Icon website.

To obtain the code, inspect the icon by right-clicking on it from their website and navigating to the CSS ::before CSS Pseudo-elements to locate the icon code. Check out the GIF below to see the process of inspection and obtaining the icon code.