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

Update overview

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 17:32:12 +01:00
parent 425860f56f
commit e9dd9eb80e
12 changed files with 1013 additions and 1008 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
docs/documentation/overview/modular.html
View File

@@ -1,38 +1,22 @@
---
title: Modularity
subtitle: "Just import what you <strong>need</strong>"
layout: documentation
doc-tab: overview
doc-subtab: modular
breadcrumb:
- home
- documentation
- overview
- overview-modular
---
{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
<h1 class="title">Modular</h1>
<h2 class="subtitle">Just import what you <strong>need</strong></h2>
<hr>
<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 %}
{% capture import %}
@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"
{% endhighlight %}
<p>
Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
</p>
{% highlight html %}
{% endcapture %}
{% capture columns %}
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
@@ -40,45 +24,14 @@ doc-subtab: modular
<div class="column">4</div>
<div class="column">5</div>
</div>
{% endhighlight %}
{% endcapture %}
<hr>
<p>
What if you only want the <strong>button</strong> styles instead?
</p>
{% highlight sass %}
{% capture only_button %}
@import "bulma/sass/utilities/_all"
@import "bulma/sass/elements/button.sass"
{% 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 %}
{% endcapture %}
{% capture buttons %}
<a class="button">
Button
</a>
@@ -94,7 +47,57 @@ doc-subtab: modular
<a class="button is-loading">
Loading button
</a>
{% endhighlight %}
</div>
</div>
</section>
{% 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>