Forms

Abby's forms are kept as simple and usable as can be while still looking good. Abby's grid system can be used in conjuction with the forms to create different layouts.

Example Markup:

<form>
  <fieldset>
    <div class="grid">
      <div class="grid__col">
    	  <label for="">Name</label>
    	  <input type="text" placeholder="Name">
      </div>
      <div class="grid__col">
        <label for="">Email</label>
        <input type="email" placeholder="Email">
      </div>
    </div>
    <label for="">Country</label>
    <select name="" id="">
      <option value="">Canada</option>
      <option value="">France</option>
      <option value="">USA</option>
      <option value="">UK</option>
    </select>
  </fieldset>

  <fieldset>
    <label for="checkbox">
      <input type="checkbox" id="checkbox"> Signup for Newsletter
    </label>
    <label for="radio">
      <input type="radio" id="radio"> Signup for Newsletter
    </label>
  </fieldset>
  <fieldset>
    <label for="message">Message:</label>
    <textarea id="message" placeholder="What's on your mind?" cols="30" rows="3"></textarea>
  </fieldset>

  <button type="submit">Submit</button>
</form>

Buttons

Example Markup:

<button type="button">Button Element</button>
<a href="" class="button">Anchor Button</a>
<input type="button" value="Button Input">
<input type="submit" value="Submit Input">

Lists

• List item 1
• List item 2
• Sublist item 1
• Sublist item 2
• Sublist item 3
• List item 3
• List item 4

1. List item 1
2. List item 2
1. Sublist item 1
2. Sublist item 2
3. Sublist item 3
3. List item 3
4. List item 4

Example Markup:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <ul>
    <li>Sublist item 1</li>
    <li>Sublist item 2</li>
    <li>Sublist item 3</li>
  </ul>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

Tables

Example Markup:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dave Gamache</td>
      <td>26</td>
      <td>Male</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Dwayne Johnson</td>
      <td>42</td>
      <td>Male</td>
      <td>Hayward</td>
    </tr>
    <tr>
      <td>Mary Jane</td>
      <td>23</td>
      <td>Female</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>

Code

.class {
  color: red;
  font-size: 12px;
  vertical-align: middle;
}

This is some inline code within a paragraph.

Example Markup:

<pre><code>.class {
  color: red;
  font-size: 12px;
  vertical-align: middle;
}</code></pre>

<p><code>This is some inline code</code> within a paragraph.</p>