Usage Styling

An introduction to using Evo's functional CSS to style your website's HTML.

Styling

Evo is a design system of semantic CSS class names. To create an Evo element, simply make an HTML tag, and mix in Evo's functional CSS classes to style it.

This text is large and gray.

By changing the class names or numbers, we make Evo elements larger or smaller, darker or lighter, thick or thin. The combinations are endless.

This text is larger and in color.

Button Examples

1. Create a basic HTML element such as a <button>.

2. Change the button-size by simply adding text-size class such as text-size-6.

3. Change color by adding a color class such as color-10.

Code Demo

Follow the simple instructions in this code demo lesson practice styling HTML elements with Evo classes, and how powerful functional CSS classes are.