Skip to content

Latest commit

 

History

History
executable file
·
38 lines (28 loc) · 911 Bytes

anatomy.md

File metadata and controls

executable file
·
38 lines (28 loc) · 911 Bytes

Anatomy of Polyclass

A breakdown of certain elements within the Polyclass library. Firstly the terminology of a CSS declaration:

selector {  /* declaration block */
   property-key: value;
}

Polyclass generates class styles selectors .selector given the params within the class name.

<div class="class-name-and-params"></div>

The properties and values populate after a known CSS property:

<div class="background-color-red color-white">
    red background, white text.
</div>

Polyclass understand all valid properties, and parses parameters as values. Some minor pre-processing is applied to the property and value, allowing dynamic edits:

:root {
   --primary-bg: #333;
}
<div class="background-color-var-primary-bg">
    Background color is the <code>primary-bg</code> CSS variable value.
</div>