Style guide
categories
documentation
pages
SCSS theme
settings
functional
CSS classes
Usage
Grab this Evo CSS code and add it to your project.
For even more control, download the Evo source-code from the Github repository and play with theme variables. Use this page as a general style guide.
Dive in! Here's how to style some buttons.
1. Create a <button>.
Easy right? Now style some text.
1. Create an <h1> tag.
Text
Element
Evo controls the style and structure of HTML element tags.
HTML tags and 'evo' classes are controlled from a central theme. Evo relies on usage of 'evo' classes for completion of basic theme styling.
Elements combine to form a montage of the theme.
The design evolution has begun.
Experience design made simple.
Just add the brand logo, colors, and fonts and you're off to a solid start. From there we will evolve the look and feel.
Our Work →A montage of matching inverse styles.
The design evolution has begun.
Experience design made simple.
Just add the brand logo, colors, and fonts and you're off to a solid start. From there we will evolve the look and feel.
Our Work →Layout
A responsive 12 column grid is recommended.
Space
Space blocks are a novel approach to managing negative space in a layout.
Use different space sizes to control vertical spacing.
Color
Info status color.
Aa
Success status color.
Aa
Warning status color.
Aa
Danger status color.
Aa
Gray
Black
Aa
Dark gray
Aa
Gray
Aa
Light Gray
Aa
White
Aa
Selection
Background color accents for selected text, defined in Evo theme variables.
<span class="evo-selection-demo"> Demo showing select state</span>Demo showing select state
Highlight
Background color accent to call-out important text, text on an image, or a quote.
<span class="evo-highlight highlight-color"> Sample output from HTML</span>Sample output from HTML
Use an inverse highlight on a dark background.
<span class="evo-highlight inverse-highlight-color"> Sample output from HTML</span>Sample output from HTML
Line
Colored line.
Thin dashed line.
Box
Border box lines.
Rounded border box.
Icon
Evo icons are available in multiple weights.
Unordered list with custom icons.
Unordered list with inverse custom icons.
Button with icon.
Inverse button with icon.
Glyph
A small set of unicode glyph characters are available for lists, links, and button.
Font
Central control of font family.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
Text
Powerful typographic controls.
This is paragraph text lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Centrally controlled inverse classes.
This is paragraph text lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Central control of headers.
This header text can be styled with functional CSS classes.
This header text can be styled with functional CSS classes.
This header text can be styled with functional CSS classes.
List
Unordered list without bullets.
- List item 1
- List item 2
- List item 3
Inverse unordered list without bullets.
- List item 1
- List item 2
- List item 3
Unordered list with custom bullets.
- List item 1
- List item 2
- List item 3
Inverse unordered list with custom bullets.
- List item 1
- List item 2
- List item 3
Ordered list with custom number styling.
- List item 1
- List item 2
- List item 3
Inverse ordered list with custom number styling.
- List item 1
- List item 2
- List item 3
List with lines.
- List item 1
- List item 2
- List item 3
Inverse list with lines.
- List item 1
- List item 2
- List item 3
Table
Adaptive table with mouseover rows.
| Resource | Description |
|---|---|
| Massive Guide | 1000 links to design and development resources |
| Evolution Icons | Multi-weight SVG icon library |
| Third item header here | Third item description here |
Inverse table style.
| Resource | Description |
|---|---|
| Massive Guide | 1000 links to design and development resources |
| Evolution Icons | Multi-weight SVG icon library |
| Third item header here | Third item description here |
Link
Button
A simple button style.
Use the inverse style on a dark background.
Large and small sizes are available.
Form
Inverse Form Element
Disabled Form Element
Image
Basic image with placeholder background.