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:
This is a sample sentence in a Clone example.
Let's break this apart into 3 different types of Clone utility attribute:
<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.
<div data-c-colour="white">type of variable attribute.
<div data-c-colour="">takes an argument from a defined list of colour variables, one of which is
<div data-c-padding="bottom(normal)">type of function attribute.
<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.