CSS Classes Helpers

You are here:
Estimated reading time: 1 min

These CSS classes were meant to extend or decorate elements without the need of also adding an option into an element.

u-title-dashes

This is a decorative css class that is intended to be used on heading elements. It will add 2 lines before and after the title eg: https://d.pr/i/LZW4Ux and can be found used in London demo’s shop cover .


u-hover-img-animation

This is a decorative css class that is intended to be used on image elements, to animate themselves on user hover interaction eg: https://d.pr/v/nvvhPY and can be found used in Beijing demo Featured categories section.


u-transparent-gradient

This is also a decorative css class and also a problem fixer, that is intended to be used on header page covers, to provide a better contrast through a subtle gradient, from darker to transparent. Can be found used in Melbourne demo in the header and in Milano demo in the header as well.

The class is applied on the section that holds the header eg: https://d.pr/v/sXfvMd .

Note: a gradient background could’ve been applied on the section, however this css class applies this gradient on :before pseudo-selector, allowing the gradient to stretch vertically 1.5x than the section height.


At some point these css classes might be converted into element options at some point, but for the moment, this solution is clean too, even though not really intuitive.

Was this article helpful?
Dislike 0
Views: 26

Join the conversation