This commit is contained in:
Jeremy Thomas 2017-08-14 19:12:07 +01:00
parent 6fe43b8f94
commit 2aba5a3f84
8 changed files with 162 additions and 16 deletions

View File

@ -1,6 +1,6 @@
<hr style="margin-bottom: 0;"> <hr style="margin-bottom: 0;">
<h3 id="{{ include.name | slugify }}" class="title bd-anchor-title"> <h3 id="{{ include.name | slugify }}" class="title is-4 bd-anchor-title">
{{ include.name }} {{ include.name }}
<a class="bd-anchor-link" href="#{{ include.name | slugify }}"> <a class="bd-anchor-link" href="#{{ include.name | slugify }}">
# #

View File

@ -6,7 +6,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="{{ site.url }}/documentation/grid/columns/"> <a href="{{ site.url }}/documentation/columns/basics/">
columns columns
</a> </a>
</td> </td>
@ -18,7 +18,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<a href="{{ site.url }}/documentation/grid/columns/"> <a href="{{ site.url }}/documentation/columns/basics/">
column column
</a> </a>
</td> </td>
@ -30,7 +30,7 @@
</tr> </tr>
<tr> <tr>
<td class="bd-is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/grid/tiles/"> <a href="{{ site.url }}/documentation/layout/tiles/">
tile tile
</a> </a>
</td> </td>

View File

@ -16,8 +16,8 @@
<a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
Options Options
</a> </a>
<a class="navbar-item is-tab {% if page.doc-subtab == 'variable-gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/variable-gap/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
Variable gap Gap
</a> </a>
</div> </div>
</div> </div>

View File

@ -39,9 +39,6 @@ route: documentation
<li {% if page.doc-tab == 'columns' %}class="is-active"{% endif %}> <li {% if page.doc-tab == 'columns' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/columns/basics">Columns</a> <a href="{{ site.url }}/documentation/columns/basics">Columns</a>
</li> </li>
<li {% if page.doc-tab == 'grid' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/grid/columns">Grid</a>
</li>
<li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}> <li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/layout/container/">Layout</a> <a href="{{ site.url }}/documentation/layout/container/">Layout</a>
</li> </li>

View File

@ -1,15 +1,15 @@
--- ---
layout: post layout: post
title: "Metro UI CSS grid with Bulma tiles" title: "Metro UI CSS grid with Bulma tiles"
introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>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**?<br>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" color: "info"
name: "Metro UI" name: "Metro UI"
icon: "th-large" icon: "th-large"
--- ---
Have you ever wanted to build a **Metro-UI-like grid in CSS**? 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/)!

View File

@ -0,0 +1,43 @@
---
title: Columns gap
layout: documentation
doc-tab: columns
doc-subtab: gap
---
{% capture columns_gap %}
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
{% endcapture %}
{% include subnav-columns.html %}
<section class="section">
<div class="container">
<h1 class="title">Columns gap</h1>
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
<hr>
<div class="content">
<p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
<ol>
<li>Add a <code>columns</code> container</li>
<li>Add as many <code>column</code> elements as you want</li>
</ol>
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
</div>
{% highlight html %}{{ columns_gap }}{% endhighlight %}
</div>
</section>

View File

@ -72,6 +72,52 @@ doc-subtab: options
</div> </div>
{% endcapture %} {% endcapture %}
{% capture columns_mobile_centered %}
<div class="columns is-mobile is-centered">
<div class="column is-half is-narrow">
<p class="bd-notification is-info">
<code class="html">is-half</code><br>
<code class="html">is-narrow</code>
</p>
</div>
</div>
{% endcapture %}
{% capture columns_mobile_multiline_centered %}
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-info">
<code class="html">is-narrow</code><br>
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success">
<code class="html">is-narrow</code><br>
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-danger">
<code class="html">is-narrow</code><br>
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-info">
<code class="html">is-narrow</code><br>
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success">
<code class="html">is-narrow</code><br>
Fifth Column
</p>
</div>
</div>
{% endcapture %}
{% capture columns_narrow %} {% capture columns_narrow %}
<div class="columns"> <div class="columns">
<div class="column is-narrow"> <div class="column is-narrow">
@ -197,6 +243,66 @@ doc-subtab: options
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
{% include anchor.html name="Centering columns" %}
<div class="content">
<p>
While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
</p>
</div>
<div class="columns is-mobile is-centered">
<div class="column is-half is-narrow">
<p class="bd-notification is-info">
<code class="html">is-half</code><br>
<code class="html">is-narrow</code>
</p>
</div>
</div>
{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
<div class="content">
<p>
Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
</p>
</div>
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Fifth Column
</p>
</div>
</div>
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
{% include anchor.html name="Narrow column" %} {% include anchor.html name="Narrow column" %}
<div class="content"> <div class="content">

View File

@ -66,7 +66,7 @@ route: index
<p class="title is-4"><strong>Modular</strong></p> <p class="title is-4"><strong>Modular</strong></p>
<p class="subtitle">Just import what you <strong>need</strong></p> <p class="subtitle">Just import what you <strong>need</strong></p>
</a> </a>
<a class="column has-text-centered" href="{{ site.url }}/documentation/grid/columns/"> <a class="column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
<span class="icon is-large"> <span class="icon is-large">
<i class="fa fa-css3"></i> <i class="fa fa-css3"></i>
</span> </span>
@ -95,7 +95,7 @@ route: index
<span class="icon is-medium"> <span class="icon is-medium">
<i class="fa fa-pause"></i> <i class="fa fa-pause"></i>
</span> </span>
<a href="{{ site.url }}/documentation/grid/columns"> <a href="{{ site.url }}/documentation/columns/basics">
Simple <strong>columns</strong> Simple <strong>columns</strong>
</a> </a>
</h3> </h3>
@ -197,7 +197,7 @@ route: index
<span class="icon is-medium"> <span class="icon is-medium">
<i class="fa fa-th-large"></i> <i class="fa fa-th-large"></i>
</span> </span>
<a href="{{ site.url }}/documentation/grid/tiles"> <a href="{{ site.url }}/documentation/layout/tiles">
Magic <strong>tiles</strong> Magic <strong>tiles</strong>
</a> </a>
</h3> </h3>