Sixteen

BEM Style Minimal Framework

STYLE REFERENCE

 

Typography

Headers

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

<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>

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.


<small>Some small text</small>
Some small text

Unordered list

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

Ordered list

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

Blockquote

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

Thematic break

<hr>

Form

Static state

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
Information about the field

Error state

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
Error message
Information about the field

Help text

Default

<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">Information about the field</div>
</div>
Information about the field

Tooltip

<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 you will need to calculate dynamically the bottom position of the tooltip using JavaScript. This type of tooltip is best used for web apps.
Information about the field

Button

Default state and roles

<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>

Large

<button class="btn btn--primary btn--large">Primary button</button>

Small

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

Transparent

<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 (block)

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

Loading state

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

Table

Grid

Default grid (with gutter)

<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>

Settings:

$grid-columns: 12 !default;
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

Collapsed grid (no gutter)

<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>
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

Alert

Normal

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

Error

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

Success

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

Tooltip

Normal

<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>>
Button with top tooltip

Button with bottom tooltip

Settings

/**
 * Base settings
 */


/**
 * Colors
 */

$cyan: #00abd3;
$red: #d50000;
$green: #00b100;
$orange: #ff8a00;
$grey: #666666;
$grey--dark: #333333;
$grey--medium: #aaaaaa;
$grey--light: #eeeeee;
$grey--lighter: #fafafa;

$background_color: #ffffff;
$background_color--primary: $cyan;
$background_color--create: $green;
$background_color--change: $orange;
$background_color--cancel: $grey;
$background_color--delete: $red;


/**
 * Typography
 */

$font_family--primary: "Lucida Grande", sans-serif !default;
$font_family--heading: "Helvetica Neue", sans-serif !default;
$font_family--serif: Georgia, serif !default;
$font_family--monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;

$font_color: #444444;
$font_color--primary: $cyan;
$font_color--light: $grey--light;

$font_size: 13px;
$font_size--small: 12px;
$font_size--large: 18px;

$font_size_mobile: 15px;
$font_size_mobile--small: 13px;

$font_weight: 400;
$font_weight--bold: 700;

$base-line-height: 1.5em;

$h1-ratio: 2.441;
$h2-ratio: 1.953;
$h3-ratio: 1.563;
$h4-ratio: 1.25;
$h5-ratio: 1;
$h6-ratio: 1;

$h1-weight: 400;
$h2-weight: 400;
$h3-weight: 400;
$h4-weight: 400;
$h5-weight: 400;
$h6-weight: 400;


/**
 * Layout
 */

$vertical_padding: 12px;
$horizontal_padding: 16px;

$border-radius: 4px;

/**
 * Modal
 */

$modal_content_bg: #ffffff;
$modal_header_bg: #ffffff;
$modal_footer_bg: #ffffff;

/**
 * Form
 */

$input_border_color: #dddddd;
$input_focus_color: #666666;
$error_background: rgba(213, 0, 0, 0.8);

/**
 * Breakpoints
 */

/* Mobile */
$mobile-width: 767px;
$mobile: new-breakpoint(max-width $mobile-width);

/* Tablet */
$tablet-width: 768px;
$tablet: new-breakpoint(min-width $tablet-width);

/* Desktop */
$desktop-width: 1024px;
$desktop: new-breakpoint(min-width $desktop-width + 1);

/**
 * Grid
 */

$grid-columns: 12 !default;