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

Add bd classes

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-14 12:44:24 +01:00
parent 88fb510d93
commit cd2f886df2
66 changed files with 1184 additions and 2456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/documentation/components/breadcrumb.html
View File

@@ -160,7 +160,7 @@ variables:
</div>
<hr>
<div class="example">
<div class="bd-example">
{{breadcrumb_example}}
</div>
@@ -174,14 +174,14 @@ variables:
</div>
<div class="example">
<div class="bd-example">
{{breadcrumb_centered_example}}
</div>
{% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_right_example}}
</div>
@@ -195,7 +195,7 @@ variables:
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
</div>
<div class="example">
<div class="bd-example">
{{breadcrumb_icons_example}}
</div>
@@ -208,25 +208,25 @@ variables:
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{breadcrumb_arrow_example}}
</div>
{% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_bullet_example}}
</div>
{% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_dot_example}}
</div>
{% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_succeeds_example}}
</div>
@@ -238,19 +238,19 @@ variables:
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{breadcrumb_small_example}}
</div>
{% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_medium_example}}
</div>
{% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{breadcrumb_large_example}}
</div>

16
docs/documentation/components/level.html
View File

@@ -38,9 +38,9 @@ doc-subtab: level
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
</div>
<div class="structure">
<nav class="level structure-item is-structure-container" title="level">
<div class="level-left structure-item" title="level-left">
<div class="bd-structure">
<nav class="level bd-structure-item bd-is-structure-container" title="level">
<div class="level-left bd-structure-item" title="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> posts
@@ -59,7 +59,7 @@ doc-subtab: level
</div>
</div>
</div>
<div class="level-right structure-item" title="level-right">
<div class="level-right bd-structure-item" title="level-right">
<p class="level-item">
<strong>All</strong>
</p>
@@ -115,7 +115,7 @@ doc-subtab: level
</div>
</nav>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{nav_example}}
</div>
{% highlight html %}
@@ -175,13 +175,13 @@ doc-subtab: level
</p>
</nav>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{nav_centered_example}}
</div>
{% highlight html %}
{{nav_centered_example}}
{% endhighlight %}
<div class="example">
<div class="bd-example">
{{nav_centered_bis_example}}
</div>
{% highlight html %}
@@ -222,7 +222,7 @@ doc-subtab: level
</div>
</nav>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{nav_mobile_example}}
</div>
{% highlight html %}

14
docs/documentation/components/media-object.html
View File

@@ -23,14 +23,14 @@ doc-subtab: media-object
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
</div>
<div class="structure">
<div class="bd-structure">
<article class="media">
<figure class="media-left structure-item" title="media-left">
<figure class="media-left bd-structure-item" title="media-left">
<p class="image is-64x64">
<img src="{{site.url}}/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content structure-item is-structure-right" title="media-content">
<div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
@@ -52,7 +52,7 @@ doc-subtab: media-object
</div>
</nav>
</div>
<div class="media-right structure-item" title="media-right">
<div class="media-right bd-structure-item" title="media-right">
<button class="delete"></button>
</div>
</article>
@@ -92,7 +92,7 @@ doc-subtab: media-object
</div>
</article>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{media_example}}
</div>
{% highlight html %}
@@ -133,7 +133,7 @@ doc-subtab: media-object
</div>
</article>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{media_bis_example}}
</div>
{% highlight html %}
@@ -231,7 +231,7 @@ doc-subtab: media-object
</div>
</article>
{% endcapture %}
<div class="example">
<div class="bd-example">
{{media_nested_example}}
</div>
{% highlight html %}

4
docs/documentation/components/nav.html
View File

@@ -118,7 +118,7 @@ doc-subtab: nav
</nav>
{% endcapture %}
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{nav_example}}
</div>
@@ -176,7 +176,7 @@ doc-subtab: nav
</nav>
{% endcapture %}
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{nav_tabs_example}}
</div>

26
docs/documentation/components/navbar.html
View File

