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 modifiers links

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 17:11:24 +01:00
parent 5d4e3582f0
commit 425860f56f
8 changed files with 780 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
docs/documentation/modifiers/syntax.html
View File

@@ -1,12 +1,16 @@
---
title: Modifiers syntax
subtitle: "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.<br>They all start with <code>is-</code> or <code>has-</code>.</h2>"
layout: documentation
doc-tab: modifiers
doc-subtab: syntax
breadcrumb:
- home
- documentation
- modifiers
- modifiers-syntax
---
{% include subnav/subnav-modifiers.html %}
{% capture button_example %}
<a class="button">
Button
@@ -19,75 +23,68 @@ doc-subtab: syntax
</a>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Modifiers syntax</h1>
<h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.
<br>
They all start with <code>is-</code> or <code>has-</code>.</h2>
<hr>
<div class="columns">
<div class="column">
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
</div>
<div class="column">
<p>
{{button_example}}
</p>
</div>
<div class="column is-half">
{% highlight html %}{{button_example}}{% endhighlight %}
</div>
<div class="columns">
<div class="column">
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
</div>
<div class="column">
<p>
{{button_example}}
</p>
</div>
<div class="column is-half">
{% highlight html %}{{button_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
</div>
<div class="column">
<p>
{{button_primary_example}}
</p>
</div>
<div class="column is-half">
{% highlight html %}{{button_primary_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>You can use one of the <strong>6 main colors</strong>:</p>
<ul>
<li><code>is-primary</code></li>
<li><code>is-link</code></li>
<li><code>is-info</code></li>
<li><code>is-success</code></li>
<li><code>is-warning</code></li>
<li><code>is-danger</code></li>
</ul>
</div>
<div class="columns">
<div class="column">
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
</div>
<div class="column">
<p>
{{button_primary_example}}
</p>
</div>
<div class="column is-half">
{% highlight html %}{{button_primary_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>You can use one of the <strong>6 main colors</strong>:</p>
<ul>
<li><code>is-primary</code></li>
<li><code>is-link</code></li>
<li><code>is-info</code></li>
<li><code>is-success</code></li>
<li><code>is-warning</code></li>
<li><code>is-danger</code></li>
</ul>
</div>
</div>
<div class="column">
<p class="field">
<a class="button is-primary">Button</a>
</p>
<p class="field">
<a class="button is-link">Button</a>
</p>
<p class="field">
<a class="button is-info">Button</a>
</p>
<p class="field">
<a class="button is-success">Button</a>
</p>
<p class="field">
<a class="button is-warning">Button</a>
</p>
<p class="field">
<a class="button is-danger">Button</a>
</p>
</div>
<div class="column is-half">
<div class="highlight-full">
</div>
<div class="column">
<p class="field">
<a class="button is-primary">Button</a>
</p>
<p class="field">
<a class="button is-link">Button</a>
</p>
<p class="field">
<a class="button is-info">Button</a>
</p>
<p class="field">
<a class="button is-success">Button</a>
</p>
<p class="field">
<a class="button is-warning">Button</a>
</p>
<p class="field">
<a class="button is-danger">Button</a>
</p>
</div>
<div class="column is-half">
<div class="highlight-full">
{% highlight html %}
<a class="button is-primary">
Button
@@ -108,35 +105,36 @@ doc-subtab: syntax
Button
</a>
{% endhighlight %}
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>You can also alter the <strong>size</strong>:</p>
<ul>
<li><code>is-small</code></li>
<li><code>is-medium</code></li>
<li><code>is-large</code></li>
</ul>
</div>
</div>
<div class="column">
<p class="field">
<a class="button is-small">Button</a>
</p>
<p class="field">
<a class="button">Button</a>
</p>
<p class="field">
<a class="button is-medium">Button</a>
</p>
<p class="field">
<a class="button is-large">Button</a>
</p>
</div>
<div class="column is-half">
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>You can also alter the <strong>size</strong>:</p>
<ul>
<li><code>is-small</code></li>
<li><code>is-medium</code></li>
<li><code>is-large</code></li>
</ul>
</div>
</div>
<div class="column">
<p class="field">
<a class="button is-small">Button</a>
</p>
<p class="field">
<a class="button">Button</a>
</p>
<p class="field">
<a class="button is-medium">Button</a>
</p>
<p class="field">
<a class="button is-large">Button</a>
</p>
</div>
<div class="column is-half">
{% highlight html %}
<a class="button is-small">
Button
@@ -152,30 +150,31 @@ doc-subtab: syntax
</a>
{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
<ul>
<li><code>is-outlined</code></li>
<li><code>is-loading</code></li>
<li><code>[disabled]</code></li>
</ul>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
<ul>
<li><code>is-outlined</code></li>
<li><code>is-loading</code></li>
<li><code>[disabled]</code></li>
</ul>
</div>
</div>
<div class="column">
<p class="field">
<a class="button is-primary is-outlined">Button</a>
</p>
<p class="field">
<a class="button is-primary is-loading">Button</a>
</p>
<p class="field">
<a class="button is-primary" disabled>Button</a>
</p>
</div>
<div class="column is-half">
</div>
<div class="column">
<p class="field">
<a class="button is-primary is-outlined">Button</a>
</p>
<p class="field">
<a class="button is-primary is-loading">Button</a>
</p>
<p class="field">
<a class="button is-primary" disabled>Button</a>
</p>
</div>
<div class="column is-half">
{% highlight html %}
<a class="button is-primary is-outlined">
Button
@@ -188,6 +187,4 @@ doc-subtab: syntax
</a>
{% endhighlight %}
</div>
</div>
</div>
</section>
</div>