--- --- Tempo

Tempo

Responsive Grid System

View on Github

12 Column Flexible Grid

You probably don't need a grid system, but here you go

.col-8

.col-4

.col-6

.col-4

.col-3

.col-2

.col-1

Basic Usage

{% highlight html %}

.col-6

{% endhighlight %}

Nesting

.col-6

{% highlight html %}

.col-6

{% endhighlight %}

Reversed Order

First

Second

{% highlight html %}

First

Second

{% endhighlight %}

Pre/Post Margins

.col-pre-2

.col-post-2

{% highlight html %}

.col-pre-2

.col-post-2

{% endhighlight %}

Centered Columns

.col-center

{% highlight html %}

.col-center

{% endhighlight %}

Mobile Grid

Works at all screen widths

.mobile-col-6

.mobile-col-4

.mobile-col-3

.mobile-col-2

{% highlight html %}

.mobile-col-6

{% endhighlight %}

Mixed Mobile & Desktop Grid

.mobile-col-6.col-8

.mobile-col-6.col-4

{% highlight html %}

.mobile-col-6.col-8

.mobile-col-6.col-4

{% endhighlight %}

Centered Single Columns

Non-floated, max-width based columns

.container-col-10

.container-col-8

.container-col-6

{% highlight html %}

.container-col-10

.container-col-8

.container-col-6

{% endhighlight %}

Get Started Now

Read the documentation and get started on Github.

View on Github