Introduction

Golden Rule

The main premise of Quickstarter is creating a lightweight framework to assist the creation of your next project.

Lightweight

That's why is designed to fit in most cases, but not all, sometimes you have to customize the code to meet your own needs. We do that to avoid unnecesary code and a bloated framework, which eventually would end up being counter‐productive for your project.

Style‐agnostic

Quickstarter by default does not assume anything, if you want to change some element will need to add a class.

Mobile‐first

Quickstarter is a framework for rapid prototyping thought to be mobile‐first, this means that is initially designed for mobile and then escalates to the desktop

Mobile > Tablet > Landscape > Desktop

We define abbreviations for this layout spaces

* (none)

Mobile

-sm

Small device (Tablet portrait, some mobile phones)

-md

Medium device (Tablet landscape, old desktops)

-lg

Large device (Desktop, Tv's, etc.)

In mobile all quads and triads are full‐width stacking blocks. Only after -sm turn into a grid.
That's why you do not need to include all device variants. Only in cases specifically required

The Grid

Quickstarter works with two type of grids at once quads and triads and they are both infinitely nestable.

quads and triads is just a fancy name to create the idea of «a quarter of …» and «a third of …» respectively

Most of the time you will not need more than 3 or 4 columns, but in case you needed, you can change the .less file allowing you to define any className and columns you want

<div class="grid">
    <div class="row">
        <div class="quad-1">...</div>
        <div class="quad-3">...</div>
    </div>
</div>

Responsive

You can also add .quad-1-sm or .quad-1-md or .quad-1-lg to breakdown the .quad-x on that device

That means the grid is going to be .quad-1/.quad-3 until changes .quad-2/.quad-2 on a medium or large device

<div class="grid">
    <div class="row">
        <div class="quad-1 quad-2-md">...</div>
        <div class="quad-3 quad-2-md">...</div>
    </div>
</div>

<div class="grid">
    <div class="row">
        <div class="quad-1">...</div>
        <div class="quad-3">
            <div class="row">
                <div class="triad-1">...</div>
                <div class="triad-2">...</div>
            </div>
        </div>
    </div>
</div>

<div class="grid">
    <div class="row-snap">
        <div class="quad-1">...</div>
        <div class="quad-3">...</div>
    </div>
</div>

<div class="grid">
    <div class="row-centered">
        <div class="quad-1">...</div>
    </div>
</div>

Prefix & Suffix

Adds spacing before or after a quad using .prefix-x or .suffix-x respectively

.prefix-x & .suffix-x on .quad-x goes to 4 and on .triad-x to 3

<div class="grid">
    <div class="row">
        <div class="quad-3 prefix-1">...</div>
    </div>
    <div class="row">
        <div class="quad-3 suffix-1">...</div>
    </div>
    <div class="row">
        <div class="triad-2 prefix-1">...</div>
    </div>
    <div class="row">
        <div class="triad-2 suffix-1">...</div>
    </div>
</div>

Responsive

You can also add .prefix-1-sm or .suffix-1-md to breakdown the .prefix-x or .suffix-x on that device

That means the grid gonna be .prefix-x/.suffix-x until changes to a medium or large device

<div class="grid">
    <div class="row">
        <div class="quad-3 prefix-1">...</div>
    </div>
    <div class="row">
        <div class="quad-3 suffix-1">...</div>
    </div>
    <div class="row">
        <div class="triad-2 prefix-1">...</div>
    </div>
    <div class="row">
        <div class="triad-2 suffix-1">...</div>
    </div>
</div>

Push & Pull

Push or pulls quads ignoring the layout, they work exacly as suffix and prefix adding space before or after a quad.
Useful to swapping cols

<div class="grid">
    <div class="row">
        <div class="quad-1 push-3">
            <span class="bg-grid">first col</span>
        </div>
        <div class="quad-3 pull-1">
            <span class="bg-grid">second col</span>
        </div>
    </div>
</div>

Responsive

They are also responsive, only add the device suffix like .push-1-sm

In this example, the cols are only swapped for a large device, resize the browser to see what happens

<div class="grid">
    <div class="row">
        <div class="quad-1 push-3-lg">
            <span class="bg-grid">first col</span>
        </div>
        <div class="quad-3 pull-1-lg">
            <span class="bg-grid">second col</span>
        </div>
    </div>
</div>

Visible & Invisible

Show and hide things on specific devices

Visible only

Invisible only

Visible From

Invisible From

<div class="grid">
     <div class="row">
        <div class="quad-4">
            <span class="bg-grid visible-md"> ... </span>
        </div>
    </div>
    <div class="row">
        <div class="quad-4">
            <span class="bg-grid invisible-md"> ... </span>
        </div>
    </div>
    <div class="row">
        <div class="quad-4">
            <span class="bg-grid visible-only-md"> ... </span>
        </div>
    </div>
    <div class="row">
        <div class="quad-4">
            <span class="bg-grid invisible-only-md"> ... </span>
        </div>
    </div>
</div>

Debug

Helps to see whats happening on the grid and what device jump is active.

.debug can be added as a class on <body> or .grid

The Grid border changes it's color on every device, this color it's a color code shown below

Color code

Green

Large device -lg

Orange

Medium device -md

Yellow

Small device -sm

Red

Mobile * (none)

<div class="grid debug">
    <div class="row">
        <div class="quad-1">...</div>
        <div class="quad-3">...</div>
    </div>
</div>