<commit_before><!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Seed UI</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="prod/main.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <div class="su_line">
            <h1 class="su_cell su_cells_12">Seed UI Garden</h1>
        </div>
      </header>
      <div class="su_line">
        <div class="su_cell su_cells_3">
          <h2 class="su_align-center su_background-dark">UI Components</h2>
          <nav class="su_list su_align-right" id="nav_links">
            <a href="#" class="su_uppercase su_list-item active">Utility classes</a>
            <a href="#" class="su_uppercase su_list-item">Tooltip</a>
            <a href="#" class="su_uppercase su_list-item">Accordion</a>
            <a href="#" class="su_uppercase su_list-item">Buttons</a>
            <a href="#" class="su_uppercase su_list-item">Alerts</a>
            <a href="#" class="su_uppercase su_list-item">Tables</a>
            <a href="#" class="su_uppercase su_list-item">Carousel</a>
            <a href="#" class="su_uppercase su_list-item">Navigation</a>
            <a href="#" class="su_uppercase su_list-item">Eyelids</a>
            <a href="#" class="su_uppercase su_list-item">Modal</a>
            <a href="#" class="su_uppercase su_list-item">Typography</a>
            <a href="#" class="su_uppercase su_list-item">Progress Bars</a>
            <a href="#" class="su_uppercase su_list-item">Infinite loading</a>
            <a href="#" class="su_uppercase su_list-item">Forms</a>
            <a href="#" class="su_uppercase su_list-item">Dropdowns</a>
            <a href="#" class="su_uppercase su_list-item">Lists</a>
            <a href="#" class="su_uppercase su_list-item">Cards</a>
            <a href="#" class="su_uppercase su_list-item">Combobox</a>
            <a href="#" class="su_uppercase su_list-item">Sneak Peek</a>
            <a href="#" class="su_uppercase su_list-item">Grid</a>
            <a href="#" class="su_uppercase su_list-item">Tabs</a>
            <a href="#" class="su_uppercase su_list-item">Video Embed</a>

          </nav>
        </div>
        <div class="su_cell su_cells_9 su_demo_hackhaton">

            <h2>Utilities Component</h2>
            <h3>Float Classes</h3>
            <p>Add the class <code class="su_code">.su_left</code> or <code class="su_code">.su_right</code> to float an element left or right respectively.  Then, add the <code class="su_code">.su_clear</code> class to clear floated elements.  Examples:</p>
            <div class="su_right su_primary-bg su_radius brian-div"><i class="material-icons">settings</i>Div 1 Floated Right</div>
            <div class="su_left su_foreground-bg su_radius brian-div"><i class="material-icons">menu</i>Div 2 Floated Left</div>
            <div class="su_clear su_background-bg su_radius brian-div"><i class="material-icons">face</i>Cleared Div</div>

            <div class="su_space-top--medium"></div>
            <h3>Full Width Class</h3>
            <p>The full width classes expand the element they are applied to to the full width of it's parent element using the <code class="su_code">.su_full-width</code> class.  Example:</p>
            <div class="su_foreground-bg su_radius brian-div">
              A container parent element.
              <div class="su_primary-bg-light su_full-width brian-div"> Full Width Content.</div>
              Some more content.
            </div>

            <div class="su_space-top--medium"></div>
            <h3>Radius &amp; Round Classes</h3>
            <p>Add the class <code class="su_code">.su_radius</code> to apply the default radius size on elements.  Add the class <code class="su_code">.su_round</code> class to create a pill or capsule rounding effect on elements.  They can be applied to different types of elements.  Examples:</p>
            <p>This paragraph highlights the radius effect on the phrase <span class="su_radius su_accent-bg-light brian-span su_background-light">"Seed UI"</span> and the rounding effect applied to a Seed UI button and a div:</p>

            <div class="su_space-top--small"></div>
            <button type="button" class="su_btn su_btn-primary su_round">Button With Round Class Applied</button>
            <div class="su_space-top--small"></div>
            <div class="su_round su_background-bg">Div With Round Class Applied</div>

            <div class="su_space-top--medium"></div>
            <h3>Color Classes</h3>
            <h5>Seed UI comes with a number of built in colors that can be customized to your website's style guide.  You can change the background color of elements or the text color by applying their associated classes.  Examples:</h5>

            <h5>Background Color Classes</h5>
            <table class="su_table su_table-bordered">
              <thead>
              <tr>
                <th>Light Background Colors</th>
                <th>Base Background Colors</th>
                <th>Dark Background Colors</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="su_primary-bg-light">.su_primary-bg-light</td>
                <td class="su_primary-bg">.su_primary-bg</td>
                <td class="su_primary-bg-dark">.su_primary-bg-dark</td>
              </tr>
              <tr>
                <td class="su_accent-bg-light">.su_accent-bg-light</td>
                <td class="su_accent-bg">.su_accent-bg</td>
                <td class="su_accent-bg-dark">.su_accent-bg-dark</td>
              </tr>
              <tr>
                <td class="su_secondary-bg-light">.su_secondary-bg-light</td>
                <td class="su_secondary-bg">.su_secondary-bg</td>
                <td class="su_secondary-bg-dark">.su_secondary-bg-dark</td>
              </tr>
              <tr>
                <td class="su_foreground-bg-light">.su_foreground-bg-light</td>
                <td class="su_foreground-bg">.su_foreground-bg</td>
                <td class="su_foreground-bg-dark">.su_foreground-bg-dark</td>
              </tr>
              <tr>
                <td class="su_background-bg-light">.su_background-bg-light</td>
                <td class="su_background-bg">.su_background-bg</td>
                <td class="su_background-bg-dark">.su_background-bg-dark</td>
              </tr>
              </tbody>
            </table>

            <div class="su_space-top--small"></div>
            <h5>Text Color Classes</h5>
            <table class="su_table su_table-bordered">
              <thead>
              <tr>
                <th>Light Text Colors</th>
                <th>Base Text Colors</th>
                <th>Dark Text Colors</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="su_primary-light">.su_primary-light</td>
                <td class="su_primary">.su_primary</td>
                <td class="su_primary-dark">.su_primary-dark</td>
              </tr>
              <tr>
                <td class="su_accent-light">.su_accent-light</td>
                <td class="su_accent">.su_accent</td>
                <td class="su_accent-dark">.su_accent-dark</td>
              </tr>
              <tr>
                <td class="su_secondary-light">.su_secondary-light</td>
                <td class="su_secondary">.su_secondary</td>
                <td class="su_secondary-dark">.su_secondary-dark</td>
              </tr>
              <tr>
                <td class="su_foreground-light">.su_foreground-light</td>
                <td class="su_foreground">.su_foreground</td>
                <td class="su_foreground-dark">.su_foreground-dark</td>
              </tr>
              <tr>
                <td class="su_background-light">.su_background-light</td>
                <td class="su_background">.su_background</td>
                <td class="su_background-dark">.su_background-dark</td>
              </tr>
              </tbody>
            </table>

            <div class="su_space-top--medium"></div>
            <h3>Visibility &amp; Hidden Classes</h3>
            <p>Add the class <code class="su_code">.su_hide</code> to an element to remove it from the page view.  The number 4 <code class="su_code">span</code> element in the following list is hidden:</p>
            <span class="su_accent-bg-light brian-span su_radius">1</span>
            <span class="su_accent-bg-light brian-span su_radius">2</span>
            <span class="su_accent-bg-light brian-span su_radius">3</span>
            <span class="su_accent-bg-light brian-span su_radius su_hide">4</span>
            <span class="su_accent-bg-light brian-span su_radius">5</span>
            <span class="su_accent-bg-light brian-span su_radius">6</span>
            <p>Add the class <code class="su_code">.su_invisible</code> to make the visibility of an element hidden but still retain its space in the DOM.  The number 4 <code class="su_code">span</code> element in the following list is invisible:</p>
            <span class="su_accent-bg-light brian-span su_radius">1</span>
            <span class="su_accent-bg-light brian-span su_radius">2</span>
            <span class="su_accent-bg-light brian-span su_radius">3</span>
            <span class="su_accent-bg-light brian-span su_radius su_invisible">4</span>
            <span class="su_accent-bg-light brian-span su_radius">5</span>
            <span class="su_accent-bg-light brian-span su_radius">6</span>

            <div class="su_space-top--medium"></div>
            <h3>Screen Reader Only Class</h3>
            <p>The next paragraph is only accessible to screen readers since it has the <code class="su_code">.su_sr-only</code> class applied to it.</p>
            <p class="su_sr-only">The quick brown fox jumped over the lazy dog.</p>

            <div class="su_space-top--medium"></div>
            <h3>Text Alignment Classes</h3>
            <p>Use the following classes to change the text alignment on elements.</p>
            <div class="su_background-bg brian-div su_radius"><code class="su_code">.su_align-left</code> for left alignment.<i class="material-icons su_right su_accent">format_align_left</i><p class="su_align-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias culpa, libero qui quo esse natus aliquid laborum harum! At atque ex voluptatum error rerum, quis ipsa odit esse inventore laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias perspiciatis rem provident voluptas quia distinctio, nesciunt laborum eligendi? Quisquam praesentium eum consequuntur, adipisci enim mollitia. Iste impedit esse a laborum.</p></div>
            <div class="su_background-bg brian-div su_radius"><code class="su_code">.su_align-center</code class="su_code"> for center alignment.<i class="material-icons su_right su_accent">format_align_center</i><p class="su_align-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic atque corporis blanditiis magnam numquam unde ducimus, veniam adipisci quo ipsam est, iste deleniti, consectetur iusto, et animi quidem voluptatum asperiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut odio distinctio modi ipsa, doloribus optio molestiae beatae libero. Iure iusto aliquid laborum perferendis expedita quibusdam praesentium, doloribus optio, maxime cumque.</p></div>
            <div class="su_background-bg brian-div su_radius"><code class="su_code">.su_align-right</code> for right alignment.<i class="material-icons su_right su_accent">format_align_right</i><p class="su_align-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum ab natus asperiores est adipisci, laborum repellat cupiditate cum maiores deleniti mollitia. Totam ut molestias porro vero culpa, sit ullam officiis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis alias voluptas aliquid odio quasi accusantium quos repellendus velit. Dolores, eos ab. Provident hic praesentium laboriosam porro. Quod earum quisquam neque!</p></div>
            <div class="su_background-bg brian-div su_radius"><code class="su_code">.su_align-justify</code> for justified alignment.<i class="material-icons su_right su_accent">format_align_justify</i><p class="su_align-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non dolorum fugiat aperiam eius necessitatibus ea, consequuntur assumenda ad, blanditiis et debitis consequatur eveniet dolor architecto magnam quas. Ipsa, similique, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sed iure molestiae, aliquid quibusdam eaque modi hic quo cumque omnis harum nisi officiis necessitatibus, doloribus natus nemo adipisci accusantium laudantium!</p></div>

            <div class="su_space-top--medium"></div>
            <h3>Text Transform Classes</h3>
            <p class="su_lowercase">Use the <code class="su_code">.su_lowercase</code> class to transform text of an element to all lowercase.</p>
            <p class="su_uppercase">use the <code class="su_code">.su_uppercase</code> class to transform text of an element to all uppercase.</p>
            <p class="su_capitalize">Use the <code class="su_code">.su_capitalize</code> class to transform text of an element to use uppercase letters for the beginning of each word.</p>

            <div class="su_space-top--medium"></div>
            <h3>Code Class</h3>
            <p>Add the class <code class="su_code">.su_code</code> to give some default styling to displayed computer code.  Examples:</p>
