Sixteen

BEM Style Minimal Framework

STYLE REFERENCE Typography Form Button Table Modal Grid Alert

Typography

Headers

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Source code

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

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin massa non odio condimentum, quis fringilla justo convallis. Curabitur nec faucibus sem, ut feugiat nisi. Vestibulum vel porta justo. Morbi egestas elementum sapien sed euismod.

Some small text

Source code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nullam sollicitudin massa non odio condimentum, quis fringilla justo convallis. 
Curabitur nec faucibus sem, ut feugiat nisi. Vestibulum vel porta justo. 
Morbi egestas elementum sapien sed euismod.</p>

<small>Some small text</small>

Lists

  • Item 1
  • Item 2
  • Item 3

  1. Item 1
  2. Item 2
  3. Item 3

Source code

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin massa non odio condimentum, quis fringilla justo convallis.

Source code

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam sollicitudin massa non odio condimentum, quis fringilla justo convallis.
</blockquote>

Thematic break

Source code

<hr>

Form

Information about the field

Source code

<div class="form__group">
    <label class="form__label">Field label</label>
    <div class="form__control form__control--text">
        <input class="form__text" type="text" name="total_annual_bookings" placeholder="1,000,000">
    </div>
    <div class="form__help">Information about the field</div>
</div>
<button class="btn btn--primary">Submit button</button>

Error state

Error message
Information about the field

Source code

<div class="form__group form__group--error">
    <label class="form__label">Field label</label>
    <div class="form__error">Error message</div>
    <div class="form__control form__control--text">
        <input class="form__text" type="text" name="total_annual_bookings" placeholder="1,000,000">
    </div>
    <div class="form__help">Information about the field</div>
</div>
<button class="btn btn--primary">Submit button</button>

Help Tooltip



Information about the field

Source code

<div class="form__group">
    <div class="form__control form__control--text">
        <input class="form__text" type="text" placeholder="1,000,000">
    </div>
    <div class="form__help form__help--tooltip form__help--tooltip-on"  style="bottom: 54px;">
        Information about the field
    </div>
    </div>

Please note that the bottom position must be calculated and assigned programmatically.

Button

Source code

<button class="btn">Default button</button>
<button class="btn btn--primary">Primary button</button>
<button class="btn btn--create">Create button</button>
<button class="btn btn--change">Change button</button>
<button class="btn btn--delete">Delete button</button>

Size variations

Source code

<button class="btn btn--primary btn--large">Large button</button>
<button class="btn btn--small">Small button</button>

Transparency

Source code

<button class="btn btn--transparent">Default button</button>
<button class="btn btn--primary btn--transparent">Primary button</button>
<button class="btn btn--create btn--transparent">Create button</button>
<button class="btn btn--change btn--transparent">Change button</button>
<button class="btn btn--delete btn--transparent">Delete button</button>

Full width

Source code

<button class="btn btn--primary btn--full-width">
    Full width button
</button>

Loading state

Source code

<button class="btn btn--primary btn--full-width btn--loading">
    <span class="btn__text">Loading</span>
</button>

Table

Name Description Example
type The input field type (text, number, email...) "text"
type The input field type (text, number, email...) "text"
type The input field type (text, number, email...) "text"

Source code

<table class="table">
<tr class="table-row">
    <th class="table-head-cell">Name</th>
    <th class="table-head-cell">Description</th>
    <th class="table-head-cell">Example</th>
</tr>
<tr class="table-row">
    <td class="table-cell">type</td>
    <td class="table-cell">The input field type (text, number, email...)</td>
    <td class="table-cell">"text"</td>
</tr>
<tr class="table-row">
    <td class="table-cell">type</td>
    <td class="table-cell">The input field type (text, number, email...)</td>
    <td class="table-cell">"text"</td>
</tr>
<tr class="table-row">
    <td class="table-cell">type</td>
    <td class="table-cell">The input field type (text, number, email...)</td>
    <td class="table-cell">"text"</td>
</tr>
</table>

Grid

1
2
3
4
5
6
7
8
9
10
11
12

1
2
3
4
5
6

grid__span-4
grid__span-4
grid__span-4

Source code

<div class="grid">
    <div class="grid__span-1">1</div>
    <div class="grid__span-1">2</div> 
...
</div>

<div class="grid">
    <div class="grid__span-2">1</div>
    <div class="grid__span-2">2</div>
...
</div>

<div class="grid">
    <div class="grid__span-4">
        grid__span-4
    </div>
    <div class="grid__span-4">
        grid__span-4
    </div> 
...
</div>

Collapsed grid

1
2
3
4
5
6
7
8
9
10
11
12

1
2
3
4
5
6

grid__span-4
grid__span-4
grid__span-4

Source code

<div class="grid grid--collapse">
<div class="grid__span-1">1</div>
<div class="grid__span-1">2</div> 
...
</div>

<div class="grid grid--collapse">
<div class="grid__span-2">1</div>
<div class="grid__span-2">2</div>
...
</div>

<div class="grid grid--collapse">
<div class="grid__span-4">
    grid__span-4
</div>
<div class="grid__span-4">
    grid__span-4
</div> 
...
</div>

Alert

This is the alert message.
This is the error alert message.
This is the success alert message.
This is the warning alert message.

Source code

<div class="alert">
    This is the alert message.
</div>

<div class="[ alert alert--error ]">
    This is the error alert message.
</div>

<div class="[ alert alert--success ]">
    This is the success alert message.
</div>

<div class="[ alert alert--warning ]">
    This is the warning alert message.
</div>

Tooltip

Button with top tooltip

Button with bottom tooltip

Source code

<div 
    class="[ btn btn--primary ] [ tooltip tooltip--top ]" 
    data-tooltip="Some tooltip text">
    Button with top tooltip
</div>

<div 
    class="[ btn btn--primary ] [ tooltip tooltip--bottom ]" 
    data-tooltip="Some tooltip text">
    Button with bottom tooltip
</div>

Settings