Skip to Main Content

Basic Usage Of Clone

How To Use Clone

Clone is built a little differently than a standard front-end framework. Instead of classes, Clone uses data-attributes to leverage a level of extra functionality right in your markup. This means that Clone is namespaced away from your custom code and won't conflict with any of your existing work.

Here's an example of how Clone works:

<div data-clone>
    <div
        data-c-backround="c2(90)"
        data-c-padding="all(normal)"
        data-c-colour="white">
        <h5
            data-c-font-size="h5"
            data-c-margin="bottom(half)"
            data-c-font-weight="700">Sample Title</h5>
        <p>This is a sample sentence in a Clone example.</p>
    </div>
</div>

Which will appear on your site as:

Sample Title

This is a sample sentence in a Clone example.

Let's break this apart into 3 different types of Clone utility attribute:

  1. The <div data-clone> attribute.
    This attribute tells Clone that styles should be applied to any child element nested inside. If you're building from scratch, you can include this data-attribute on the <body> element to give Clone access to your entire project. If you just need Clone here and there on an existing project, you can include this attribute as-needed on any element you'd like.
  2. The <div data-c-colour="white"> type of variable attribute.
    This type of attribute functions as a declaration for a certain CSS value. These types of attributes only take one argument in the quotation marks and follow a set of rules that can be found in the utility section below. In this example, the attribute <div data-c-colour=""> takes an argument from a defined list of colour variables, one of which is white.
  3. The <div data-c-padding="bottom(normal)"> type of function attribute.
    These attributes are unique in that they take multiple arguments in the quotation marks and can even modify each argument using keywords within the parantheses. Each attribute has a unique set, but they all follow standard rules to help you learn them quickly. In this example, <div data-c-padding=""> can take multiple arguments for the orientation you're trying to target (i.e. top, right, bottom, left). Each of these can subsequently be modified using parentheses to increase or decrease the amount of padding you want (i.e. quarter, half, normal, double, triple). A more complex version of this attribute might look like: <div data-c-padding="top(half) right(double) bottom(normal) left(double)">.

A finite list of Utility attributes and how they're used can be found here: Utility Attributes in Clone.

Above and beyond utility attributes are component attributes, which allow you to build unique and accessible elements. Each individual component is outlined in the sidebar of the site. These component attributes can be combined with utility attributes to design and style each component to exactly what you need.