Guide Getting started with Mockingbird

Please note

The Mockingbird project is fully Work in Progress.
This is a beta release. Anything may change or be removed.

If you experience any bugs or if you want to help improve the framework, then feel free to open an issue on GitHub.

Cheat Sheet

A complete reference to Mockingbird

Explanation

a word preceded by a dot (e.g. .container) means that it is a HTML class. You would use it like <div class="container"></div>

a word in curly brackets (e.g. {size}) correlates to a set of values. In this example it would be (sm, md, lg)

Grid

.container

content is centered & has a maximum width of 960px

.container-{size}

xs: 600px, sm: 720px, md: 960px, lg: 1200px

.container-fluid

content stretches to full width of window

.row

wrapper for cols, has a clearfix on it

.flex-row

a wrapper that displays as flex

.col

wrap content in columns, especially useful inside .flex-row ^^

.col-{n}

wrap content with specified width (n: 1-12). The default grid consists of 12 columns

.col-{breakpoint}-{n}

columns that break to full width at specified breakpoint

Responsive Utilities

.mb-pull-left

pulls content to the left (float: left)

.mb-pull-right

pulls content to the right (float: right)

.mb-clearfix

eliminates unwanted behavior of floats. read more

.mb-center

centers the element its used on

.mb-flex-center

uses flexbox to center its children vertically & horizontally

.mb-fullwidth

like the name suggests, it stretches to full width of parent

.mb-absolute

positions the element to absolute

.mb-fixed

positions the element to fixed

Utilities & Modifiers

.mb-text-{color}

changes the text color of the element

.mb-{size}

can change size of an element, depending on if it supports it

.mb-outline

changes the element's style to outlined

.mb-no-padding, .mb-no-margin, .mb-no-border

removes given attribute from element

.mb-text-{align}

aligns text to the specified value

.mb-text-wrap

forces a text to wrap inside its container

.mb-text-overflow

overflowing text gets cut off with ellipsis

.mb-text-underline, .mb-text-through

styles the text with underline or line-through

.mb-shadow, .mb-shadow-{type}

adds a box shadow to any element:

.mb-shadow-hover, .mb-shadow-{type}-hover

hides shadow when hovering over the element:

.mb-text-bold, .mb-text-bolder, .mb-text-normal

changes the thickness of the font

Typography

<h1>, <h2>, ... <h6>

default HTML headings, can contain subheadings in form of a <span> or .sub-heading

.small, <small>

makes smaller text (default: 87.5% of body text)

.strong, <strong>, <b>

makes bold/strong text

.mark, <mark>

marks the text inside

<code>

highlights code inside a text:

console.log('Hello World')
<sup>, <sub>

positions text above and below

<blockquote>

Imagination is more important than knowledge. – Albert Einstein

.font-fam-{type}

applies a font family on the text. types: serif, monospace

Form elements

.btn, <button>

creates a button that can have .mb-outline, .mb-{color}, .link-arrow, and more classes.

<input>, <textarea>, <select>

<input type=radio>, <input type=checkbox>

Tables

<table>

if you want to know more about HTML tables, you can read more here.
Mockingbird adds some more features to tables.

.table-striped

creates a striped effect on the table, which helps with readability

.table-hover

highlights the table row when you hover over it

.mb-sm

makes a smaller table

.mb-no-border

removes all borders from the table

.mb-outline

draws a border on the outside of the table

.{color}

in combination with the above class, it can color the outside border of a table

Legend

Breakpoints

xs: 480px, sm: 576px, md: 720px, lg: 960px, xl: 1200px

Text alignments

left, center, right, justify

Default Colors
primarysecondarydefault
successwarningdangerdark
lightlighterlightest