<pre class="su_code">
    <code>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
    &lt;/html&gt;</code>
</pre>

            <div class="su_space-top--medium"></div>
            <h3>Spacer Classes</h3>
            <p>A collection of classes that have varying margin values on different sides for quick spacing fixes.</p>

            <p><code class="su_code">.su_space-top--small</code> applies a <code class="su_code">margin-top: 20px</code></p>
            <p><code class="su_code">.su_space-top--medium</code> applies a <code class="su_code">margin-top: 50px</code></p>
            <p><code class="su_code">.su_space-top--large</code> applies a <code class="su_code">margin-top: 100px</code></p>

            <p><code class="su_code">.su_space-right--small</code> applies a <code class="su_code">margin-right: 20px</code></p>
            <p><code class="su_code">.su_space-right--medium</code> applies a <code class="su_code">margin-right: 50px</code></p>
            <p><code class="su_code">.su_space-right--large</code> applies a <code class="su_code">margin-right: 100px</code></p>

            <p><code class="su_code">.su_space-bottom--small</code> applies a <code class="su_code">margin-bottom: 20px</code></p>
            <p><code class="su_code">.su_space-bottom--medium</code> applies a <code class="su_code">margin-bottom: 50px</code></p>
            <p><code class="su_code">.su_space-bottom--large</code> applies a <code class="su_code">margin-bottom: 100px</code></p>

            <p><code class="su_code">.su_space-left--small</code> applies a <code class="su_code">margin-left: 20px</code></p>
            <p><code class="su_code">.su_space-left--medium</code> applies a <code class="su_code">margin-left: 50px</code></p>
            <p><code class="su_code">.su_space-left--large</code> applies a <code class="su_code">margin-left: 100px</code></p>

            <div class="su_space-top--medium"></div>
            <h3>Center Content Class</h3>
            <p>Add the <code class="su_code">.su_center-content</code> class to an elementfor an easy way to add auto margins for centering content blocks.  Example:</p>
            <div class="su_center-content brian-div2 su_primary-bg-dark su_radius">This div box is centered on this page since it has the <code class="su_code">.su_center-content</code> class applied to it.</div>

            <div class="su_space-top--medium"></div>
            <hr>
            <div class="su_space-top--medium"></div>

            <h2>Tooltip Component</h2>
            <p class="su_contains_tooltip">The tooltip component allows you to add useful pieces of information <span class="su_tooltip">hidden<span class="su_tooltip-text su_radius">Yes, like this you see.</span></span> from normal view so users can choose to hover over them or not to find out more.<span class="su_tooltip su_tip_top">natus (tooltip top)<span class="su_tooltip-text su_radius">natus - born, arisen</span></span> <span title="Auto Tooltip">accusamus</span> nihil maxime, consequuntur pariatur mollitia nobis atque consectetur sunt vitae fuga, esse est? Cupiditate voluptas autem laboriosam.</p>
            <p class="su_contains_tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non alias recusandae natus accusamus nihil maxime, consequuntur <span class="su_tooltip">pariatur (tooltip left)<span class="su_tooltip-text su_radius">pariatur - to bear</span></span> mollitia nobis atque consectetur sunt vitae fuga, esse est? <span class="su_tooltip">Cupiditate (tooltip right)<span class="su_tooltip-text su_radius">Cupiditate - enthusiasm, eagerness, passion</span></span> voluptas autem laboriosam.</p>

            <div class="su_space-top--medium"></div>
            <hr>
            <div class="su_space-top--medium"></div>

            <h2>Accordion Component</h2>
            <p>The Seed UI Accordion let's you customize some of its looks depending on which classes are applied to its components.  Also, did you know that the parts of an actual accordion that squish are called bellows?  So think of these tabs as bellows.</p>
            <div class="su_accordion">
              <div class="su_bellow">
                <input id="bellow1" type="radio" name="bellows">
                <label for="bellow1">Bellow One</label>
                <div class="su_bellow-content su_background-bg">
                  <p>This bellow has a class of <code class="su_code">su_background-bg</code> on it giving the content it's background color. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                </div>
              </div>
              <div class="su_bellow">
                <input id="bellow2" type="radio" name="bellows">
                <label for="bellow2">Bellow Two</label>
                <div class="su_bellow-content su_background-bg">
                  <p>This bellow has a class of <code class="su_code">su_background-bg</code> on it giving the content it's background color. Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                </div>
              </div>
              <div class="su_bellow">
                <input id="bellow3" type="radio" name="bellows">
                <label for="bellow3" class="su_radius">Bellow Three</label>
                <div class="su_bellow-content">
                  <p>This bellow has a class of <code class="su_code">su_radius</code> on its label giving the bellow its curved corners.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                </div>
              </div>
              <div class="su_bellow">
                <input id="bellow4" type="radio" name="bellows">
                <label for="bellow4" class="su_round">Bellow Four</label>
                <div class="su_bellow-content">
                  <p>This bellow has a class of <code class="su_code">su_round</code> on its label giving the bellow its ultra curved corners.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                </div>
              </div>
            </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2 id="top-of-page">Buttons</h2>
          <h3>Semantic buttons</h3>
          <button type="button" class="su_btn su_btn-primary">Primary</button>
          <button type="button" class="su_btn su_btn-secondary">Secondary</button>
          <button type="button" class="su_btn su_btn-warning">Warning</button>
          <button type="button" class="su_btn su_btn-danger">Danger</button>

          <div class="su_space-top--medium"></div>
          <h3>Floating buttons</h3>
          <a href="#" class="su_btn-floating su_red"><i class="material-icons">accessibility</i></a>
          <a href="#" class="su_btn-floating su_green-light"><i class="material-icons">android</i></a>
          <a href="#" class="su_btn-floating su_green-dark"><i class="material-icons">code</i></a>
          <a href="#" class="su_btn-floating su_pink"><i class="material-icons">description</i></a>

          <div class="su_space-top--medium"></div>
          <h3 id="top-of-page">Back to top button</h3>
          <p>Example is at the bottom right corner of this page. Add the id "top-of-page" to an element at the top to activate.</p>
          <a href="#" class="su_btn-to-top su_pink"><i class="material-icons">keyboard_arrow_up</i></a>

          <div class="su_space-top--medium"></div>
          <h3>Button with icons</h3>
          <button type="button" class="su_btn su_btn-primary"><i class="material-icons left">autorenew</i>Left</button>
          <button type="button" class="su_btn su_btn-secondary">Right<i class="material-icons right">done</i></button>

          <div class="su_space-top--medium"></div>
          <h3>Checkboxes</h3>
          <p>Make sure the corresponding labels and inputs have the same for/id attributes</p>
          <div class="su_btn-group">
            <input type="checkbox" class="su_checkbox-input" id="option-1">
            <label for="option-1" class="su_btn su_btn-warning su_checkbox-label">
              Option 1
            </label>
            <input type="checkbox" class="su_checkbox-input" id="option-2">
            <label for="option-2" class="su_btn su_btn-warning su_checkbox-label">
              Option 2
            </label>
            <input type="checkbox" class="su_checkbox-input" id="option-3">
            <label for="option-3" class="su_btn su_btn-warning su_checkbox-label">
              Option 3
            </label>
          </div>

          <div class="su_space-top--medium"></div>

          <h3>Radio Buttons</h3>
          <div class="su_btn-group">
            <input type="radio" name="su_radio" class="su_radio-input" id="option-4">
            <label for="option-4" class="su_btn su_btn-danger su_radio-label">
              Option 4
            </label>
            <input type="radio" name="su_radio" class="su_radio-input" id="option-5">
            <label for="option-5" class="su_btn su_btn-danger su_radio-label">
              Option 5
            </label>
            <input type="radio" name="su_radio" class="su_radio-input" id="option-6">
            <label for="option-6" class="su_btn su_btn-danger su_radio-label">
              Option 6
            </label>
          </div>

          <div class="su_space-top--medium"></div>

          <h3>Switches</h3>
          <div class="su_switch-thin">
            <input type="checkbox" name="su_switch-thin" class="su_switch-thin-checkbox" id="su-switch-thin" checked>
            <label class="su_switch-thin-label" for="su-switch-thin">
              <span class="su_switch-thin-switch"></span>
            </label>
          </div>
          <br>
          <div class="su_switch-fat">
            <input type="checkbox" name="su_switch-fat" class="su_switch-fat-checkbox" id="su-switch-fat" checked>
            <label class="su_switch-fat-label" for="su-switch-fat">
              <span class="su_switch-fat-switch"></span>
            </label>
          </div>
          <br>
          <div class="su_switch-square">
            <input type="checkbox" name="su_switch-square" class="su_switch-square-checkbox" id="su-switch-square" checked>
            <label class="su_switch-square-label" for="su-switch-square">
              <span class="su_switch-square-switch"></span>
            </label>
          </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Alerts</h2>
          <div class="su_alert su_alert-success"><i class="su_alert-star material-icons">star</i>This is a success alert.<i class="su_alert-close material-icons">close</i></div>
          <br>
          <div class="su_alert su_alert-info"><i class="su_alert-star material-icons">info</i>This is an info alert.<i class="su_alert-close material-icons">close</i></div>
          <br>
          <div class="su_alert su_alert-warning"><i class="su_alert-star material-icons">warning</i>This is a warning.<i class="su_alert-close material-icons">close</i></div>
          <br>
          <div class="su_alert su_alert-error"><i class="su_alert-star material-icons">error</i>This is an error alert.<i class="su_alert-close material-icons">close</i></div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Tables</h2>
          <p>All table styles can be combined as desired using the associated classes.</p>

          <h3>Basic table</h3>
          <table class="su_table">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>

          <h3>Bordered table</h3>
          <table class="su_table su_table-bordered">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>

          <h3>Striped table</h3>
          <table class="su_table su_table-striped">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>

          <h3>Hover table</h3>
          <table class="su_table su_table-hover">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>

          <h3>Table with all classes</h3>
          <table class="su_table su_table-hover su_table-striped su_table-bordered">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Carousel</h2>
          <div class="su_line">
            <div class="su_cell su_cells_8">
              <div class="su_carousel-wrap">
                <ul class="su_carousel">
                  <li class="su_carousel-item su_carousel-visible"><img src="http://lorempixel.com/1000/500/food/6" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/1" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/2" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/3" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/4" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/5" alt=""></li>
                </ul>
                <div class="su_carousel-controls">
                  <button class="su_carousel-prev su_btn-floating su_green-light"><i class="material-icons">keyboard_arrow_left</i></button>
                  <button class="su_carousel-next su_btn-floating su_green-light"><i class="material-icons">keyboard_arrow_right</i></button>
                </div>
              </div>
            </div>
          </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Eyelids</h2>

          <p>Eyelids is an innovative web component that can be useful to the people who read a lot on the computer screen. It helps you focus on the text or other content in cases of pages with a long chunks of text, or even to help cover up the distracting parts of the complex web page. To use it, just hit <code class="su_code">Shift + S</code> on the keyboard. The eyelids will close down vertically on your mouse position and will follow its movement allowing you a clean horizontal area for better focus on the content. To dismiss it, just hit <code class="su_code">Shift + S</code> again.</p>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Basic Navigation Bar</h2>

          <p>Code applied:</p>

          <pre class="su_code su_align-center"><code>&lt;div class="su_navigation"&gt;</code></pre>

          <div class="su_navigation">
            <div class="su_navigation-container">
              <span class="su_logo">SeedUI</span>
              <nav class="su_menu-main" role="navigation">
                <ul>
                  <li><a href="#item1">Item 1</a></li>
                  <li><a href="#item2">Item 2</a></li>
                  <li><a href="#item3">Item 3</a></li>
                  <li><a href="#item4">Item 4</a></li>
                </ul>
              </nav>
              <div class="su_search" role="search">
                <form>
                  <span class="su_submit-search material-icons">search</span>
                  <div class="su_search-field">
                    <input type="text" name="search" id="su_search-body">
                    <label class="su_search-label" for="su_search-body">Search</label>
                  </div>
                </form>
              </div>
              <span class="su_menu-toggle">
                <span class="su_icon su_icon-menu material-icons">menu</span>
                <span class="su_icon su_icon-close material-icons">close</span>
              </span>
            </div>
          </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>A simple modal</h2>

          <p>This simple modal component provides clean and quick way to display simple textual information to the user.</p>
          <p>To display the information in a modal, a toggle element is needed with the following "data" attributes set:</p>

          <ul>
            <li>
              <code class="su_code">data-modal-trigger="simple"</code>
            </li>
            <li>
              <code class="su_code">data-info="This is a short information that is being presented to the user in a simple modal."</code>
            </li>
          </ul>

          <p>Click the buttons bellow to see different notifications.</p>

          <button class="su_btn su_btn-secondary" type="button" data-modal-trigger="simple" data-info="Nothing to see here, please move along!">Modal 1</button>

          <button class="su_btn su_btn-secondary" type="button" data-modal-trigger="simple" data-info="Sorry, the search is temporary disabled.">Modal 2</button>

          <button class="su_btn su_btn-secondary" type="button" data-modal-trigger="simple" data-info="No can do now, come back later, dude!">Modal 3</button>

          <div class="su_modal su_modal-simple" data-modal-type="simple">
            <span class="su_modal-close material-icons">close</span>
            <div class="su_modal-content su_align-center"></div>
          </div>


          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Typography</h2>

          <h1>Heading 1</h1>
          <h2>Heading 2</h2>
          <h3>Heading 3</h3>
          <p>Heading 4</p>
          <h5>Heading 5</h5>
          <h6>Heading 6</h6>


          <div>
            <p>
              <em>Seed-ui</em> uses a <em>Responsive Typography</em> system for headings.
            </p>
          </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <div class="g-container">
            <h2>Progress Bars</h2>

            <p>
              Add the class <code class="su_code">.su_progress-bar</code> to implement a progress bar element.
              Then, add the <code class="su_code">.su_bar</code> class to the child span element.  Examples:
            </p>

            <p>
              To implement the progression add a value between 0% and 100% to the
              <code class="su_code">width</code> property of a bar element.
            </p>

            <p>
              Add one of the following classes to a <em>bar</em> to get some extra colors:
            <ul>
              <li>Add the class <code class="su_code">.su_bar--success</code> to get a light green bar</li>
              <li>Add the class <code class="su_code">.su_bar--warn</code> to get a light pink bar</li>
              <li>Add the class <code class="su_code">.su_bar--error</code> to get a dark pink bar</li>
            </ul>
            </p>

            <div class="su_progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar su_bar--success" style="width: 10%"></span>
            </div>

            <div class="su_progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar su_bar--warn" style="width: 25%"></span>
            </div>

            <div class="su_progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar su_bar--error" style="width: 50%"></span>
            </div>

            <div class="su_progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar" style="width: 100%"></span>
            </div>

            <p>
              Add the class <code class="su_code">.su_progress-bar--rounded</code> to a progress-bar element to make its borders rounded.  Examples:
            </p>

            <div class="su_progress-bar su_progress-bar--rounded" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar su_bar--warn" style="width: 25%"></span>
            </div>

            <div class="su_progress-bar su_progress-bar--rounded" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar" style="width: 100%"></span>
            </div>

            <div class="su_space-top--medium"></div>
            <hr>
            <div class="su_space-top--medium"></div>

            <h2>Infinite Loading</h2>

            <h3>Backward</h3>

            <p>
              Add the class <code class="su_code">.su_progress-bar--indeterminate</code>
              to a progress-bar element to make it an <em>indeterminated</em> progress bar.  Examples:
            </p>
