diff --git a/docs/documentation/grid.html b/docs/documentation/grid.html deleted file mode 100644 index 1847c63b..00000000 --- a/docs/documentation/grid.html +++ /dev/null @@ -1,749 +0,0 @@ ---- -layout: documentation -doc-tab: grid ---- - -
-
-

Grid

-

A simple way to build columns

-
-
-

To build a grid, just:

-
    -
  1. Add a columns container
    2. -
  2. Add as many column elements as you want
    3. -
-
- -
-
-

First column

-
-
-

Second column

-
-
-

Third column

-
-
-

Fourth column

-
-
- -{% highlight html %} -
-
- First column -
-
- Second column -
-
- Third column -
-
- Fourth column -
-
-{% endhighlight %} - -
- -

Sizes

-
-

If you want to change the size of a single column, you can use one the following classes:

-
    -
  • - is-three-quarters -
    • -
  • - is-two-thirds -
    • -
  • - is-half -
    • -
  • - is-one-third -
    • -
  • - is-one-quarter -
    • -
-

The other columns will fill up the remaining space automatically.

-
-
-
-

- is-three-quarters -

-
-
-

Auto

-
-
-

Auto

-
-
-
-
-

- is-two-thirds -

-
-
-

Auto

-
-
-

Auto

-
-
-
-
-

- is-half -

-
-
-

Auto

-
-
-

Auto

-
-
-
-
-

- is-one-third -

-
-
-

Auto

-
-
-

Auto

-
-
-
-
-

- is-one-quarter -

-
-
-

Auto

-
-
- -{% highlight html %} -
-
-

- is-three-quarters -

-
-
-

Auto

-
-
-

Auto

-
-
- -
-
-

- is-two-thirds -

-
-
-

Auto

-
-
-

Auto

-
-
- -
-
-

- is-half -

-
-
-

Auto

-
-
-

Auto

-
-
- -
-
-

- is-one-third -

-
-
-

Auto

-
-
-

Auto

-
-
- -
-
-

- is-one-quarter -

-
-
-

Auto

-
-
-{% endhighlight %} - - -

12 columns

-
-

As the grid can be divided into 12 columns, there are size classes for each division:

-
    -
  • is-2
    • -
  • is-3
    • -
  • is-4
    • -
  • is-5
    • -
  • is-6
    • -
  • is-7
    • -
  • is-8
    • -
  • is-9
    • -
  • is-10
    • -
  • is-11
    • -
-
-
-

Naming

-

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

-
- -
-
-

is-2

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-3

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-4

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-5

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-6

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-7

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-8

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-9

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-10

-
-
-

1

-
-
-

1

-
-
-
-
-

is-11

-
-
-

1

-
-
- -
- -

Offset

-
-

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x: -

- -
-
-

- is-half
- is-offset-one-quarter -

-
-
- -
-
-

- is-4
- is-offset-8 -

-
-
- -
-
-

- is-11
- is-offset-1 -

-
-
- -{% highlight html %} -
-
-
- -
-
-
- -
-
-
-{% endhighlight %} - -
- -

Responsiveness

-
-

By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.

-

If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:

-
-
-
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
-
-{% highlight html %} -
-
1
-
2
-
3
-
4
-
-{% endhighlight %} -
-

Resize

-

If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed.

-
-
-

If you only want columns on desktop, just use the is-desktop modifier on the columns container:

-
-
-
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
-
-{% highlight html %} -
-
1
-
2
-
3
-
4
-
-{% endhighlight %} - -

Different sizes per breakpoint

-
-

You can define a column size for each viewport size: mobile, tablet, and desktop.

-
-
-
-

- is-half-mobile
- is-one-third-tablet
- is-one-quarter-desktop -

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-

Resize

-

If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.

-
-{% highlight html %} -
-
- is-half-mobile
- is-one-third-tablet
- is-one-quarter-desktop -
-
1
-
1
-
1
-
1
-
-{% endhighlight %} - -
- -

Multiline

-
-

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

-
-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-half

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

Auto

-
-
- -{% highlight html %} -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-half -
-
- is-one-quarter -
-
- is-one-quarter -
-
- Auto -
-
-{% endhighlight %} -
- -

Gapless

-
-

If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

-
-
-
-

First column

-
-
-

Second column

-
-
-

Third column

-
-
-

Fourth column

-
-
-{% highlight html %} -
-
First column
-
Second column
-
Third column
-
Fourth column
-
-{% endhighlight %} -
-

You can combine it with the is-multiline modifier:

-
-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-half

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

Auto

-
-
-{% highlight html %} -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-half -
-
- is-one-quarter -
-
- is-one-quarter -
-
- Auto -
-
-{% endhighlight %} - -
-
diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html index 7a243901..13615243 100644 --- a/docs/documentation/layout/container.html +++ b/docs/documentation/layout/container.html @@ -18,7 +18,7 @@ doc-subtab: container

The .container class can be used in any context, but mostly as a direct child of either: