Typography

The standard font DesignUp uses is Open Sans. We have included the font files with our framework. We bundle our framework with the latest iteration of Open Sans Google has released. It comes with 5 different font weights you can use: 300, 400, 500, 600, 800.

Headings

h1. Designup heading

h2. Designup heading

h3. Designup heading

h4. Designup heading

h5. Designup heading
<h1>h1. Designup heading</h1>
<h2>h2. Designup heading</h2>
<h3>h3. Designup heading</h3>
<h4>h4. Designup heading</h4>
<h5>h5. Designup heading</h5>

Bodytext

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat.

<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat.</p>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>

Buttons

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

Default buttons

Link button

<button type="button" name="button">Default button</button>
<a class="button" href="#">Link button</a>
<button class="small" type="button" name="button">Small button</button>
<button class="outline" type="button" name="button">Outline button</button>
<button class="small outline" type="button" name="button">Outline button</button>

Color buttons







<button class="button-blue" type="button" name="button">Blue</button>
<button class="button-green" type="button" name="button">Green</button>
<button class="button-red" type="button" name="button">Red</button>
<button class="button-orange" type="button" name="button">Orange</button>
<button class="button-purple" type="button" name="button">Purple</button>
...
<button class="outline button-blue" type="button" name="button">Blue</button>
<button class="outline button-green" type="button" name="button">Green</button>
<button class="outline button-red" type="button" name="button">Red</button>
<button class="outline button-orange" type="button" name="button">Orange</button>
<button class="outline button-purple" type="button" name="button">Purple</button>
...
<button class="small button-blue" type="button" name="button">Blue</button>
<button class="small button-green" type="button" name="button">Green</button>
<button class="small button-red" type="button" name="button">Red</button>
<button class="small button-orange" type="button" name="button">Orange</button>
<button class="small button-purple" type="button" name="button">Purple</button>
...
<button class="small outline button-blue" type="button" name="button">Blue</button>
<button class="small outline button-green" type="button" name="button">Green</button>
<button class="small outline button-red" type="button" name="button">Red</button>
<button class="small outline button-orange" type="button" name="button">Orange</button>
<button class="small outline button-purple" type="button" name="button">Purple</button>
...

Forms

Style individual form controls and utilize common layouts. We use basic elements’ default styles for cross browser consistency and easier manipulation later.

Example form

<form>
  <label for="name">Name</label>
  <input type="text">
  <label for="email">Email address</label>
  <input type="email">
  <label>
    <input type="checkbox"> Checkbox
  </label>
  <label>
    <input type="radio" name="" checked> Herp
  </label>
  <label>
    <input type="radio" name=""> Derp
  </label>
  <button type="submit">Submit</button>
</form>

Selects

<form>
  <select>
    <option>Choose an option</option>
    <option>Git</option>
    <option>Subversion</option>
    <option>Social Coding</option>
    <option>Beets</option>
    <option>Bears</option>
    <option>Battlestar Galactica Part Two</option>
  </select>
</form>

Layout

DesignUp's layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it’s just containers, rows, and columns.

Grid

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
<div class="row">
  <div class="one">One</div>
  <div class="eleven">Eleven</div>
</div>
<div class="row">
  <div class="two">Two</div>
  <div class="ten">Ten</div>
</div>
<div class="row">
  <div class="three">Three</div>
  <div class="nine">Nine</div>
</div>
<div class="row">
  <div class="four">Four</div>
  <div class="eight">Eight</div>
</div>
<div class="row">
  <div class="five">Five</div>
  <div class="seven">Seven</div>
</div>
<div class="row">
  <div class="six">Six</div>
  <div class="six">Six</div>
</div>
...

Lists

The broken display of lists is intentional as DesignUp globally resets these elements for the time being.

Unordered

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3
<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Ordered

  1. Item 1
  2. Item 2
    1. Item 2.1
    2. Item 2.2
  3. Item 3
<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ol>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ol>
  </li>
  <li>Item 3</li>
</ol>

Media

Media can be styled in different ways using DesignUp with css3.

Image

Simple

Image's caption.

Hover

Image's caption.

Rounded

Circle

<figure>
  <img src="#" alt="" />
</figure>
<figcaption>
  Image's caption.
</figcaption>

<figure class="caption-hover">
  <img src="#" alt="" />
  <figcaption>
    Image's caption.
  </figcaption>
</figure>

<figure>
  <img class="rounded" src="#" alt="" />
</figure>

<figure>
  <img class="circle" src="#" alt="" />
</figure>

Gallery

<div class="row">
  <div class="four">
    <figure>
      <img src="#" alt="" />
    </figure>
  </div>
  <div class="four">
    <figure>
      <img src="#" alt="" />
    </figure>
  </div>
  <div class="four">
    <figure>
      <img src="#" alt="" />
    </figure>
  </div>
</div>
...

Tables

Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible. In addition, to improve mobile experience, all tables on mobile-screen widths are centered automatically.

Default Table

Name Item Name Item Price
Jahdiel GoJahddy $9.99
Renato Michi $7.00
Melissa Melymely $6.05
Edwin Ed $5.14
Alison Ali $4.03
<table>
  <thead>
     <tr>
       <th>Name</th>
       <th>Item Name</th>
       <th>Item Price</th>
     </tr>
  </thead>
  <tbody>
     <tr>
       <td>Jahdiel</td>
       <td>GoJahddy</td>
       <td>$9.99</td>
     </tr>
     ...
  </tbody>
</table>

Striped Table

Name Item Name Item Price
Jahdiel GoJahddy $9.99
Renato Michi $7.00
Melissa Melymely $6.05
Edwin Ed $5.14
Alison Ali $4.03
<table class="striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Item Name</th>
      <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jahdiel</td>
      <td>GoJahddy</td>
      <td>$9.99</td>
    </tr>
    ...
  </tbody>
</table>