<commit_msg>Last changes?<commit_after><!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Seed UI</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="prod/main.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <div class="su_line">
            <h1 class="su_cell su_cells_12">Seed UI Garden</h1>
        </div>
      </header>
      <div class="su_line">
        <div class="su_cell su_cells_3">
          <h2 class="su_align-center su_background-dark">UI Components</h2>
          <nav class="su_list su_align-right" id="nav_links">
            <a href="#" class="su_uppercase su_list-item active">Utility classes</a>
            <a href="#" class="su_uppercase su_list-item">Tooltip</a>
            <a href="#" class="su_uppercase su_list-item">Accordion</a>
            <a href="#" class="su_uppercase su_list-item">Buttons</a>
            <a href="#" class="su_uppercase su_list-item">Alerts</a>
            <a href="#" class="su_uppercase su_list-item">Tables</a>
            <a href="#" class="su_uppercase su_list-item">Carousel</a>
            <a href="#" class="su_uppercase su_list-item">Navigation</a>
            <a href="#" class="su_uppercase su_list-item">Eyelids</a>
            <a href="#" class="su_uppercase su_list-item">Modal</a>
            <a href="#" class="su_uppercase su_list-item">Typography</a>
            <a href="#" class="su_uppercase su_list-item">Progress Bars</a>
            <a href="#" class="su_uppercase su_list-item">Infinite loading</a>
            <a href="#" class="su_uppercase su_list-item">Forms</a>
            <a href="#" class="su_uppercase su_list-item">Dropdowns</a>
            <a href="#" class="su_uppercase su_list-item">Lists</a>
            <a href="#" class="su_uppercase su_list-item">Cards</a>
            <a href="#" class="su_uppercase su_list-item">Combobox</a>
            <a href="#" class="su_uppercase su_list-item">Sneak Peek</a>
            <a href="#" class="su_uppercase su_list-item">Grid</a>
            <a href="#" class="su_uppercase su_list-item">Tabs</a>
            <a href="#" class="su_uppercase su_list-item">Video Embed</a>

          </nav>
        </div>
        <div class="su_cell su_cells_9 su_demo_hackhaton">

            <h2>Utilities Component</h2>
            <h3>Float Classes</h3>
            <p>Add the class <code class="su_code">.su_left</code> or <code class="su_code">.su_right</code> to float an element left or right respectively.  Then, add the <code class="su_code">.su_clear</code> class to clear floated elements.  Examples:</p>
            <div class="su_right su_primary-bg su_radius brian-div"><i class="material-icons">settings</i>Div 1 Floated Right</div>
            <div class="su_left su_foreground-bg su_radius brian-div"><i class="material-icons">menu</i>Div 2 Floated Left</div>
            <div class="su_clear su_background-bg su_radius brian-div"><i class="material-icons">face</i>Cleared Div</div>

            <div class="su_space-top--medium"></div>
            <h3>Full Width Class</h3>
            <p>The full width classes expand the element they are applied to to the full width of it's parent element using the <code class="su_code">.su_full-width</code> class.  Example:</p>
            <div class="su_foreground-bg su_radius brian-div">
              A container parent element.
              <div class="su_primary-bg-light su_full-width brian-div"> Full Width Content.</div>
              Some more content.
            </div>

            <div class="su_space-top--medium"></div>
            <h3>Radius &amp; Round Classes</h3>
            <p>Add the class <code class="su_code">.su_radius</code> to apply the default radius size on elements.  Add the class <code class="su_code">.su_round</code> class to create a pill or capsule rounding effect on elements.  They can be applied to different types of elements.  Examples:</p>
            <p>This paragraph highlights the radius effect on the phrase <span class="su_radius su_accent-bg-light brian-span su_background-light">"Seed UI"</span> and the rounding effect applied to a Seed UI button and a div:</p>

            <div class="su_space-top--small"></div>
            <button type="button" class="su_btn su_btn-primary su_round">Button With Round Class Applied</button>
            <div class="su_space-top--small"></div>
            <div class="su_round su_background-bg">Div With Round Class Applied</div>

            <div class="su_space-top--medium"></div>
            <h3>Color Classes</h3>
            <h5>Seed UI comes with a number of built in colors that can be customized to your website's style guide.  You can change the background color of elements or the text color by applying their associated classes.  Examples:</h5>

            <h5>Background Color Classes</h5>
            <table class="su_table su_table-bordered">
              <thead>
              <tr>
                <th>Light Background Colors</th>
                <th>Base Background Colors</th>
                <th>Dark Background Colors</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="su_primary-bg-light">.su_primary-bg-light</td>
                <td class="su_primary-bg">.su_primary-bg</td>
                <td class="su_primary-bg-dark">.su_primary-bg-dark</td>
              </tr>
              <tr>
                <td class="su_accent-bg-light">.su_accent-bg-light</td>
                <td class="su_accent-bg">.su_accent-bg</td>
                <td class="su_accent-bg-dark">.su_accent-bg-dark</td>
              </tr>
              <tr>
                <td class="su_secondary-bg-light">.su_secondary-bg-light</td>
                <td class="su_secondary-bg">.su_secondary-bg</td>
                <td class="su_secondary-bg-dark">.su_secondary-bg-dark</td>
              </tr>
              <tr>
                <td class="su_foreground-bg-light">.su_foreground-bg-light</td>
                <td class="su_foreground-bg">.su_foreground-bg</td>
                <td class="su_foreground-bg-dark">.su_foreground-bg-dark</td>
              </tr>
              <tr>
                <td class="su_background-bg-light">.su_background-bg-light</td>
                <td class="su_background-bg">.su_background-bg</td>
                <td class="su_background-bg-dark">.su_background-bg-dark</td>
              </tr>
              </tbody>
            </table>

            <div class="su_space-top--small"></div>
            <h5>Text Color Classes</h5>
            <table class="su_table su_table-bordered">
              <thead>
              <tr>
                <th>Light Text Colors</th>
                <th>Base Text Colors</th>
                <th>Dark Text Colors</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="su_primary-light">.su_primary-light</td>
                <td class="su_primary">.su_primary</td>
                <td class="su_primary-dark">.su_primary-dark</td>
              </tr>
              <tr>
                <td class="su_accent-light">.su_accent-light</td>
                <td class="su_accent">.su_accent</td>
                <td class="su_accent-dark">.su_accent-dark</td>
              </tr>
              <tr>
                <td class="su_secondary-light">.su_secondary-light</td>
                <td class="su_secondary">.su_secondary</td>
                <td class="su_secondary-dark">.su_secondary-dark</td>
              </tr>
              <tr>
                <td class="su_foreground-light">.su_foreground-light</td>
                <td class="su_foreground">.su_foreground</td>
                <td class="su_foreground-dark">.su_foreground-dark</td>
              </tr>
              <tr>
                <td class="su_background-light">.su_background-light</td>
                <td class="su_background">.su_background</td>
                <td class="su_background-dark">.su_background-dark</td>
              </tr>
              </tbody>
            </table>

            <div class="su_space-top--medium"></div>
            <h3>Visibility &amp; Hidden Classes</h3>
            <p>Add the class <code class="su_code">.su_hide</code> to an element to remove it from the page view.  The number 4 <code class="su_code">span</code> element in the following list is hidden:</p>
            <span class="su_accent-bg-light brian-span su_radius">1</span>
            <span class="su_accent-bg-light brian-span su_radius">2</span>
            <span class="su_accent-bg-light brian-span su_radius">3</span>
            <span class="su_accent-bg-light brian-span su_radius su_hide">4</span>
            <span class="su_accent-bg-light brian-span su_radius">5</span>
            <span class="su_accent-bg-light brian-span su_radius">6</span>
            <p>Add the class <code class="su_code">.su_invisible</code> to make the visibility of an element hidden but still retain its space in the DOM.  The number 4 <code class="su_code">span</code> element in the following list is invisible:</p>
            <span class="su_accent-bg-light brian-span su_radius">1</span>
            <span class="su_accent-bg-light brian-span su_radius">2</span>
            <span class="su_accent-bg-light brian-span su_radius">3</span>
            <span class="su_accent-bg-light brian-span su_radius su_invisible">4</span>
            <span class="su_accent-bg-light brian-span su_radius">5</span>
            <span class="su_accent-bg-light brian-span su_radius">6</span>

            <div class="su_space-top--medium"></div>
            <h3>Screen Reader Only Class</h3>
            <p>The next paragraph is only accessible to screen readers since it has the <code class="su_code">.su_sr-only</code> class applied to it.</p>
            <p class="su_sr-only">The quick brown fox jumped over the lazy dog.</p>

            <div class="su_space-top--medium"></div>
            <h3>Text Alignment Classes</h3>
            <p>Use the following classes to change the text alignment on elements.</p>
            <div class="su_background-bg brian-div su_radius"><code class="su_code">.su_align-left</code> for left alignment.<i class="material-icons su_right su_accent">format_align_left</i><p class="su_align-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias culpa, libero qui quo esse natus aliquid laborum harum! At atque ex voluptatum error rerum, quis ipsa odit esse inventore laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias perspiciatis rem provident voluptas quia distinctio, nesciunt laborum eligendi? Quisquam praesentium eum consequuntur, adipisci enim mollitia. Iste impedit esse a laborum.</p></div>
            <div class="su_background-bg brian-div su_radius"><code class="su_code">.su_align-center</code class="su_code"> for center alignment.<i class="material-icons su_right su_accent">format_align_center</i><p class="su_align-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic atque corporis blanditiis magnam numquam unde ducimus, veniam adipisci quo ipsam est, iste deleniti, consectetur iusto, et animi quidem voluptatum asperiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut odio distinctio modi ipsa, doloribus optio molestiae beatae libero. Iure iusto aliquid laborum perferendis expedita quibusdam praesentium, doloribus optio, maxime cumque.</p></div>
            <div class="su_background-bg brian-div su_radius"><code class="su_code">.su_align-right</code> for right alignment.<i class="material-icons su_right su_accent">format_align_right</i><p class="su_align-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum ab natus asperiores est adipisci, laborum repellat cupiditate cum maiores deleniti mollitia. Totam ut molestias porro vero culpa, sit ullam officiis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis alias voluptas aliquid odio quasi accusantium quos repellendus velit. Dolores, eos ab. Provident hic praesentium laboriosam porro. Quod earum quisquam neque!</p></div>
            <div class="su_background-bg brian-div su_radius"><code class="su_code">.su_align-justify</code> for justified alignment.<i class="material-icons su_right su_accent">format_align_justify</i><p class="su_align-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non dolorum fugiat aperiam eius necessitatibus ea, consequuntur assumenda ad, blanditiis et debitis consequatur eveniet dolor architecto magnam quas. Ipsa, similique, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sed iure molestiae, aliquid quibusdam eaque modi hic quo cumque omnis harum nisi officiis necessitatibus, doloribus natus nemo adipisci accusantium laudantium!</p></div>

            <div class="su_space-top--medium"></div>
            <h3>Text Transform Classes</h3>
            <p class="su_lowercase">Use the <code class="su_code">.su_lowercase</code> class to transform text of an element to all lowercase.</p>
            <p class="su_uppercase">use the <code class="su_code">.su_uppercase</code> class to transform text of an element to all uppercase.</p>
            <p class="su_capitalize">Use the <code class="su_code">.su_capitalize</code> class to transform text of an element to use uppercase letters for the beginning of each word.</p>

            <div class="su_space-top--medium"></div>
            <h3>Code Class</h3>
            <p>Add the class <code class="su_code">.su_code</code> to give some default styling to displayed computer code.  Examples:</p>
<pre class="su_code">
    <code>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
    &lt;/html&gt;</code>
</pre>

            <div class="su_space-top--medium"></div>
            <h3>Spacer Classes</h3>
            <p>A collection of classes that have varying margin values on different sides for quick spacing fixes.</p>

            <p><code class="su_code">.su_space-top--small</code> applies a <code class="su_code">margin-top: 20px</code></p>
            <p><code class="su_code">.su_space-top--medium</code> applies a <code class="su_code">margin-top: 50px</code></p>
            <p><code class="su_code">.su_space-top--large</code> applies a <code class="su_code">margin-top: 100px</code></p>

            <p><code class="su_code">.su_space-right--small</code> applies a <code class="su_code">margin-right: 20px</code></p>
            <p><code class="su_code">.su_space-right--medium</code> applies a <code class="su_code">margin-right: 50px</code></p>
            <p><code class="su_code">.su_space-right--large</code> applies a <code class="su_code">margin-right: 100px</code></p>

            <p><code class="su_code">.su_space-bottom--small</code> applies a <code class="su_code">margin-bottom: 20px</code></p>
            <p><code class="su_code">.su_space-bottom--medium</code> applies a <code class="su_code">margin-bottom: 50px</code></p>
            <p><code class="su_code">.su_space-bottom--large</code> applies a <code class="su_code">margin-bottom: 100px</code></p>

            <p><code class="su_code">.su_space-left--small</code> applies a <code class="su_code">margin-left: 20px</code></p>
            <p><code class="su_code">.su_space-left--medium</code> applies a <code class="su_code">margin-left: 50px</code></p>
            <p><code class="su_code">.su_space-left--large</code> applies a <code class="su_code">margin-left: 100px</code></p>

            <div class="su_space-top--medium"></div>
            <h3>Center Content Class</h3>
            <p>Add the <code class="su_code">.su_center-content</code> class to an elementfor an easy way to add auto margins for centering content blocks.  Example:</p>
            <div class="su_center-content brian-div2 su_primary-bg-dark su_radius">This div box is centered on this page since it has the <code class="su_code">.su_center-content</code> class applied to it.</div>

            <div class="su_space-top--medium"></div>
            <hr>
            <div class="su_space-top--medium"></div>

            <h2>Tooltip Component</h2>
            <p class="su_contains_tooltip">The tooltip component allows you to add useful pieces of information <span class="su_tooltip">hidden<span class="su_tooltip-text su_radius">Yes, like this you see.</span></span> from normal view so users can choose to hover over them or not to find out more.<span class="su_tooltip su_tip_top">natus (tooltip top)<span class="su_tooltip-text su_radius">natus - born, arisen</span></span> <span title="Auto Tooltip">accusamus</span> nihil maxime, consequuntur pariatur mollitia nobis atque consectetur sunt vitae fuga, esse est? Cupiditate voluptas autem laboriosam.</p>
            <p class="su_contains_tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non alias recusandae natus accusamus nihil maxime, consequuntur <span class="su_tooltip">pariatur (tooltip left)<span class="su_tooltip-text su_radius">pariatur - to bear</span></span> mollitia nobis atque consectetur sunt vitae fuga, esse est? <span class="su_tooltip">Cupiditate (tooltip right)<span class="su_tooltip-text su_radius">Cupiditate - enthusiasm, eagerness, passion</span></span> voluptas autem laboriosam.</p>

            <div class="su_space-top--medium"></div>
            <hr>
            <div class="su_space-top--medium"></div>

            <h2>Accordion Component</h2>
            <p>The Seed UI Accordion let's you customize some of its looks depending on which classes are applied to its components.  Also, did you know that the parts of an actual accordion that squish are called bellows?  So think of these tabs as bellows.</p>
            <div class="su_accordion">
              <div class="su_bellow">
                <input id="bellow1" type="radio" name="bellows">
                <label for="bellow1">Bellow One</label>
                <div class="su_bellow-content su_background-bg">
                  <p>This bellow has a class of <code class="su_code">su_background-bg</code> on it giving the content it's background color. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                </div>
              </div>
              <div class="su_bellow">
                <input id="bellow2" type="radio" name="bellows">
                <label for="bellow2">Bellow Two</label>
                <div class="su_bellow-content su_background-bg">
                  <p>This bellow has a class of <code class="su_code">su_background-bg</code> on it giving the content it's background color. Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                </div>
              </div>
              <div class="su_bellow">
                <input id="bellow3" type="radio" name="bellows">
                <label for="bellow3" class="su_radius">Bellow Three</label>
                <div class="su_bellow-content">
                  <p>This bellow has a class of <code class="su_code">su_radius</code> on its label giving the bellow its curved corners.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                </div>
              </div>
              <div class="su_bellow">
                <input id="bellow4" type="radio" name="bellows">
                <label for="bellow4" class="su_round">Bellow Four</label>
                <div class="su_bellow-content">
                  <p>This bellow has a class of <code class="su_code">su_round</code> on its label giving the bellow its ultra curved corners.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora aperiam, itaque maiores laudantium earum delectus! Laboriosam rerum eius sed, corporis illum, nostrum qui provident ad, enim dolorum, quod quia!</p>
                </div>
              </div>
            </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2 id="top-of-page">Buttons</h2>
          <h3>Semantic buttons</h3>
          <button type="button" class="su_btn su_btn-primary">Primary</button>
          <button type="button" class="su_btn su_btn-secondary">Secondary</button>
          <button type="button" class="su_btn su_btn-warning">Warning</button>
          <button type="button" class="su_btn su_btn-danger">Danger</button>

          <div class="su_space-top--medium"></div>
          <h3>Floating buttons</h3>
          <a href="#" class="su_btn-floating su_red"><i class="material-icons">accessibility</i></a>
          <a href="#" class="su_btn-floating su_green-light"><i class="material-icons">android</i></a>
          <a href="#" class="su_btn-floating su_green-dark"><i class="material-icons">code</i></a>
          <a href="#" class="su_btn-floating su_pink"><i class="material-icons">description</i></a>

          <div class="su_space-top--medium"></div>
          <h3 id="top-of-page">Back to top button</h3>
          <p>Example is at the bottom right corner of this page. Add the id "top-of-page" to an element at the top to activate.</p>
          <a href="#" class="su_btn-to-top su_pink"><i class="material-icons">keyboard_arrow_up</i></a>

          <div class="su_space-top--medium"></div>
          <h3>Button with icons</h3>
          <button type="button" class="su_btn su_btn-primary"><i class="material-icons left">autorenew</i>Left</button>
          <button type="button" class="su_btn su_btn-secondary">Right<i class="material-icons right">done</i></button>

          <div class="su_space-top--medium"></div>
          <h3>Checkboxes</h3>
          <p>Make sure the corresponding labels and inputs have the same for/id attributes</p>
          <div class="su_btn-group">
            <input type="checkbox" class="su_checkbox-input" id="option-1">
            <label for="option-1" class="su_btn su_btn-warning su_checkbox-label">
              Option 1
            </label>
            <input type="checkbox" class="su_checkbox-input" id="option-2">
            <label for="option-2" class="su_btn su_btn-warning su_checkbox-label">
              Option 2
            </label>
            <input type="checkbox" class="su_checkbox-input" id="option-3">
            <label for="option-3" class="su_btn su_btn-warning su_checkbox-label">
              Option 3
            </label>
          </div>

          <div class="su_space-top--medium"></div>

          <h3>Radio Buttons</h3>
          <div class="su_btn-group">
            <input type="radio" name="su_radio" class="su_radio-input" id="option-4">
            <label for="option-4" class="su_btn su_btn-danger su_radio-label">
              Option 4
            </label>
            <input type="radio" name="su_radio" class="su_radio-input" id="option-5">
            <label for="option-5" class="su_btn su_btn-danger su_radio-label">
              Option 5
            </label>
            <input type="radio" name="su_radio" class="su_radio-input" id="option-6">
            <label for="option-6" class="su_btn su_btn-danger su_radio-label">
              Option 6
            </label>
          </div>

          <div class="su_space-top--medium"></div>

          <h3>Switches</h3>
          <div class="su_switch-thin">
            <input type="checkbox" name="su_switch-thin" class="su_switch-thin-checkbox" id="su-switch-thin" checked>
            <label class="su_switch-thin-label" for="su-switch-thin">
              <span class="su_switch-thin-switch"></span>
            </label>
          </div>
          <br>
          <div class="su_switch-fat">
            <input type="checkbox" name="su_switch-fat" class="su_switch-fat-checkbox" id="su-switch-fat" checked>
            <label class="su_switch-fat-label" for="su-switch-fat">
              <span class="su_switch-fat-switch"></span>
            </label>
          </div>
          <br>
          <div class="su_switch-square">
            <input type="checkbox" name="su_switch-square" class="su_switch-square-checkbox" id="su-switch-square" checked>
            <label class="su_switch-square-label" for="su-switch-square">
              <span class="su_switch-square-switch"></span>
            </label>
          </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Alerts</h2>
          <div class="su_alert su_alert-success"><i class="su_alert-star material-icons">star</i>This is a success alert.<i class="su_alert-close material-icons">close</i></div>
          <br>
          <div class="su_alert su_alert-info"><i class="su_alert-star material-icons">info</i>This is an info alert.<i class="su_alert-close material-icons">close</i></div>
          <br>
          <div class="su_alert su_alert-warning"><i class="su_alert-star material-icons">warning</i>This is a warning.<i class="su_alert-close material-icons">close</i></div>
          <br>
          <div class="su_alert su_alert-error"><i class="su_alert-star material-icons">error</i>This is an error alert.<i class="su_alert-close material-icons">close</i></div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Tables</h2>
          <p>All table styles can be combined as desired using the associated classes.</p>

          <h3>Basic table</h3>
          <table class="su_table">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>

          <h3>Bordered table</h3>
          <table class="su_table su_table-bordered">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>

          <h3>Striped table</h3>
          <table class="su_table su_table-striped">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>

          <h3>Hover table</h3>
          <table class="su_table su_table-hover">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>

          <h3>Table with all classes</h3>
          <table class="su_table su_table-hover su_table-striped su_table-bordered">
            <thead>
            <tr>
              <th>Beans</th>
              <th>Apples</th>
              <th>Oranges</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Green</td>
              <td>Brown</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>Green</td>
              <td>Yellow</td>
            </tr>
            <tr>
              <td>Orange</td>
              <td>Orange</td>
              <td>Orange</td>
            </tr>
            </tbody>
          </table>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Carousel</h2>
          <div class="su_line">
            <div class="su_cell su_cells_8">
              <div class="su_carousel-wrap">
                <ul class="su_carousel">
                  <li class="su_carousel-item su_carousel-visible"><img src="http://lorempixel.com/1000/500/food/6" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/1" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/2" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/3" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/4" alt=""></li>
                  <li class="su_carousel-item"><img src="http://lorempixel.com/1000/500/food/5" alt=""></li>
                </ul>
                <div class="su_carousel-controls">
                  <button class="su_carousel-prev su_btn-floating su_green-light"><i class="material-icons">keyboard_arrow_left</i></button>
                  <button class="su_carousel-next su_btn-floating su_green-light"><i class="material-icons">keyboard_arrow_right</i></button>
                </div>
              </div>
            </div>
          </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Eyelids</h2>

          <p>Eyelids is an innovative web component that can be useful to the people who read a lot on the computer screen. It helps you focus on the text or other content in cases of pages with a long chunks of text, or even to help cover up the distracting parts of the complex web page. To use it, just hit <code class="su_code">Shift + S</code> on the keyboard. The eyelids will close down vertically on your mouse position and will follow its movement allowing you a clean horizontal area for better focus on the content. To dismiss it, just hit <code class="su_code">Shift + S</code> again.</p>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Basic Navigation Bar</h2>

          <p>Code applied:</p>

          <pre class="su_code su_align-center"><code>&lt;div class="su_navigation"&gt;</code></pre>

          <div class="su_navigation">
            <div class="su_navigation-container">
              <span class="su_logo">SeedUI</span>
              <nav class="su_menu-main" role="navigation">
                <ul>
                  <li><a href="#item1">Item 1</a></li>
                  <li><a href="#item2">Item 2</a></li>
                  <li><a href="#item3">Item 3</a></li>
                  <li><a href="#item4">Item 4</a></li>
                </ul>
              </nav>
              <div class="su_search" role="search">
                <form>
                  <span class="su_submit-search material-icons">search</span>
                  <div class="su_search-field">
                    <input type="text" name="search" id="su_search-body">
                    <label class="su_search-label" for="su_search-body">Search</label>
                  </div>
                </form>
              </div>
              <span class="su_menu-toggle">
                <span class="su_icon su_icon-menu material-icons">menu</span>
                <span class="su_icon su_icon-close material-icons">close</span>
              </span>
            </div>
          </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>A simple modal</h2>

          <p>This simple modal component provides clean and quick way to display simple textual information to the user.</p>
          <p>To display the information in a modal, a toggle element is needed with the following "data" attributes set:</p>

          <ul>
            <li>
              <code class="su_code">data-modal-trigger="simple"</code>
            </li>
            <li>
              <code class="su_code">data-info="This is a short information that is being presented to the user in a simple modal."</code>
            </li>
          </ul>

          <p>Click the buttons bellow to see different notifications.</p>

          <button class="su_btn su_btn-secondary" type="button" data-modal-trigger="simple" data-info="Nothing to see here, please move along!">Modal 1</button>

          <button class="su_btn su_btn-secondary" type="button" data-modal-trigger="simple" data-info="Sorry, the search is temporary disabled.">Modal 2</button>

          <button class="su_btn su_btn-secondary" type="button" data-modal-trigger="simple" data-info="No can do now, come back later, dude!">Modal 3</button>

          <div class="su_modal su_modal-simple" data-modal-type="simple">
            <span class="su_modal-close material-icons">close</span>
            <div class="su_modal-content su_align-center"></div>
          </div>


          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <h2>Typography</h2>

          <h1>Heading 1</h1>
          <h2>Heading 2</h2>
          <h3>Heading 3</h3>
          <p>Heading 4</p>
          <h5>Heading 5</h5>
          <h6>Heading 6</h6>


          <div>
            <p>
              <em>Seed-ui</em> uses a <em>Responsive Typography</em> system for headings.
            </p>
          </div>

          <div class="su_space-top--medium"></div>
          <hr>
          <div class="su_space-top--medium"></div>

          <div class="g-container">
            <h2>Progress Bars</h2>

            <p>
              Add the class <code class="su_code">.su_progress-bar</code> to implement a progress bar element.
              Then, add the <code class="su_code">.su_bar</code> class to the child span element.  Examples:
            </p>

            <p>
              To implement the progression add a value between 0% and 100% to the
              <code class="su_code">width</code> property of a bar element.
            </p>

            <p>
              Add one of the following classes to a <em>bar</em> to get some extra colors:
            <ul>
              <li>Add the class <code class="su_code">.su_bar--success</code> to get a light green bar</li>
              <li>Add the class <code class="su_code">.su_bar--warn</code> to get a light pink bar</li>
              <li>Add the class <code class="su_code">.su_bar--error</code> to get a dark pink bar</li>
            </ul>
            </p>

            <div class="su_progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar su_bar--success" style="width: 10%"></span>
            </div>

            <div class="su_progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar su_bar--warn" style="width: 25%"></span>
            </div>

            <div class="su_progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar su_bar--error" style="width: 50%"></span>
            </div>

            <div class="su_progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar" style="width: 100%"></span>
            </div>

            <p>
              Add the class <code class="su_code">.su_progress-bar--rounded</code> to a progress-bar element to make its borders rounded.  Examples:
            </p>

            <div class="su_progress-bar su_progress-bar--rounded" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar su_bar--warn" style="width: 25%"></span>
            </div>

            <div class="su_progress-bar su_progress-bar--rounded" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
              <span class="su_bar" style="width: 100%"></span>
            </div>

            <div class="su_space-top--medium"></div>
            <hr>
            <div class="su_space-top--medium"></div>

            <h2>Infinite Loading</h2>

            <h3>Forward</h3>

            <p>
              Add the class <code class="su_code">.su_progress-bar--indeterminate</code>
              to a progress-bar element to make it an <em>indeterminated</em> progress bar.  Examples:
            </p>

{'fraction_non_alphanumeric': 0.1411679993936408, 'fraction_numerical': 0.007655284799333005, 'mean_word_length': 2.220847912767516, 'pattern_counts': {'":': 0, '<': 2363, '<?xml version=': 0, '>': 2363, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 60, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2294449', 'n_tokens_mistral': 25302, 'n_tokens_neox': 24301, 'n_words': 5659}