Permalink
Cannot retrieve contributors at this time
--- | |
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> | |
{% highlight html %}{{ buttons }}{% endhighlight %} | |
</div> |