Usage Nomenclature
Evolution CSS classes are semantic and transparent in meaning. Numerical scales help make it easy to experiment with different sizes, colors, or other values, simply by guessing.
Nomenclature
There are two types of class names. The first type are those that begin with the prefix evo-, such as these color classes which can be applied to text.
evo-color vs. color-15
Suffixes such as -bg help create special powers. By adding -bg to our color classes, we target the background-color instead.
evo-color-bg vs. color-15-bg
The evo- prefix generally indicates that a class is controlled from the Evo theme, which is defined in a variables file. Changing these variables will alter the overall Evo framework on a global level.
evo-color evo-font evo-box evo-line etc.
The second type of classes are descriptive and utilitarian. These classes may also be controlled by variables, but most are hard-coded.
text-size-8 gray-15 text-tracking-4 image-size-25 etc.
The utility numbers are usually set on a modular scale, from 0 to 15, or 0 to 25, or higher, depending on the element.
- 15
- 14
- 13
- 12
- 11
- 10
- 9
- 8
- 7
- 6
- 5
- 4
- 3
- 2
- 1
- 0