diff --git a/docs/_includes/anchor.html b/docs/_includes/anchor.html index 415a672b..55e93ab7 100644 --- a/docs/_includes/anchor.html +++ b/docs/_includes/anchor.html @@ -1,6 +1,6 @@
-

+

{{ include.name }} # diff --git a/docs/_includes/comparison.html b/docs/_includes/comparison.html index 6a9d6ff5..9f508d3b 100644 --- a/docs/_includes/comparison.html +++ b/docs/_includes/comparison.html @@ -6,7 +6,7 @@ - + columns @@ -18,7 +18,7 @@ - + column @@ -30,7 +30,7 @@ - + tile diff --git a/docs/_includes/subnav-columns.html b/docs/_includes/subnav-columns.html index d8c8a2c1..ac85a9ac 100644 --- a/docs/_includes/subnav-columns.html +++ b/docs/_includes/subnav-columns.html @@ -16,8 +16,8 @@ Options - - Variable gap + + Gap diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index f5ea05f5..93b4b87e 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -39,9 +39,6 @@ route: documentation
  • Columns
    • -
  • - Grid -
  • Layout
    • diff --git a/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md b/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md index 6623a532..c88a1c44 100644 --- a/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md +++ b/docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md @@ -1,15 +1,15 @@ --- layout: post title: "Metro UI CSS grid with Bulma tiles" -introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?
    Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element." +introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?
    Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element." color: "info" name: "Metro UI" icon: "th-large" --- Have you ever wanted to build a **Metro-UI-like grid in CSS**? -Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element. +Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element. -[![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](http://bulma.io/documentation/grid/tiles/) +[![Metro UI grid tiles in CSS](/images/blog/metro-ui-css-grid-tiles.png)](http://bulma.io/documentation/layout/tiles/) -Check out the [documentation](http://bulma.io/documentation/grid/tiles/)! +Check out the [documentation](http://bulma.io/documentation/layout/tiles/)! diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html new file mode 100644 index 00000000..693ab8e7 --- /dev/null +++ b/docs/documentation/columns/gap.html @@ -0,0 +1,43 @@ +--- +title: Columns gap +layout: documentation +doc-tab: columns +doc-subtab: gap +--- + +{% capture columns_gap %} +
    +
    + First column +
    +
    + Second column +
    +
    + Third column +
    +
    + Fourth column +
    +
    +{% endcapture %} + +{% include subnav-columns.html %} + +
    +
    +

    Columns gap

    +

    A simple way to build responsive columns

    +
    +
    +

    Building a columns layout with Bulma is very simple:

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

    Each column will have an equal width, no matter the number of columns.

    +
    + + {% highlight html %}{{ columns_gap }}{% endhighlight %} +
    +
    diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html index e81803d4..f2bfbfc2 100644 --- a/docs/documentation/columns/options.html +++ b/docs/documentation/columns/options.html @@ -72,6 +72,52 @@ doc-subtab: options {% endcapture %} +{% capture columns_mobile_centered %} +
    +
    +

    + is-half
    + is-narrow +

    +
    +
    +{% endcapture %} + +{% capture columns_mobile_multiline_centered %} +
    +
    +

    + is-narrow
    + First Column +

    +
    +
    +

    + is-narrow
    + Our Second Column +

    +
    +
    +

    + is-narrow
    + Third Column +

    +
    +
    +

    + is-narrow
    + The Fourth Column +

    +
    +
    +

    + is-narrow
    + Fifth Column +

    +
    +
    +{% endcapture %} + {% capture columns_narrow %}
    @@ -197,6 +243,66 @@ doc-subtab: options {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} + {% include anchor.html name="Centering columns" %} + +
    +

    + While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element: +

    +
    + +
    +
    +

    + is-half
    + is-narrow +

    +
    +
    + + {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %} + +
    +

    + Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes): +

    +
    + +
    +
    +

    + is-narrow
    + First Column +

    +
    +
    +

    + is-narrow
    + Our Second Column +

    +
    +
    +

    + is-narrow
    + Third Column +

    +
    +
    +

    + is-narrow
    + The Fourth Column +

    +
    +
    +

    + is-narrow
    + Fifth Column +

    +
    +
    + + {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} + {% include anchor.html name="Narrow column" %}
    diff --git a/docs/index.html b/docs/index.html index 5ef76acd..44dfb232 100644 --- a/docs/index.html +++ b/docs/index.html @@ -66,7 +66,7 @@ route: index

    Modular

    Just import what you need

    - + @@ -95,7 +95,7 @@ route: index - + Simple columns

    @@ -197,7 +197,7 @@ route: index - + Magic tiles