Skip to Main Content

Properties & Style

Using Properties to Style Elements

Unlike other front-end frameworks, Clone employs the use of HTML5 data attributes to style elements instead of classes. What this means is that values can be written right into your markup to determine the direct style output. Because data attributes use a key-value pair, we can leverage the value to allow for modifers, such as media queries or placement on an element.

For example, here's how you can modify an element to centre-align text on tablets that have a landscape orientation:

<p data-c-align="base(left) tl(center)">lorem ipsum</p>

You can use the following attributes to style elements: