mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
9c08296b6f
Links and buttons have different semantic html meanings, and it is somewhat of a design (and accessibility) anti-pattern to style links as a button
106 lines
2.3 KiB
HTML
106 lines
2.3 KiB
HTML
---
|
|
title: Modularity
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: modular
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- overview
|
|
- overview-modular
|
|
---
|
|
|
|
{% capture import %}
|
|
@import "bulma/sass/utilities/_all.sass"
|
|
@import "bulma/sass/grid/columns.sass"
|
|
{% endcapture %}
|
|
|
|
{% capture columns %}
|
|
<div class="columns">
|
|
<div class="column">1</div>
|
|
<div class="column">2</div>
|
|
<div class="column">3</div>
|
|
<div class="column">4</div>
|
|
<div class="column">5</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture only_button %}
|
|
@import "bulma/sass/utilities/_all.sass"
|
|
@import "bulma/sass/elements/button.sass"
|
|
{% endcapture %}
|
|
|
|
{% capture buttons %}
|
|
<button class="button">
|
|
Button
|
|
</button>
|
|
|
|
<button class="button is-primary">
|
|
Primary button
|
|
</button>
|
|
|
|
<button class="button is-large">
|
|
Large button
|
|
</button>
|
|
|
|
<button class="button is-loading">
|
|
Loading button
|
|
</button>
|
|
{% endcapture %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
|
</p>
|
|
<p>
|
|
For example, let's say you only want the Bulma <strong>columns.</strong>
|
|
<br>
|
|
The file is located in the <code>bulma/sass/grid</code> folder.
|
|
<br>
|
|
Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
|
|
</p>
|
|
{% highlight sass %}{{ import }}{% endhighlight %}
|
|
<p>
|
|
Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
|
|
</p>
|
|
{% highlight html %}{{ columns }}{% endhighlight %}
|
|
|
|
<hr>
|
|
|
|
<p>
|
|
What if you only want the <strong>button</strong> styles instead?
|
|
</p>
|
|
{% highlight sass %}{{ only_button }}{% endhighlight %}
|
|
<p>
|
|
You can now use the <code>.button</code> class, and all its modifiers:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<code>.is-active</code>
|
|
</li>
|
|
<li>
|
|
<code>.is-primary</code>,
|
|
<code>.is-info</code>,
|
|
<code>.is-success</code>...
|
|
</li>
|
|
<li>
|
|
<code>.is-small</code>,
|
|
<code>.is-medium</code>,
|
|
<code>.is-large</code>
|
|
</li>
|
|
<li>
|
|
<code>.is-outlined</code>,
|
|
<code>.is-inverted</code>,
|
|
<code>.is-link</code>
|
|
</li>
|
|
<li>
|
|
<code>.is-loading</code>,
|
|
<code>[disabled]</code>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="bd-snippet-code highlight-full">
|
|
{% highlight html %}{{ buttons }}{% endhighlight %}
|
|
</div>
|
|
</div>
|