Heads Up! Components & docs are subject to change until official v1.0 release.
×
Introduction:
Components:
Resources:
Forms
When working with forms make sure to always wrap your input fields inside a parent <form>
element. You can also use .form__group
to space out your input fields vertically.
<form>
<!-- Add Form Inputs Here -->
<div class="form__group">
<label for="ex1">Text</label>
<input type="text" id="ex1" name="ex1" placeholder="Text...">
</div>
</form>
Input Fields & Textareas
<label for="ex1">Text</label>
<input type="text" id="ex1" name="ex1" placeholder="Text...">
<label for="ex2">Password</label>
<input type="password" id="ex2" name="ex2" placeholder="Password...">
<label for="ex3">Email</label>
<input type="email" id="ex3" name="ex3" placeholder="Email...">
<label for="ex0">Comment</label>
<textarea id="ex0" name="ex0" placeholder="Comment..."></textarea>
Labels w/ Required Fields
<label class="label--required" for="ex1">Text</label>
<input type="text" id="ex1" name="ex1" placeholder="Text...">
Datepicker
<label for="ex3">Email</label>
<input type="text" id="ex3" name="ex3" class="datepicker" placeholder="01/01/16...">
Select Fields
<label for="example1">Select Type</label>
<select name="example1" id="example1">
<option value="">-- Select Type --</option>
<option value="1">Jedi</option>
<option value="2">Wookie</option>
<option value="3">Sith</option>
</select>