Documentation
This system works most efficiently when a designer and developer collaborate side-by-side to create web pages in-browser.
Get started
Download the Source Code and start prototyping in minutes.
Usage
The simplest way to start with Evolution is by including two compiled and minified CSS or just compiled CSS.
Evolution also use Bootstrap grids for responsive design.
To include bootstrap in your project you would copy and paste following code.
Bootstrap
You can also include our normalize file, which makes browsers render all elements more consistently and in line with modern standards.
To do that, copy and paste three of the following code snippets into your project right before the closing </head> tag.
Normalize
Basic template
Start with this basic HTML template to get started.
Grid
We use a responsive grid based on Bootstrap.
Though not required, this system was optimized for a Bootstrap grid of 2 columns, 3 columns, 4 columns, 6 columns, or 12 columns
Padding and margins are done programmatically in a stylesheet.
Bootstrap grid - static
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
2 col
2 col
2 col
2 col
2 col
2 col
3 col
3 col
3 col
3 col
4 col
4 col
4 col
6 col
6 col
12 col
Bootstrap grid - responsive
Colors
CMY Colors
A palette of CMY colors for use in any design.
On the left side is code snippet and on the right is displayed image of that code snippet.
evo-cmy-red-bg
evo-cmy-green-bg
evo-cmy-blue-bg
evo-cmy-cyan-bg
evo-cmy-magenta-bg
evo-cmy-yellow-bg
Neutral Colors
A palette of gray colors for use in any design.
On the left side is code snippet and on the right is displayed image of that code snippet.
Gray Solid
Gray Dark Translucent
Gray Light Translucent
Fonts
Elements uses default font size of 87.5% which equals to 14px as Bootstrap's default size.
Font-family and font color are not defined by default. This means the browser will establish it's default value for presentation.
Elements currently provides you with four different font-families which are:
Arial, Georgia, Times New Roman, Courier New.
On the left side is code snippet and on the right is displayed font-family of that code snippet.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( ) </p>
Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( ) </p>
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( ) </p>
Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( ) </p>
Courier New
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*( )
Headers
Numerous sizes and styles suitable for any layout.
Headers are set using rems
Headers come with line rules displayed above. These lines can be turned on and off as needed.
To turn lines off, in your styleguide you would declare the .evo-no-line class alongside the header class.
Example shown below.
experience design made simple
experience design made simple
experience design made simple
experience design made simple
Text
Typeset by professional designers and ready to go.
Bullets are displayed using SVG icons, for better control over spacing and styling.
On the left side is code snippet and on the right is displayed text of that code snippet.
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.
Develop a step-by-step plan that maps budget, timeline, and objectives to possible solutions. Now that we've all thought of great ideas, let's step back, clear our minds, and aim even higher. See the work come to life as a design is translated into a real experience we test, refine, and optimize.
Lists
There's four types of list that you can use.
Text List as default, Bullets List, Numbers List and Lines List.
All of them are part of Text library which makes it easy to use.
Bullets list uses SVG icons instead of browser's default dots.
Text
<li><span>gather inspiration</span></li>
<li><span>brainstorm ideas</span></li>
<li><span>sketch designs</span></li>
<li><span>set timeline roadmap</span></li>
</ul>
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
Bullets
<li><span>gather inspiration</span></li>
<li><span>brainstorm ideas</span></li>
<li><span>sketch designs</span></li>
<li><span>set timeline roadmap</span></li>
</ul>
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
Numbers
Note: Automatically applied to ordered lists.
<li><span>gather inspiration</span></li>
<li><span>brainstorm ideas</span></li>
<li><span>sketch designs</span></li>
<li><span>set timeline roadmap</span></li>
</ol>
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
Lines
<li><span>gather inspiration</span></li>
<li><span>brainstorm ideas</span></li>
<li><span>sketch designs</span></li>
<li><span>set timeline roadmap</span></li>
</ul>
- gather inspiration
- brainstorm ideas
- sketch designs
- set timeline roadmap
Buttons
Way more options than the usual small, medium, large.
Buttons come in four basic flavors in Evolution: regular, bold, CAPS, bold + CAPS = CAPS
On the left side is code snippet and on the right is displayed button output of that code snippet
Forms
Styling for form fields.
On the left side is code snippet and on the right is displayed form fields of that code snippet.
Each class name for this form starts with "evo-form" followed by size of the form field and followed by input type.
If you are using these form fields to send or store data, then you would surround them with <form></form> tag and use GET or POST action.
Background color for forms is not set. To set default color for forms you would add color value in _variables.scss under $form_background_color.
<input type="text" placeholder="Text">
<div>
<select>
<option>
Option 01
</option>
<option>
Option 02
</option>
</select>
<div>
<input type="date" placeholder="Date">
<div>
<input type="file">
<div>
<input type="number" placeholder="Number">
<div>
<input type="time" placeholder="Time">
<div>
<input type="radio" id="radio10"><label for="radio10">Option</label>
<div>
<input type="checkbox" id="checkbox10"><label for="checkbox10">Option</label>
<div>
Lines
A family of line weights to help organize your layout.
On the left side is code snippet and on the right is displayed form fields of that code snippet.
Lines
Top Borders
Bottom Borders
Boxes
Images
A standardized system that's easy to plug into any layout.
To add your own image you would create new class, for example "monolake-img" as shown below and that class would look like this:
background-image: url("../img/monolake.jpg");
}
To use "monolake-img" class you would inject it inside of img class as shown below.
On the left side is code snippet and on the right is displayed image of that code snippet.
Spacers
Special spacers to add negative space.
On the left side is code snippet and on the right is displayed image of that code snippet.
Spacers are invisible blocks. Dashed borders below are just for presentation.