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

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.

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;