<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="CJ Patoilo" />
    <meta
      name="description"
      content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code."
    />
    <title>Milligram | A minimalist CSS framework.</title>
    <link rel="icon" href="https://milligram.io/images/icon.png" />
    <link rel="stylesheet" href="https://milligram.io/styles/main.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
    />
    <link rel="stylesheet" href="milligram.min.css" />
    <!-- to generate this style run `$ npm start` -->
  </head>
  <body>
    <main class="wrapper">
      <section class="container" id="image">
        <img
          src="https://milligram.io/images/thumbnail.png"
          alt="Milligram | A minimalist CSS framework."
        />
      </section>

      <section class="container" id="typography">
        <h5 class="title">Typography</h5>
        <hr />
        <div class="example">
          <div class="row">
            <div class="column">
              <h1>
                Heading<span class="heading-font-size">
                  <code>&lt;h1&gt;</code> 4.6rem (46px)</span
                >
              </h1>
              <h2>
                Heading<span class="heading-font-size">
                  <code>&lt;h2&gt;</code> 3.6rem (36px)</span
                >
              </h2>
              <h3>
                Heading<span class="heading-font-size">
                  <code>&lt;h3&gt;</code> 2.8rem (28px)</span
                >
              </h3>
              <h4>
                Heading<span class="heading-font-size">
                  <code>&lt;h4&gt;</code> 2.2rem (22px)</span
                >
              </h4>
              <h5>
                Heading<span class="heading-font-size">
                  <code>&lt;h5&gt;</code> 1.8rem (18px)</span
                >
              </h5>
              <h6>
                Heading<span class="heading-font-size">
                  <code>&lt;h6&gt;</code> 1.6rem (16px)</span
                >
              </h6>
            </div>
            <div class="column">
              <p>
                Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.
              </p>
              <p>
                Obcaecati <s>error</s> a, quas fugit hic,
                <a href="#">accusantium</a> autem
                <i>necessitatibus praesentium</i> placeat, iusto et
                <b>soluta expedita</b>! Quisquam repellendus
                <small>voluptatem</small>, <mark>tempora iste culpa fuga</mark>,
                <time>on April 29</time>!
              </p>
              <p>
                Quisquam nobis, ad. Iusto, <strong>repudiandae</strong>. Autem
                ipsa blanditiis, quae, fugit nobis
                <em>perspiciatis in beatae vitae</em> numquam illo, architecto
                hic dolor <q>molestiae aliquid</q>.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section class="container" id="blockquotes">
        <h5 class="title">Blockquotes</h5>
        <hr />
        <div class="example">
          <div class="row">
            <div class="column">
              <p><q>Yeah!! Milligram is amazing.</q></p>
            </div>
            <div class="column">
              <blockquote>
                <p><em>Yeah!! Milligram is amazing.</em></p>
              </blockquote>
            </div>
          </div>
        </div>
      </section>

      <section class="container" id="buttons">
        <h5 class="title">Buttons</h5>
        <hr />
        <div class="example">
          <div class="row">
            <div class="column">
              <a class="button" href="javascript: void(0)">Default Button</a>
              <a class="button button-outline" href="javascript: void(0)"
                >Outlined Button</a
              >
              <a class="button button-clear" href="javascript: void(0)"
                >Clear Button</a
              >
              <a class="button" disabled href="javascript: void(0)"
                >Default Button</a
              >
              <a
                class="button button-outline"
                disabled
                href="javascript: void(0)"
                >Outlined Button</a
              >
              <a class="button button-clear" disabled href="javascript: void(0)"
                >Clear Button</a
              >
            </div>
            <div class="column">
              <button class="button">Default Button</button>
              <button class="button button-outline">Outlined Button</button>
              <button class="button button-clear">Clear Button</button>
              <button class="button" disabled>Default Button</button>
              <button class="button button-outline" disabled>
                Outlined Button
              </button>
              <button class="button button-clear" disabled>Clear Button</button>
            </div>
            <div class="column">
              <input class="button" type="submit" value="Default Button" />
              <input
                class="button button-outline"
                type="submit"
                value="Outlined Button"
              />
              <input
                class="button button-clear"
                type="submit"
                value="Clear Button"
              />
              <input
                class="button"
                disabled
                type="submit"
                value="Default Button"
              />
              <input
                class="button button-outline"
                disabled
                type="submit"
                value="Outlined Button"
              />
              <input
                class="button button-clear"
                disabled
                type="submit"
                value="Clear Button"
              />
            </div>
          </div>
          <div class="row">
            <div class="column">
              <input class="button" type="reset" value="Default Button" />
              <input
                class="button button-outline"
                type="reset"
                value="Outlined Button"
              />
              <input
                class="button button-clear"
                type="reset"
                value="Clear Button"
              />
              <input
                class="button"
                disabled
                type="reset"
                value="Default Button"
              />
              <input
                class="button button-outline"
                disabled
                type="reset"
                value="Outlined Button"
              />
              <input
                class="button button-clear"
                disabled
                type="reset"
                value="Clear Button"
              />
            </div>
            <div class="column">
              <input class="button" type="button" value="Default Button" />
              <input
                class="button button-outline"
                type="button"
                value="Outlined Button"
              />
              <input
                class="button button-clear"
                type="button"
                value="Clear Button"
              />
              <input
                class="button"
                disabled
                type="button"
                value="Default Button"
              />
              <input
                class="button button-outline"
                disabled
                type="button"
                value="Outlined Button"
              />
              <input
                class="button button-clear"
                disabled
                type="button"
                value="Clear Button"
              />
            </div>
            <div class="column">
              <div class="button">Default Button</div>
              <div class="button button-outline">Outlined Button</div>
              <div class="button button-clear">Clear Button</div>
              <div class="button" disabled>Default Button</div>
              <div class="button button-outline" disabled>Outlined Button</div>
              <div class="button button-clear" disabled>Clear Button</div>
            </div>
          </div>
        </div>
      </section>

      <section class="container" id="lists">
        <h5 class="title">Lists</h5>
        <hr />
        <div class="example">
          <div class="row">
            <div class="column">
              <ul>
                <li>Unordered list item 1</li>
                <li>Unordered list item 2</li>
                <li>
                  Unordered list item 3
                  <ul>
                    <li>Unordered list item 3.1</li>
                    <li>Unordered list item 3.2</li>
                    <li>Unordered list item 3.3</li>
                  </ul>
                </li>
                <li>Unordered list item 4</li>
                <li>Unordered list item 5</li>
              </ul>
            </div>
            <div class="column">
              <ol>
                <li>Ordered list item 1</li>
                <li>Ordered list item 2</li>
                <li>
                  Ordered list item 3
                  <ol>
                    <li>Ordered list item 3.1</li>
                    <li>Ordered list item 3.2</li>
                    <li>Ordered list item 3.3</li>
                  </ol>
                </li>
                <li>Ordered list item 4</li>
                <li>Ordered list item 5</li>
              </ol>
            </div>
            <div class="column">
              <dl>
                <dt>Description list item 1</dt>
                <dt>Description list item 2</dt>
                <dt>Description list item 3</dt>
                <dd>Description list item 3.1</dd>
                <dd>Description list item 3.2</dd>
                <dd>Description list item 3.3</dd>
                <dt>Description list item 4</dt>
                <dt>Description list item 5</dt>
              </dl>
            </div>
          </div>
        </div>
      </section>

      <section class="container" id="forms">
        <h5 class="title">Forms</h5>
        <hr />
        <div class="example">
          <form>
            <fieldset>
              <legend>Legend</legend>
              <div class="row">
                <div class="column">
                  <label for="textField">Text field</label>
                  <input type="text" placeholder="Text field" id="textField" />
                  <label for="emailField">Email field</label>
                  <input
                    type="email"
                    id="emailField"
                    placeholder="Email field"
                  />
                  <label for="numberField">Number field</label>
                  <input
                    type="number"
                    id="numberField"
                    placeholder="Number field"
                  />
                  <label for="passwordField">Password field</label>
                  <input
                    type="password"
                    id="passwordField"
                    placeholder="Password field"
                  />
                  <label for="selectField">Select field</label>
                  <select id="selectField">
                    <option value="selectField1">Select field 1</option>
                    <option value="selectField2">Select field 2</option>
                    <option value="selectField3">Select field 3</option>
                    <option value="selectField4">Select field 4</option>
                  </select>
                  <label for="colorField">Color field</label>
                  <input
                    type="color"
                    id="colorField"
                    placeholder="Your browser doesn't support this field."
                  />
                  <label for="weekField">Week field</label>
                  <input
                    type="week"
                    id="weekField"
                    placeholder="Your browser doesn't support this field."
                  />
                  <label for="datetimeField">Datetime field</label>
                  <input
                    type="datetime"
                    id="datetimeField"
                    placeholder="Your browser doesn't support this field."
                  />
                  <label for="searchField">Search field</label>
                  <input
                    type="search"
                    id="searchField"
                    placeholder="Search field"
                  />
                </div>
                <div class="column">
                  <label for="telField">Tel field</label>
                  <input type="tel" id="telField" placeholder="Tel field" />
                  <label for="urlField">URL field</label>
                  <input type="url" id="urlField" placeholder="URL field" />
                  <label for="radioField">Radio field</label>
                  <div class="row">
                    <div class="column">
                      <input type="radio" id="radioField1" name="radioField" />
                      <label class="label-inline" for="radioField1"
                        >Radio field 1</label
                      >
                    </div>
                    <div class="column">
                      <input type="radio" id="radioField2" name="radioField" />
                      <label class="label-inline" for="radioField2"
                        >Radio field 2</label
                      >
                    </div>
                  </div>
                  <label for="radioField">Checkbox field</label>
                  <div class="row">
                    <div class="column">
                      <input type="checkbox" id="checkboxField1" />
                      <label class="label-inline" for="checkboxField1"
                        >Checkbox field 1</label
                      >
                    </div>
                    <div class="column">
                      <input type="checkbox" id="checkboxField2" />
                      <label class="label-inline" for="checkboxField2"
                        >Checkbox field 2</label
                      >
                    </div>
                  </div>
                  <label for="textareaField">Textarea field</label>
                  <textarea
                    placeholder="Textarea field"
                    id="textareaField"
                  ></textarea>
                  <label for="dateField">Date field</label>
                  <input
                    type="date"
                    id="dateField"
                    placeholder="Your browser doesn't support this field."
                  />
                  <label for="monthField">Month field</label>
                  <input
                    type="month"
                    id="monthField"
                    placeholder="Your browser doesn't support this field."
                  />
                  <label for="datetimeLocalField">Datetime-Local field</label>
                  <input
                    type="datetime-local"
                    id="datetimeLocalField"
                    placeholder="Your browser doesn't support this field."
                  />
                  <input type="submit" />
                  <input type="reset" class="button-clear" />
                </div>
              </div>
            </fieldset>
          </form>
        </div>
      </section>

      <section class="container" id="tables">
        <h5 class="title">Tables</h5>
        <hr />
        <div class="example">
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Height</th>
                <th>Born</th>
                <th>Location</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Steve Kerr</td>
                <td>Coach</td>
                <td>1,91</td>
                <td>September 27, 1965</td>
                <td>Beirut, Lebanon</td>
              </tr>
              <tr>
                <td>Stephen Curry</td>
                <td>Point Guard</td>
                <td>1,91</td>
                <td>March 14, 1988</td>
                <td>Akron, OH</td>
              </tr>
              <tr>
                <td>Klay Thompson</td>
                <td>Small Forward</td>
                <td>2,01</td>
                <td>February 8, 1990</td>
                <td>Los Angeles, CA</td>
              </tr>
              <tr>
                <td>Draymond Green</td>
                <td>Power Forward</td>
                <td>2,01</td>
                <td>March 4, 1990</td>
                <td>Saginaw, MI</td>
              </tr>
              <tr>
                <td>Andre Iguodala</td>
                <td>Small Forward and Shooting Guard</td>
                <td>1,98</td>
                <td>January 28, 1984</td>
                <td>Springfield, IL</td>
              </tr>
              <tr>
                <td>Shaun Livingston</td>
                <td>Point Guard and Shooting Guard</td>
                <td>2,01</td>
                <td>September 11, 1985</td>
                <td>Peoria, IL</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="container" id="grids">
        <h5 class="title">Grids</h5>
        <hr />
        <div class="example">
          <div class="row">
            <div class="column"><span class="column-demo">100%</span></div>
          </div>
          <div class="row">
            <div class="column column-10">
              <span class="column-demo">10%</span>
            </div>
            <div class="column column-90">
              <span class="column-demo">90%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-20">
              <span class="column-demo">20%</span>
            </div>
            <div class="column column-80">
              <span class="column-demo">80%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-25">
              <span class="column-demo">25%</span>
            </div>
            <div class="column column-75">
              <span class="column-demo">75%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-33">
              <span class="column-demo">33%</span>
            </div>
            <div class="column column-67">
              <span class="column-demo">67%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-40">
              <span class="column-demo">40%</span>
            </div>
            <div class="column column-60">
              <span class="column-demo">60%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-50">
              <span class="column-demo">50%</span>
            </div>
            <div class="column column-50">
              <span class="column-demo">50%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-60">
              <span class="column-demo">60%</span>
            </div>
            <div class="column column-40">
              <span class="column-demo">40%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-67">
              <span class="column-demo">67%</span>
            </div>
            <div class="column column-33">
              <span class="column-demo">33%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-75">
              <span class="column-demo">75%</span>
            </div>
            <div class="column column-25">
              <span class="column-demo">25%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-80">
              <span class="column-demo">80%</span>
            </div>
            <div class="column column-20">
              <span class="column-demo">20%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-90">
              <span class="column-demo">90%</span>
            </div>
            <div class="column column-10">
              <span class="column-demo">10%</span>
            </div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">100%</span></div>
          </div>
          <div class="row">
            <div class="column column-90">
              <span class="column-demo">90%</span>
            </div>
            <div class="column"><span class="column-demo">10%</span></div>
          </div>
          <div class="row">
            <div class="column column-80">
              <span class="column-demo">80%</span>
            </div>
            <div class="column"><span class="column-demo">20%</span></div>
          </div>
          <div class="row">
            <div class="column column-75">
              <span class="column-demo">75%</span>
            </div>
            <div class="column"><span class="column-demo">25%</span></div>
          </div>
          <div class="row">
            <div class="column column-67">
              <span class="column-demo">67%</span>
            </div>
            <div class="column"><span class="column-demo">33%</span></div>
          </div>
          <div class="row">
            <div class="column column-60">
              <span class="column-demo">60%</span>
            </div>
            <div class="column"><span class="column-demo">40%</span></div>
          </div>
          <div class="row">
            <div class="column column-50">
              <span class="column-demo">50%</span>
            </div>
            <div class="column"><span class="column-demo">50%</span></div>
          </div>
          <div class="row">
            <div class="column column-40">
              <span class="column-demo">40%</span>
            </div>
            <div class="column"><span class="column-demo">60%</span></div>
          </div>
          <div class="row">
            <div class="column column-33">
              <span class="column-demo">33%</span>
            </div>
            <div class="column"><span class="column-demo">67%</span></div>
          </div>
          <div class="row">
            <div class="column column-25">
              <span class="column-demo">25%</span>
            </div>
            <div class="column"><span class="column-demo">75%</span></div>
          </div>
          <div class="row">
            <div class="column column-20">
              <span class="column-demo">20%</span>
            </div>
            <div class="column"><span class="column-demo">80%</span></div>
          </div>
          <div class="row">
            <div class="column column-10">
              <span class="column-demo">10%</span>
            </div>
            <div class="column"><span class="column-demo">90%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">100%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">50%</span></div>
            <div class="column"><span class="column-demo">50%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">33.3%</span></div>
            <div class="column"><span class="column-demo">33.3%</span></div>
            <div class="column"><span class="column-demo">33.3%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">25%</span></div>
            <div class="column"><span class="column-demo">25%</span></div>
            <div class="column"><span class="column-demo">25%</span></div>
            <div class="column"><span class="column-demo">25%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">20%</span></div>
            <div class="column"><span class="column-demo">20%</span></div>
            <div class="column"><span class="column-demo">20%</span></div>
            <div class="column"><span class="column-demo">20%</span></div>
            <div class="column"><span class="column-demo">20%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">16.6%</span></div>
            <div class="column"><span class="column-demo">16.6%</span></div>
            <div class="column"><span class="column-demo">16.6%</span></div>
            <div class="column"><span class="column-demo">16.6%</span></div>
            <div class="column"><span class="column-demo">16.6%</span></div>
            <div class="column"><span class="column-demo">16.6%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">14.28%</span></div>
            <div class="column"><span class="column-demo">14.28%</span></div>
            <div class="column"><span class="column-demo">14.28%</span></div>
            <div class="column"><span class="column-demo">14.28%</span></div>
            <div class="column"><span class="column-demo">14.28%</span></div>
            <div class="column"><span class="column-demo">14.28%</span></div>
            <div class="column"><span class="column-demo">14.28%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">12.5%</span></div>
            <div class="column"><span class="column-demo">12.5%</span></div>
            <div class="column"><span class="column-demo">12.5%</span></div>
            <div class="column"><span class="column-demo">12.5%</span></div>
            <div class="column"><span class="column-demo">12.5%</span></div>
            <div class="column"><span class="column-demo">12.5%</span></div>
            <div class="column"><span class="column-demo">12.5%</span></div>
            <div class="column"><span class="column-demo">12.5%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">11.11%</span></div>
            <div class="column"><span class="column-demo">11.11%</span></div>
            <div class="column"><span class="column-demo">11.11%</span></div>
            <div class="column"><span class="column-demo">11.11%</span></div>
            <div class="column"><span class="column-demo">11.11%</span></div>
            <div class="column"><span class="column-demo">11.11%</span></div>
            <div class="column"><span class="column-demo">11.11%</span></div>
            <div class="column"><span class="column-demo">11.11%</span></div>
            <div class="column"><span class="column-demo">11.11%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
            <div class="column"><span class="column-demo">10%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
            <div class="column"><span class="column-demo">9.09%</span></div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
            <div class="column"><span class="column-demo">8.3%</span></div>
          </div>
          <div class="row">
            <div class="column column-50 column-offset-25">
              <span class="column-demo">50%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-50 column-offset-50">
              <span class="column-demo">50%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-25 column-offset-75">
              <span class="column-demo">25%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-25 column-offset-50">
              <span class="column-demo">25%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-25 column-offset-25">
              <span class="column-demo">25%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-25 column-offset-25">
              <span class="column-demo">25%</span>
            </div>
            <div class="column column-25 column-offset-25">
              <span class="column-demo">25%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-25">
              <span class="column-demo">25%</span>
            </div>
            <div class="column column-25 column-offset-50">
              <span class="column-demo">25%</span>
            </div>
          </div>
          <div class="row">
            <div class="column"><span class="column-demo">25%</span></div>
            <div class="column column-50 column-offset-25">
              <span class="column-demo">50%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-50">
              <span class="column-demo">50%</span>
            </div>
            <div class="column column-25 column-offset-25">
              <span class="column-demo">25%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-25">
              <span class="column-demo">25%</span>
            </div>
            <div class="column column-25 column-offset-25">
              <span class="column-demo">25%</span>
            </div>
          </div>
          <div class="row">
            <div class="column column-75 column-offset-25">
              <span class="column-demo">75%</span>
            </div>
          </div>
        </div>
      </section>

      <section class="container" id="code">
        <h5 class="title">Code</h5>
        <hr />
        <div class="example">
          <pre><code>.milligram {
	color: #9b4dca;
}</code></pre>
        </div>
      </section>

      <section class="container" id="utilities">
        <h5 class="title">Utilities</h5>
        <hr />
        <div class="example">
          <div class="clearfix">
            <img
              class="float-left"
              src="http://placehold.it/320/d1d1d1/?text=float+to+left"
              alt="float to left"
            />
            <img
              class="float-right"
              src="http://placehold.it/320/d1d1d1/?text=float+to+right"
              alt="float to right"
            />
          </div>
        </div>
      </section>

      <section class="container" id="examples">
        <h5 class="title">Examples</h5>
        <hr />
        <ul>
          <li>
            <a
              href="https://milligram.io/getting-started.html"
              title="Getting Started"
              >Getting Started</a
            >
          </li>
          <li>
            <a href="https://milligram.io/typography.html" title="Typography"
              >Typography</a
            >
          </li>
          <li>
            <a href="https://milligram.io/blockquotes.html" title="Blockquotes"
              >Blockquotes</a
            >
          </li>
          <li>
            <a href="https://milligram.io/buttons.html" title="Buttons"
              >Buttons</a
            >
          </li>
          <li>
            <a href="https://milligram.io/lists.html" title="Lists">Lists</a>
          </li>
          <li>
            <a href="https://milligram.io/forms.html" title="Forms">Forms</a>
          </li>
          <li>
            <a href="https://milligram.io/tables.html" title="Tables">Tables</a>
          </li>
          <li>
            <a href="https://milligram.io/grids.html" title="Grids">Grids</a>
          </li>
          <li>
            <a href="https://milligram.io/code.html" title="Code">Code</a>
          </li>
          <li>
            <a href="https://milligram.io/utilities.html" title="Utilities"
              >Utilities</a
            >
          </li>
          <li>
            <a href="https://milligram.io/tips.html" title="Tips">Tips</a>
          </li>
          <li>
            <a
              href="https://milligram.io/browser-support.html"
              title="Browser Support"
              >Browser Support</a
            >
          </li>
        </ul>
      </section>

      <footer class="footer">
        <section class="container">
          <p>
            Designed with ♥ by
            <a
              target="blank"
              href="https://twitter.com/cjpatoilo"
              title="CJ Patoilo"
              >CJ Patoilo</a
            >. Licensed under the
            <a
              target="blank"
              href="https://github.com/milligram/milligram#license"
              title="MIT License"
              >MIT License</a
            >.
          </p>
        </section>
      </footer>
    </main>
  </body>
</html>