On Most High Styleguide

A Sample Styleguide Created By Eddie Ortiz @ Ortizworks.

Colors

On Most High uses four main colors: #efebe3, #2e2e2e, #242424 & #57C5A0.

.bg-light-grey
.bg-dark-grey
.bg-medium-grey
.bg-seafoam

Typography

Maven Pro - 100px

Hello.

Maven Pro Italic - 80px

Lorem ipsum

Maven Pro Bold - 38px

Lorem ipsum dolor sit amet,

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buttons

Show All Read More

<a href="#" class="button black">Load more</a>

Lists

Unordered

Item 1
Item 2
Item 3

<ul class="list_huge">
  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>
</ul>

Ordered

Item 1
Item 2
Item 3

<ol class="list_huge">
  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>
</ol>

Forms

Email input

Password input

Textarea

Select field

File input

Radio inputCheckbox input

Number input

Date input

Time input

<form class="">
  <fieldset>
    <div class="row">
      <div class="medium-6 column">
        <input type="text" placeholder="Placeholder" class="g-wide--full">
      </div>

      <div class="medium-6 column">
        <input type="text" value="Disabled" disabled class="g-wide--full">
      </div>
    </div>

    <div class="row">
      <div class="medium-6 column">
        <label>Email input</label><input type="email">
      </div>

      <div class="medium-6 column">
        <label>Password input</label><input type="password" value="password">
      </div>
    </div>

    <div class="row">
      <div class="medium-6 column">
        <label>Textarea</label>
        <textarea cols="30" rows="5">
Textarea text
</textarea>
      </div>

      <div class="medium-6 column">
        <label>Select field</label><select>
          <option>
            Option 01
          </option>

          <option>
            Option 02
          </option>
        </select>
      </div>

      <div class="medium-6 column">
        <label>File input</label><input type="file">
      </div>
    </div>

    <div class="row">
      <div class="medium-6 column">
        <label><input type="radio" name="rad">Radio
        input</label><label><input type="checkbox">Checkbox input</label>
      </div>

      <div class="medium-6 column">
        <label>Number input</label><input type="number" value="5" min="0" max=
        "10">
      </div>
    </div>

    <div class="row">
      <div class="medium-6 column">
        <label>Date input</label><input type="date">
      </div>

      <div class="medium-6 column">
        <label>Time input</label><input type="time">
      </div>
    </div>
  </fieldset>
</form>

Tables

Title	Options for the title
Option 1	1
Option 2	2
Option 3	3
Option 4	4
option 5	5
Option 6	6
Option 7	7

<table class="">
  <thead>
    <tr>
      <th>Offices</th>

      <th>Job Openings in Technology</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Atlanta</td>

      <td>6</td>
    </tr>

    <tr>
      <td>Brooklyn</td>

      <td>12</td>
    </tr>

    <tr>
      <td>London</td>

      <td>1</td>
    </tr>

    <tr>
      <td>Rio de Janeiro</td>

      <td>3</td>
    </tr>

    <tr>
      <td>San Francisco</td>

      <td>3</td>
    </tr>

    <tr>
      <td>Singapore</td>

      <td>2</td>
    </tr>

    <tr>
      <td>Washington DC</td>

      <td>2</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Templates

Home