Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix index columns

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-10 12:26:37 +01:00
parent b61f9d15dc
commit 8932a3e67f
8 changed files with 188 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
docs/_includes/index/columns.html
View File

@@ -8,14 +8,30 @@
</div>
{% endcapture %}
<section class="section is-medium">
{% assign columns_link = site.data.links.by_id['columns-basics'] %}
<section class="bd-columns section is-medium">
<div class="container">
<h3 class="title is-2">
<a href="{{ site.url }}/documentation/columns/basics">
Simple <strong>columns</strong>
</a>
</h3>
<h4 class="subtitle is-4">Just add columns, they will resize themselves</h4>
<header class="bd-columns-header">
<h3 class="title is-3">
<a href="{{ site.url }}{{ columns_link.path }}">
The <strong>simplest</strong> grid system
</a>
</h3>
<h4 class="subtitle is-4">
Just add columns, they will resize themselves
</h4>
</header>
<div class="message is-warning is-hidden-tablet">
<p class="message-header">
Better on desktop
</p>
<p class="message-body">
This interactive tool works better on larger screens! That's because Bulma columns are <strong>vertical by default</strong>. I recommend revisiting this page later when you're on desktop. 😉
</p>
</div>
<div id="grid" class="columns">
<div class="column">
<div class="notification is-primary has-text-centered">
@@ -78,21 +94,30 @@
</div>
</div>
</div>
<div class="field has-addons has-addons-centered">
<p class="control">
<a id="add" class="button is-unselectable">Add column</a>
</p>
<p class="control">
<a id="remove" class="button is-unselectable">Remove column</a>
</p>
<div class="bd-columns-tools">
<div class="bd-columns-tool bd-is-try">
<div class="buttons">
<a id="add" class="button is-large is-link is-unselectable">
<strong>Add column</strong>
</a>
<a id="remove" class="button is-large is-light is-unselectable">
<strong>Remove</strong>
</a>
</div>
</div>
<div class="bd-columns-tool bd-is-markup">
<div id="markup">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>
</div>
</div>
<div id="message" class="message is-info">
<p class="message-header">Info</p>
<p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
</div>
<div id="markup">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>
</div>
</section>