diff --git a/docs/_includes/snippet.html b/docs/_includes/snippet.html index d19c39e3..a9aa8ae2 100644 --- a/docs/_includes/snippet.html +++ b/docs/_includes/snippet.html @@ -16,6 +16,7 @@ {% if include.clipped %}bd-is-clipped{% endif %} {% if include.size %}bd-is-{{ include.size }}{% endif %} {% if include.one_fifth %}bd-is-one-fifth{% endif %} + {% if include.fullwidth %}bd-is-fullwidth{% endif %} ">
{{ include.content }} diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index 9faa5419..3936522b 100644 --- a/docs/_sass/example.sass +++ b/docs/_sass/example.sass @@ -81,6 +81,10 @@ .bd-snippet-code overflow: auto +.bd-snippet.bd-is-fullwidth + border-radius: 0 + border-width: 1px 0 + +desktop .bd-snippet.bd-is-vertical align-items: stretch diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index e67d8bc3..c4884131 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,5 +1,6 @@ .bd-typo - margin-top: 3rem + &:not(:first-child) + margin-top: 3rem .bd-has-text-rss color: $rss diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 14024954..3ea97d6b 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10402,7 +10402,7 @@ svg { text-decoration: underline; } -.bd-typo { +.bd-typo:not(:first-child) { margin-top: 3rem; } @@ -10939,6 +10939,11 @@ svg { overflow: auto; } +.bd-snippet.bd-is-fullwidth { + border-radius: 0; + border-width: 1px 0; +} + @media screen and (min-width: 1024px) { .bd-snippet.bd-is-vertical { align-items: stretch; diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 7226647f..410a6b7a 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -1,12 +1,12 @@ --- title: Footer +subtitle: "A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc." layout: documentation +hide_carbon: true doc-tab: layout doc-subtab: footer --- -{% include subnav/subnav-layout.html %} - {% capture footer_example %} {% endcapture %} -
-
-

Footer

-

- A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc. -

+{% include layout/main-close.html show_carbon=true %} - {% include snippet.html content=footer_example horizontal=true more=true %} +{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %} - {% include variables.html %} -
-
+{% include layout/main-open.html %} + +{% include variables.html %} diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html index 63058c43..f9e616d1 100644 --- a/docs/documentation/layout/hero.html +++ b/docs/documentation/layout/hero.html @@ -1,20 +1,13 @@ --- title: Hero +subtitle: "An imposing hero banner to showcase something" layout: documentation +hide_carbon: true doc-tab: layout doc-subtab: hero --- -{% include subnav/subnav-layout.html %} - -
-
-

Hero

-

- An imposing hero banner to showcase something -

-
-
+{% include layout/main-close.html show_carbon=true %}
@@ -31,6 +24,7 @@ doc-subtab: hero
+ {% highlight html %}
@@ -654,3 +648,5 @@ doc-subtab: hero {% include snippet.html content=heroNavbarB horizontal=true more=true %} {% include snippet.html content=heroNavbarC horizontal=true more=true %}
+ +{% include layout/main-open.html %} diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html index eeb4de7a..0c4e746a 100644 --- a/docs/documentation/layout/level.html +++ b/docs/documentation/layout/level.html @@ -1,5 +1,6 @@ --- title: Level +subtitle: "A multi-purpose horizontal level, which can contain almost any other element" layout: documentation doc-tab: layout doc-subtab: level @@ -118,96 +119,84 @@ doc-subtab: level {% endcapture %} -{% include subnav/subnav-layout.html %} - -
-
-

Level

-

A multi-purpose horizontal level, which can contain almost any other element

- -
- -
-

The structure of a level is the following:

+
+

The structure of a level is the following:

+
    +
  • + level: main container
      +
    • level-left for the left side
    • - level: main container + level-right for the right side
        -
      • level-left for the left side -
      • - level-right for the right side -
          -
        • level-item for each individual element
          • -
        -
        • +
      • level-item for each individual element
    -

    In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.

    -
+ + +

In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.

+
-
- +
- {% include snippet.html content=nav_centered_example horizontal=true more=true %} +{% include snippet.html content=nav_example horizontal=true more=true %} - {% include snippet.html content=nav_centered_bis_example horizontal=true more=true %} +{% include anchor.html name="Centered level" %} - {% include anchor.html name="Mobile level" %} +
+ If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container. +
-
- By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container. -
+{% include snippet.html content=nav_centered_example horizontal=true more=true %} - {% include snippet.html content=nav_mobile_example horizontal=true more=true %} +{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %} -
-
+{% include anchor.html name="Mobile level" %} + +
+ By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container. +
+ +{% include snippet.html content=nav_mobile_example horizontal=true more=true %} diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html index 805ddc96..a8690023 100644 --- a/docs/documentation/layout/media-object.html +++ b/docs/documentation/layout/media-object.html @@ -1,5 +1,6 @@ --- title: Media Object +subtitle: "The famous media object prevalent in social media interfaces, but useful in any context" layout: documentation doc-tab: layout doc-subtab: media-object @@ -156,69 +157,57 @@ doc-subtab: media-object {% endcapture %} -{% include subnav/subnav-layout.html %} +
+

The media object is a UI element perfect for repeatable and nestable content.

+
-
-
-

Media Object

-

The famous media object prevalent in social media interfaces, but useful in any context

- -
- -
-

The media object is a UI element perfect for repeatable and nestable content.

-
- -
-
-
-

- -

-
-
-
-

- John Smith @johnsmith 31m -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. -

-
- +
+
+
+

+ +

+
+
+
+

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

+
+
+
- - {% include snippet.html content=media_example horizontal=true more=true %} - -
-

You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.

+
+
+
+
- {% include snippet.html content=media_bis_example horizontal=true more=true %} +{% include snippet.html content=media_example horizontal=true more=true %} - {% include anchor.html name="Nesting" %} +
+

You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.

+
-
-

You can nest media objects up to 3 levels deep.

-
+{% include snippet.html content=media_bis_example horizontal=true more=true %} - {% include snippet.html content=media_nested_example horizontal=true more=true %} +{% include anchor.html name="Nesting" %} -
-
+
+

You can nest media objects up to 3 levels deep.

+
+ +{% include snippet.html content=media_nested_example horizontal=true more=true %} diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html index 49c6bd33..b1b2452e 100644 --- a/docs/documentation/layout/section.html +++ b/docs/documentation/layout/section.html @@ -1,26 +1,12 @@ --- title: Section +subtitle: "A simple container to divide your page into sections, like the one you're currently reading" layout: documentation doc-tab: layout doc-subtab: section --- -{% include subnav/subnav-layout.html %} - -
-
-

Section

-

- A simple container to divide your page into sections, like the one you're currently reading -

- -
- -
-

Use sections as direct children of body.

-
- -{% highlight html %} +{% capture section_example %}
@@ -31,13 +17,16 @@ doc-subtab: section
-{% endhighlight %} +{% endcapture %} -
-

You can use the modifiers is-medium and is-large to change the spacing.

-
+
+

Use sections as direct children of body.

+
- {% include variables.html %} +{% highlight html %}{{ section_example }}{% endhighlight %} -
-
+
+

You can use the modifiers is-medium and is-large to change the spacing.

+
+ +{% include variables.html %} diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html index 3a295c91..6cdb413a 100644 --- a/docs/documentation/layout/tiles.html +++ b/docs/documentation/layout/tiles.html @@ -1,80 +1,18 @@ --- title: Tiles powered by Flexbox +subtitle: "A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids" layout: documentation doc-tab: layout doc-subtab: tiles --- -{% include subnav/subnav-layout.html %} - -
-
-

Tiles

-

A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids

- -
- -
-

To build intricate 2-dimensional layouts, you only need a single element: the tile:

-
- -{% highlight html %} +{% capture tile_empty %}
-{% endhighlight %} +{% endcapture %} - {% include anchor.html name="Example" %} - -
-
-
-
-
-

Vertical...

-

Top tile

-
-
-

...tiles

-

Bottom tile

-
-
-
-
-

Middle tile

-

With an image

-
- -
-
-
-
-
-
-

Wide tile

-

Aligned with the right tile

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall tile

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
- -{% highlight html %} +{% capture tile_default %}
@@ -120,63 +58,15 @@ doc-subtab: tiles
-{% endhighlight %} +{% endcapture %} - {% include anchor.html name="Modifiers" %} - - -
-

The tile element has 16 modifiers:

-
    -
  • - 3 contextual modifiers -
      -
    • is-ancestor
      • -
    • is-parent
      • -
    • is-child
      • -
    -
    • -
  • - 1 directional modifier -
      -
    • is-vertical
      • -
    -
    • -
  • - 12 horizontal size modifiers -
      -
    • from is-1
      • -
    • to is-12
      • -
    -
    • -
-
- - {% include anchor.html name="How it works: Nesting" %} - -
-

Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

-
- -
-
-

Start with an ancestor tile that will wrap all other tiles:

-
-
-{% highlight html %} +{% capture tile_ancestor %}
-{% endhighlight %} -
-
+{% endcapture %} -
-
-

Add tile elements that will distribute themselves horizontally:

-
-
-{% highlight html %} +{% capture tile_horizontal %}
@@ -185,20 +75,9 @@ doc-subtab: tiles
-{% endhighlight %} -
-
+{% endcapture %} -
-
-

- You can resize any tile according to a 12 column grid. -
- For example, is-4 will take up 1/3 of the horizontal space: -

-
-
-{% highlight html %} +{% capture tile_resize %}
@@ -207,16 +86,9 @@ doc-subtab: tiles
-{% endhighlight %} -
-
+{% endcapture %} -
-
-

If you want to stack tiles vertically, add is-vertical on the parent tile:

-
-
-{% highlight html %} +{% capture tile_vertical %}
@@ -230,23 +102,9 @@ doc-subtab: tiles
-{% endhighlight %} -
-
+{% endcapture %} -
-
-
-

As soon as you want to add content to a tile, just:

-
    -
  • add any class you want, like box
    • -
  • add the is-child modifier on the tile
    • -
  • add the is-parent modifier on the parent tile
    • -
-
-
-
-{% highlight html %} +{% capture tile_123 %}
@@ -262,32 +120,9 @@ doc-subtab: tiles
-{% endhighlight %} -
-
+{% endcapture %} -
-
-
-

One

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-

Two

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-

Three

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
- -{% highlight html %} +{% capture tile_lorem %}
@@ -308,37 +143,17 @@ doc-subtab: tiles
-{% endhighlight %} +{% endcapture %} - {% include anchor.html name="Nesting requirements" %} - - -
-
- 3 levels deep at least... -
-
-
-

You need at least 3 levels of hierarchy:

-{% highlight markdown %} +{% capture md_3_levels %} tile is-ancestor | └───tile is-parent | └───tile is-child -{% endhighlight %} -
-
-
+{% endcapture %} -
-
- ...but more levels if you want! -
-
-
-

You can, however, nest tiles deeper than that, and mix it up!

-{% highlight markdown %} +{% capture md_nesting %} tile is-ancestor | ├───tile is-vertical is-8 @@ -357,60 +172,9 @@ tile is-ancestor | └───tile is-parent └───tile is-child -{% endhighlight %} -
-
-
+{% endcapture %} -
-
-
-
-
-

Vertical tiles

-

Top box

-
-
-

Vertical tiles

-

Bottom box

-
-
-
-
-

Middle box

-

With an image

-
- -
-
-
-
-
-
-

Wide column

-

Aligned with the right column

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall column

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
- -{% highlight html %} +{% capture tile_any_content %}
@@ -440,103 +204,9 @@ tile is-ancestor
-{% endhighlight %} +{% endcapture %} - {% include anchor.html name="3 columns" %} - - -
-
-
-

Hello World

-

What is up?

-
-
-
-
-

Foo

-

Bar

-
-
-
-
-

Third column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-
-
-

Vertical tiles

-

Top box

-
-
-

Vertical tiles

-

Bottom box

-
-
-
-
-

Middle box

-

With an image

-
- -
-
-
-
-
-
-

Wide column

-

Aligned with the right column

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall column

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
-
-
-
-

Side column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Main column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
- -{% highlight html %} +{% capture tile_3_columns %}
@@ -629,137 +299,9 @@ tile is-ancestor
-{% endhighlight %} +{% endcapture %} - {% include anchor.html name="4 columns" %} - - -
-
-
-

One

-

Subtitle

-
-
-
-
-

Two

-

Subtitle

-
-
-
-
-

Three

-

Subtitle

-
-
-
-
-

Four

-

Subtitle

-
-
-
-
-
-
-
-
-

Five

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-
-
-
-
-
-
-
-

Six

-

Subtitle

-
-
-
-
-

Seven

-

Subtitle

-
-
-
-
-
-

Eight

-

Subtitle

-
-
-
-
-
-
-
-

Nine

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Ten

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-
-

Eleven

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
-
-
-
-

Twelve

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
-
-

Thirteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Fourteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
- -{% highlight html %} +{% capture tile_4_columns %}
@@ -886,6 +428,476 @@ tile is-ancestor
-{% endhighlight %} +{% endcapture %} + +
+

To build intricate 2-dimensional layouts, you only need a single element: the tile:

+
+ +{% highlight html %}{{ tile_empty }}{% endhighlight %} + +{% include anchor.html name="Example" %} + +
+
+
+
+
+

Vertical...

+

Top tile

+
+
+

...tiles

+

Bottom tile

+
+
+
+
+

Middle tile

+

With an image

+
+ +
+
+
+
+
+
+

Wide tile

+

Aligned with the right tile

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
-
+
+
+
+

Tall tile

+

With even more content

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

+

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

+
+
+
+
+ + +{% highlight html %}{{ tile_default }}{% endhighlight %} + +{% include anchor.html name="Modifiers" %} + +
+

The tile element has 16 modifiers:

+ +
+ +{% include anchor.html name="How it works: Nesting" %} + +
+

Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

+
+ +
+
+

Start with an ancestor tile that will wrap all other tiles:

+
+
+ {% highlight html %}{{ tile_ancestor }}{% endhighlight %} +
+
+ +
+
+

Add tile elements that will distribute themselves horizontally:

+
+
+ {% highlight html %}{{ tile_horizontal }}{% endhighlight %} +
+
+ +
+
+

+ You can resize any tile according to a 12 column grid. +
+ For example, is-4 will take up 1/3 of the horizontal space: +

+
+
+ {% highlight html %}{{ tile_resize }}{% endhighlight %} +
+
+ +
+
+

If you want to stack tiles vertically, add is-vertical on the parent tile:

+
+
+ {% highlight html %}{{ tile_vertical }}{% endhighlight %} +
+
+ +
+
+
+

As soon as you want to add content to a tile, just:

+
    +
  • add any class you want, like box
    • +
  • add the is-child modifier on the tile
    • +
  • add the is-parent modifier on the parent tile
    • +
+
+
+
+ {% highlight html %}{{ tile_123 }}{% endhighlight %} +
+
+ +
+
+
+

One

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+

Two

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+

Three

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

+

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

+
+
+
+ +{% highlight html %}{{ tile_lorem }}{% endhighlight %} + +{% include anchor.html name="Nesting requirements" %} + +
+
+ 3 levels deep at least... +
+
+
+

You need at least 3 levels of hierarchy:

+ {% highlight markdown %}{{ md_3_levels }}{% endhighlight %} +
+
+
+ +
+
+ ...but more levels if you want! +
+
+
+

You can, however, nest tiles deeper than that, and mix it up!

+ {% highlight markdown %}{{ md_nesting }}{% endhighlight %} +
+
+
+ +
+
+
+
+
+

Vertical tiles

+

Top box

+
+
+

Vertical tiles

+

Bottom box

+
+
+
+
+

Middle box

+

With an image

+
+ +
+
+
+
+
+
+

Wide column

+

Aligned with the right column

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+
+
+
+

Tall column

+

With even more content

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

+

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

+
+
+
+
+
+ +{% highlight html %}{{ tile_any_content }}{% endhighlight %} + +{% include anchor.html name="3 columns" %} + +
+
+
+

Hello World

+

What is up?

+
+
+
+
+

Foo

+

Bar

+
+
+
+
+

Third column

+

With some content

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+
+
+
+
+
+

Vertical tiles

+

Top box

+
+
+

Vertical tiles

+

Bottom box

+
+
+
+
+

Middle box

+

With an image

+
+ +
+
+
+
+
+
+

Wide column

+

Aligned with the right column

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+
+
+
+

Tall column

+

With even more content

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

+

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

+
+
+
+
+
+
+
+
+

Side column

+

With some content

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+
+

Main column

+

With some content

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+ +{% highlight html %}{{ tile_3_columns }}{% endhighlight %} + +{% include anchor.html name="4 columns" %} + +
+
+
+

One

+

Subtitle

+
+
+
+
+

Two

+

Subtitle

+
+
+
+
+

Three

+

Subtitle

+
+
+
+
+

Four

+

Subtitle

+
+
+
+
+
+
+
+
+

Five

+

Subtitle

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+
+
+
+
+
+
+
+

Six

+

Subtitle

+
+
+
+
+

Seven

+

Subtitle

+
+
+
+
+
+

Eight

+

Subtitle

+
+
+
+
+
+
+
+

Nine

+

Subtitle

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+
+

Ten

+

Subtitle

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+
+
+
+
+

Eleven

+

Subtitle

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

+
+
+
+
+
+
+
+
+

Twelve

+

Subtitle

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

+
+
+
+
+
+

Thirteen

+

Subtitle

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+
+

Fourteen

+

Subtitle

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

+
+
+
+
+ +{% highlight html %}{{ tile_4_columns }}{% endhighlight %}