@@ -62,7 +62,7 @@ variables:
{% include subnav-components.html %}
{% capture navbar_example %}
{% include navbar.html id="Example" %}
{% include navbar.html id="bd-example" %}
{% endcapture %}
{% capture navbar_brand_example %}
@@ -591,7 +591,7 @@ document.addEventListener('DOMContentLoaded', function () {
</ul>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{navbar_example}}
</div>
@@ -621,7 +621,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{navbar_brand_items_example}}
</div>
@@ -641,7 +641,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
<div class="navbar-burger" style="display: flex;">
<span></span>
<span></span>
@@ -657,7 +657,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
<div class="navbar-burger is-active" style="display: flex;">
<span></span>
<span></span>
@@ -798,7 +798,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{navbar_transparent_example}}
</div>
@@ -825,7 +825,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_example }}
</div>
</div>
@@ -866,7 +866,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_hover_example }}
</div>
</div>
@@ -880,7 +880,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_active_example }}
</div>
</div>
@@ -905,7 +905,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_right_example }}
</div>
</div>
@@ -935,7 +935,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_default_example }}
</div>
</div>
@@ -967,7 +967,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_boxed_example }}
</div>
</div>
@@ -983,7 +983,7 @@ document.addEventListener('DOMContentLoaded', function () {
<div class="columns">
<div class="column">
<div class="example is-paddingless">
<div class="bd-example is-paddingless">
{{ navbar_dropdown_item_active_example }}
</div>
</div>

14
docs/documentation/components/pagination.html
View File

@@ -209,7 +209,7 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{pagination_example}}
</div>
@@ -221,7 +221,7 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{pagination_options_example}}
</div>
@@ -233,13 +233,13 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{pagination_centered_example}}
</div>
{% highlight html %}{{pagination_centered_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{pagination_right_example}}
</div>
@@ -256,15 +256,15 @@ variables:
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
</p>
<div class="example">
<div class="bd-example">
{{pagination_small_example}}
</div>
<div class="example">
<div class="bd-example">
{{pagination_medium_example}}
</div>
<div class="example">
<div class="bd-example">
{{pagination_large_example}}
</div>

28
docs/documentation/components/tabs.html
View File

@@ -382,7 +382,7 @@ variables:
The <strong>default</strong> tabs style has a single border at the bottom.</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_example}}
</div>
{% highlight html %}{{tabs_example}}{% endhighlight %}
@@ -396,12 +396,12 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_centered_example}}
</div>
{% highlight html %}{{tabs_centered_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_right_example}}
</div>
{% highlight html %}{{tabs_right_example}}{% endhighlight %}
@@ -413,7 +413,7 @@ variables:
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_icons_example}}
</div>
{% highlight html %}{{tabs_icons_example}}{% endhighlight %}
@@ -423,17 +423,17 @@ variables:
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_small_example}}
</div>
{% highlight html %}{{tabs_small_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_medium_example}}
</div>
{% highlight html %}{{tabs_medium_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_large_example}}
</div>
{% highlight html %}{{tabs_large_example}}{% endhighlight %}
@@ -445,7 +445,7 @@ variables:
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
</div>
<div class="example">
<div class="bd-example">
{{tabs_boxed_example}}
</div>
{% highlight html %}{{tabs_boxed_example}}{% endhighlight %}
@@ -454,7 +454,7 @@ variables:
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
</p>
<div class="example">
<div class="bd-example">
{{tabs_toggle_example}}
</div>
{% highlight html %}{{tabs_toggle_example}}{% endhighlight %}
@@ -463,7 +463,7 @@ variables:
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
</p>
<div class="example">
<div class="bd-example">
{{tabs_fullwidth_example}}
</div>
{% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %}
@@ -475,22 +475,22 @@ variables:
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
</div>
<div class="example">
<div class="bd-example">
{{tabs_centered_boxed_example}}
</div>
{% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_toggle_fullwidth_example}}
</div>
{% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_centered_boxed_medium_example}}
</div>
{% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{tabs_toggle_fullwidth_large_example}}
</div>
{% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}