Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-16 18:44:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
docs/documentation/start/syntax.html Normal file
View File

@@ -0,0 +1,186 @@
---
title: Bulma's Modifiers Syntax
layout: docs
theme: start
doc-tab: start
doc-subtab: syntax
breadcrumb:
- home
- documentation
- start
- start-syntax
---
{% capture button_example %}
<button class="button">Button</button>
{% endcapture %} {% capture button_primary_example %}
<button class="button is-primary">Button</button>
{% endcapture %} {% capture button_colors %}
<button class="button is-primary">Button</button>
<button class="button is-link">Button</button>
<button class="button is-info">Button</button>
<button class="button is-success">Button</button>
<button class="button is-warning">Button</button>
<button class="button is-danger">Button</button>
{% endcapture %} {% capture button_sizes %}
<button class="button is-small">Button</button>
<button class="button">Button</button>
<button class="button is-medium">Button</button>
<button class="button is-large">Button</button>
{% endcapture %} {% capture button_states %}
<button class="button is-primary is-outlined">Button</button>
<button class="button is-loading">Button</button>
<button class="button" disabled>Button</button>
{% endcapture %} {% capture button_combinations %}
<button class="button is-primary is-small" disabled>Button</button>
<button class="button is-info is-loading">Button</button>
<button class="button is-danger is-outlined is-large">Button</button>
{% endcapture %}
<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>
<div class="column">
<p class="field">
<button class="button is-primary">Button</button>
</p>
<p class="field">
<button class="button is-link">Button</button>
</p>
<p class="field">
<button class="button is-info">Button</button>
</p>
<p class="field">
<button class="button is-success">Button</button>
</p>
<p class="field">
<button class="button is-warning">Button</button>
</p>
<p class="field">
<button class="button is-danger">Button</button>
</p>
</div>
<div class="column is-half">
<div class="bd-highlight-full">
{% highlight html %}{{ button_colors }}{% 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">
<button class="button is-small">Button</button>
</p>
<p class="field">
<button class="button">Button</button>
</p>
<p class="field">
<button class="button is-medium">Button</button>
</p>
<p class="field">
<button class="button is-large">Button</button>
</p>
</div>
<div class="column is-half">
{% highlight html %}{{ button_sizes }}{% 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>
<div class="column">
<p class="field">
<button class="button is-primary is-outlined">Button</button>
</p>
<p class="field">
<button class="button is-loading">Button</button>
</p>
<p class="field">
<button class="button" disabled>Button</button>
</p>
</div>
<div class="column is-half">
{% highlight html %}{{ button_states }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
As a result, it's very easy to <strong>combine modifiers:</strong>
</div>
</div>
<div class="column">
<p class="field">
<button class="button is-primary is-small" disabled>Button</button>
</p>
<p class="field">
<button class="button is-info is-loading">Button</button>
</p>
<p class="field">
<button class="button is-danger is-outlined is-large">Button</button>
</p>
</div>
<div class="column is-half">
{% highlight html %}{{ button_combinations }}{% endhighlight %}
</div>
</div>