library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add gap

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/anchor.html
View File

@ -1,6 +1,6 @@
<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 }}
<a class="bd-anchor-link" href="#{{ include.name | slugify }}">
#

6
docs/_includes/comparison.html
View File

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

4
docs/_includes/subnav-columns.html
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/">
Options
</a>
<a class="navbar-item is-tab {% if page.doc-subtab == 'variable-gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/variable-gap/">
Variable gap
<a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
Gap
</a>
</div>
</div>

3
docs/_layouts/documentation.html
View File

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

8
docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md
View File

@ -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**?<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"
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/)!

43
docs/documentation/columns/gap.html Normal file
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>

106
docs/documentation/columns/options.html
View File

@ -72,6 +72,52 @@ doc-subtab: options
</div>
{% 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 %}
<div class="columns">
<div class="column is-narrow">
@ -197,6 +243,66 @@ doc-subtab: options
{% 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" %}
<div class="content">

6
docs/index.html
View File

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