Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 19:04:30 -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

10
docs/documentation/elements/button.html
View File

@@ -466,7 +466,7 @@ variables:
<div class="columns">
<div class="column">
<div class="callout is-primary">
<div class="bd-callout is-primary">
{{button_inverted_example}}
</div>
</div>
@@ -479,7 +479,7 @@ variables:
<div class="columns">
<div class="column">
<div class="callout is-primary">
<div class="bd-callout is-primary">
{{button_inverted_outlined_example}}
</div>
</div>
@@ -620,7 +620,7 @@ variables:
<div class="content">
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
</div>
<div class="example">
<div class="bd-example">
{{button_group_example}}
</div>
{% highlight html %}{{button_group_example}}{% endhighlight %}
@@ -632,7 +632,7 @@ variables:
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div>
<div class="example">
<div class="bd-example">
{{button_addons_example}}
</div>
{% highlight html %}{{button_addons_example}}{% endhighlight %}
@@ -644,7 +644,7 @@ variables:
<p>You can group together addons as well:</p>
</div>
<div class="example">
<div class="bd-example">
{{button_group_addons_example}}
</div>
{% highlight html %}{{button_group_addons_example}}{% endhighlight %}

8
docs/documentation/elements/content.html
View File

@@ -164,7 +164,7 @@ variables:
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
</div>
<div class="example">
<div class="bd-example">
{{content_example}}
</div>
@@ -175,7 +175,7 @@ variables:
<div class="content">
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
</div>
<div class="example">
<div class="bd-example">
<div class="content is-small">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -189,7 +189,7 @@ variables:
</ul>
</div>
</div>
<div class="example">
<div class="bd-example">
<div class="content is-medium">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -203,7 +203,7 @@ variables:
</ul>
</div>
</div>
<div class="example">
<div class="bd-example">
<div class="content is-large">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>

18
docs/documentation/elements/form.html
View File

@@ -1096,7 +1096,7 @@ doc-subtab: form
<div class="content">
<p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_example}}
</div>
{% highlight html %}{{addons_example}}{% endhighlight %}
@@ -1112,7 +1112,7 @@ doc-subtab: form
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_static_example}}
</div>
{% highlight html %}{{addons_static_example}}{% endhighlight %}
@@ -1120,7 +1120,7 @@ doc-subtab: form
<div class="content">
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_expanded_example}}
</div>
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
@@ -1128,7 +1128,7 @@ doc-subtab: form
<div class="content">
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_expanded_fullwidth_example}}
</div>
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
@@ -1136,11 +1136,11 @@ doc-subtab: form
<div class="content">
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
</div>
<div class="example">
<div class="bd-example">
{{addons_center_example}}
</div>
{% highlight html %}{{addons_center_example}}{% endhighlight %}
<div class="example">
<div class="bd-example">
{{addons_right_example}}
</div>
{% highlight html %}{{addons_right_example}}{% endhighlight %}
@@ -1158,7 +1158,7 @@ doc-subtab: form
Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.
</p>
</div>
<div class="example">
<div class="bd-example">
{{group_example}}
</div>
{% highlight html %}{{group_example}}{% endhighlight %}
@@ -1178,7 +1178,7 @@ doc-subtab: form
</ul>
<p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
</div>
<div class="example">
<div class="bd-example">
{{horizontal_form_example}}
</div>
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
@@ -1205,7 +1205,7 @@ doc-subtab: form
</li>
</ul>
</div>
<div class="example">
<div class="bd-example">
{{field_label_example}}
</div>
{% highlight html %}{{field_label_example}}{% endhighlight %}

2
docs/documentation/elements/icon.html
View File

@@ -42,7 +42,7 @@ variables:
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
</div>
<div class="example">
<div class="bd-example">
{{icon_example}}
</div>

4
docs/documentation/elements/image.html
View File

@@ -49,7 +49,7 @@ variables:
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
</div>
<div class="example">
<div class="bd-example">
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/128x128.png">
</figure>
@@ -82,7 +82,7 @@ variables:
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
</div>
<div class="example">
<div class="bd-example">
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/256x256.png">
</figure>

6
docs/documentation/elements/progress.html
View File

@@ -46,21 +46,21 @@ variables:
<hr>
<div class="example">
<div class="bd-example">
{{ progress }}
</div>
{% highlight html %}{{ progress }}{% endhighlight %}
{% include heading.html name="Colors" %}
<div class="example">
<div class="bd-example">
{{ progress_colors }}
</div>
{% highlight html %}{{ progress_colors }}{% endhighlight %}
{% include heading.html name="Sizes" %}
<div class="example">
<div class="bd-example">
{{ progress_sizes }}
</div>
{% highlight html %}{{ progress_sizes }}{% endhighlight %}

2
docs/documentation/elements/table.html
View File

@@ -393,7 +393,7 @@ variables:
</p>
</div>
<div class="example">
<div class="bd-example">
{{table_example}}
</div>

12
docs/documentation/elements/tag.html
View File

@@ -364,7 +364,7 @@ variables:
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags }}
</div>
</div>
@@ -380,7 +380,7 @@ variables:
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_multiple }}
</div>
</div>
@@ -396,7 +396,7 @@ variables:
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_addons }}
</div>
</div>
@@ -412,7 +412,7 @@ variables:
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_delete_addons }}
</div>
</div>
@@ -428,7 +428,7 @@ variables:
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_field_addons }}
</div>
</div>
@@ -444,7 +444,7 @@ variables:
This can be useful for a long list of <strong>blog tags</strong>.
</p>
</div>
<div class="example">
<div class="bd-example">
{{ tags_blog_addons }}
</div>
</div>