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


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)



content is centered & has a maximum width of 960px


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


content stretches to full width of window


wrapper for cols, has a clearfix on it


a wrapper that displays as flex


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


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


columns that break to full width at specified breakpoint

Responsive Utilities


pulls content to the left (float: left)


pulls content to the right (float: right)


eliminates unwanted behavior of floats. read more


centers the element its used on


uses flexbox to center its children vertically & horizontally


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


positions the element to absolute


positions the element to fixed

Utilities & Modifiers


changes the text color of the element


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


changes the element's style to outlined

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

removes given attribute from element


aligns text to the specified value


forces a text to wrap inside its container


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


<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


highlights code inside a text:

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

positions text above and below


Imagination is more important than knowledge. – Albert Einstein


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>



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


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


highlights the table row when you hover over it


makes a smaller table


removes all borders from the table


draws a border on the outside of the table


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



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

Text alignments

left, center, right, justify

Default Colors