Colors

These are the colors that compose the palette. Replace them directly on your CSS or as the variable value on the SASS files.

Typography

Evie should be easily customizable and really fast, so only one font (Lato) is imported and at a single weight (normal - 400).

To achieve some kind of vertical rhythm and more eye-pleasing results the typography loosely follows the Minor Third scale. Here are the examples:

This is a main heading

This is an h2 heading

This is a third heading

There is even a fourth heading

Finally, there is the plain paragraph you can use as always.

* You can use h6 like this for fine print.

Buttons

To cover the most common cases, there are some buttons but you can easily create custom ones by changing only the color/border-color both on normal and hover state. Here are the buttons:

<button>Plain</button><a href='#' class="button">Link</a><button class="button button__primary">Primary</button><button class="button button__primary" disabled="true">Disabled</button><button class="button button__accent">Accent</button><button class="button button__delete">Delete</button>

Forms

The form elements share the border radius and are designed to stand out in a white background. You can see those here:

<form>
  <label>Label</label>
  <input type='text' placeholder="Default, full-width field">
</form>

<form>
  <div class="double">
    <div class="half">
       <label for="first">First</label>
       <input type="text" id="first" placeholder="Type...">
    </div>
    <div class="half">
      <label for="second">Last</label>
      <input type="text" id="second" placeholder="Type...">
    </div>
  </div>
</form>

<label for='textarea'>Label</label>
<textarea placeholder="Plain text area" id='textarea'></textarea>

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<div class="double">
  <p class="half">
    <input name="radiovalue" type="radio" id="radio1" />
    <label for="radio1">Radio option 1</label>
  </p>
  <p class="half">
    <input name="radiovalue" type="radio" id="radio2" />
    <label for="radio2">Radio option 2</label>
  </p>
</div>

<p class="row">
  <input type="checkbox" id="check" />
  <label for="check">This is a standard checkbox</label>
</p>