mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Update overview
This commit is contained in:
Jeremy Thomas
parent
425860f56f
commit
e9dd9eb80e
@ -8,6 +8,42 @@
|
||||
"name": "Documentation",
|
||||
"path": "/documentation"
|
||||
},
|
||||
"overview": {
|
||||
"name": "Overview",
|
||||
"path": "/documentation/overview"
|
||||
},
|
||||
"overview-start": {
|
||||
"name": "Start",
|
||||
"path": "/documentation/overview/start"
|
||||
},
|
||||
"overview-classes": {
|
||||
"name": "Classes",
|
||||
"path": "/documentation/overview/classes"
|
||||
},
|
||||
"overview-modular": {
|
||||
"name": "Modular",
|
||||
"path": "/documentation/overview/modular"
|
||||
},
|
||||
"overview-responsiveness": {
|
||||
"name": "Responsiveness",
|
||||
"path": "/documentation/overview/responsiveness"
|
||||
},
|
||||
"overview-variables": {
|
||||
"name": "Variables",
|
||||
"path": "/documentation/overview/variables"
|
||||
},
|
||||
"overview-colors": {
|
||||
"name": "Colors",
|
||||
"path": "/documentation/overview/colors"
|
||||
},
|
||||
"overview-functions": {
|
||||
"name": "Functions",
|
||||
"path": "/documentation/overview/functions"
|
||||
},
|
||||
"overview-mixins": {
|
||||
"name": "Mixins",
|
||||
"path": "/documentation/overview/mixins"
|
||||
},
|
||||
"modifiers": {
|
||||
"name": "Modifiers",
|
||||
"path": "/documentation/modifiers"
|
||||
@ -214,6 +250,7 @@
|
||||
}
|
||||
},
|
||||
"order": {
|
||||
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
|
||||
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
|
||||
|
||||
@ -77,6 +77,8 @@ $main-spacing: 2.5rem
|
||||
.bd-side-background
|
||||
display: none
|
||||
|
||||
$sidebar-width: 16rem
|
||||
|
||||
+tablet
|
||||
.bd-duo
|
||||
display: flex
|
||||
@ -88,7 +90,7 @@ $main-spacing: 2.5rem
|
||||
.bd-prev-next
|
||||
display: flex
|
||||
.bd-side
|
||||
flex: 0 0 calc(#{$carbon-width} + 1.5rem)
|
||||
flex: 0 0 calc(#{$sidebar-width} + 1.5rem)
|
||||
|
||||
+desktop
|
||||
.bd-main
|
||||
@ -97,14 +99,16 @@ $main-spacing: 2.5rem
|
||||
margin-left: -3rem
|
||||
padding: 3rem
|
||||
.bd-header
|
||||
align-items: center
|
||||
display: flex
|
||||
min-height: 130px
|
||||
.bd-header-titles
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
.bd-header-carbon
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
margin-left: 1.5rem
|
||||
margin: -15px 0 -15px 1.5rem
|
||||
width: $carbon-width
|
||||
.bd-side
|
||||
padding: 3rem 0 3rem 1.5rem
|
||||
|
||||
@ -9600,7 +9600,7 @@ label.panel-block:hover {
|
||||
display: flex;
|
||||
}
|
||||
.bd-side {
|
||||
flex: 0 0 calc(300px + 1.5rem);
|
||||
flex: 0 0 calc(16rem + 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@ -9613,7 +9613,9 @@ label.panel-block:hover {
|
||||
padding: 3rem;
|
||||
}
|
||||
.bd-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-height: 130px;
|
||||
}
|
||||
.bd-header-titles {
|
||||
flex-grow: 1;
|
||||
@ -9622,7 +9624,7 @@ label.panel-block:hover {
|
||||
.bd-header-carbon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 1.5rem;
|
||||
margin: -15px 0 -15px 1.5rem;
|
||||
width: 300px;
|
||||
}
|
||||
.bd-side {
|
||||
|
||||
@ -1,38 +1,33 @@
|
||||
---
|
||||
title: CSS classes
|
||||
subtitle: "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want."
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: classes
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-classes
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Classes</h1>
|
||||
<h2 class="subtitle">Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
|
||||
<br>
|
||||
<a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms<wbr>/bulma<wbr>/blob<wbr>/master<wbr>/css<wbr>/bulma.css</a></p>
|
||||
<p>
|
||||
Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code><input type="text"></code> elements you want to style.
|
||||
</p>
|
||||
<p>
|
||||
Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
|
||||
</li>
|
||||
<li>
|
||||
the <a href="{{ site.url }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
|
||||
<br>
|
||||
<a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms<wbr>/bulma<wbr>/blob<wbr>/master<wbr>/css<wbr>/bulma.css</a></p>
|
||||
<p>
|
||||
Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code><input type="text"></code> elements you want to style.
|
||||
</p>
|
||||
<p>
|
||||
Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
|
||||
</li>
|
||||
<li>
|
||||
the <a href="{{ site.url }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Colors
|
||||
subtitle: "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: colors
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-colors
|
||||
colors:
|
||||
- white
|
||||
- black
|
||||
@ -25,103 +31,92 @@ shades:
|
||||
- white-bis
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
|
||||
</p>
|
||||
<p>
|
||||
This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Colors</h1>
|
||||
<h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components</h2>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
<th>Computed value</th>
|
||||
<th>Invert value</th>
|
||||
<th>Computed invert value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for color in page.colors %}
|
||||
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
|
||||
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ derivedColor.id | capitalize }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ derivedColor.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ initialColor.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=initialColor.value %}
|
||||
</td>
|
||||
{% if derivedColor.invertValue %}
|
||||
<td>
|
||||
<code>{{ derivedColor.invertValue }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=derivedColor.invertValue %}
|
||||
</td>
|
||||
{% elsif derivedColor.invertId %}
|
||||
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
|
||||
<td>
|
||||
<code>${{ derivedColor.invertId }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=invertColor.value %}
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma also provides a <code>$shades</code> <strong>Sass map</strong>, that only contains shades of grey between black and white.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
|
||||
</p>
|
||||
<p>
|
||||
This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
<th>Computed value</th>
|
||||
<th>Invert value</th>
|
||||
<th>Computed invert value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for color in page.colors %}
|
||||
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
|
||||
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ derivedColor.id | capitalize }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ derivedColor.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ initialColor.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=initialColor.value %}
|
||||
</td>
|
||||
{% if derivedColor.invertValue %}
|
||||
<td>
|
||||
<code>{{ derivedColor.invertValue }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=derivedColor.invertValue %}
|
||||
</td>
|
||||
{% elsif derivedColor.invertId %}
|
||||
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
|
||||
<td>
|
||||
<code>${{ derivedColor.invertId }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=invertColor.value %}
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma also provides a <code>$shades</code> <strong>Sass map</strong>, that only contains shades of grey between black and white.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for shade in page.shades %}
|
||||
{% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ initial_shade.name | capitalize }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ initial_shade.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=initial_shade.value %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for shade in page.shades %}
|
||||
{% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ initial_shade.name | capitalize }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ initial_shade.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=initial_shade.value %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Customize Bulma
|
||||
title: Customize Bulma with Sass
|
||||
subtitle: "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: customize
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-customize
|
||||
---
|
||||
|
||||
{% capture scss_code %}
|
||||
@ -49,65 +55,54 @@ $colors: map-merge($colors, $addColors);
|
||||
@import "../bulma";
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
<div class="content">
|
||||
<p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Customizing with Sass</h1>
|
||||
<h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of <strong>variables</strong></h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Download</strong> the source files:
|
||||
</p>
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
<div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Set</strong> your variables
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
|
||||
</p>
|
||||
<div class="highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
See the <strong>result</strong>: before and after
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
|
||||
</p>
|
||||
<figure>
|
||||
<img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
|
||||
<img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
|
||||
</figure>
|
||||
</div>
|
||||
</article>
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Download</strong> the source files:
|
||||
</p>
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
<div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Set</strong> your variables
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
|
||||
</p>
|
||||
<div class="highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
See the <strong>result</strong>: before and after
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
|
||||
</p>
|
||||
<figure>
|
||||
<img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
|
||||
<img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
|
||||
</figure>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -1,236 +1,231 @@
|
||||
---
|
||||
title: Functions
|
||||
subtitle: "Utility functions to calculate colors and other values"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: functions
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-functions
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
<div class="content">
|
||||
<p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Functions</h1>
|
||||
<h2 class="subtitle">Utility functions to calculate colors and other values</h2>
|
||||
{% include anchor.html name="The <code>findColorInvert()</code> function" %}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="The <code>findColorInvert()</code> function" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
|
||||
<ul>
|
||||
<li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
|
||||
<li>otherwise, it outputs <code>#fff</code></li>
|
||||
</ul>
|
||||
<p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>color luminance</th>
|
||||
<th>findColorInvert()</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||
<code>#00d1b2</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.52831</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #3273dc;"></span>
|
||||
<code>#3273dc</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.23119</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #23d160;"></span>
|
||||
<code>#23d160</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.51067</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||
<code>#ffdd57</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.76863</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ff3860;"></span>
|
||||
<code>#ff3860</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.27313</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||
<code>#ffb3b3</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.61796</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||
<code>#ffbc6b</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.63053</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
||||
<code>hsl(294, 71%, 79%)</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.5529</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
|
||||
<br>
|
||||
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
|
||||
</p>
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
with <code>findColorInvert()</code>
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: findColorInvert($purple)</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
with manual setting
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: #fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="content">
|
||||
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
|
||||
<ul>
|
||||
<li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
|
||||
<li>otherwise, it outputs <code>#fff</code></li>
|
||||
</ul>
|
||||
<p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>color luminance</th>
|
||||
<th>findColorInvert()</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||
<code>#00d1b2</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.52831</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #3273dc;"></span>
|
||||
<code>#3273dc</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.23119</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #23d160;"></span>
|
||||
<code>#23d160</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.51067</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||
<code>#ffdd57</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.76863</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ff3860;"></span>
|
||||
<code>#ff3860</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.27313</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||
<code>#ffb3b3</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.61796</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||
<code>#ffbc6b</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.63053</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
||||
<code>hsl(294, 71%, 79%)</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.5529</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
|
||||
<br>
|
||||
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
|
||||
</p>
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
with <code>findColorInvert()</code>
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: findColorInvert($purple)</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
with manual setting
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: #fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -1,72 +1,67 @@
|
||||
---
|
||||
title: Mixins
|
||||
subtitle: "Utility mixins for custom elements and responsive helpers"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Mixins</h1>
|
||||
<h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td><code>=arrow($color)</code></td>
|
||||
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=block</code></td>
|
||||
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=clearfix</code></td>
|
||||
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=center($size)</code></td>
|
||||
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=delete</code></td>
|
||||
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=fa($size, $dimensions)</code></td>
|
||||
<td>Sets the style of a Font Awesome icon container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=hamburger($dimensions)</code></td>
|
||||
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=loader</code></td>
|
||||
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overflow-touch</code></td>
|
||||
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overlay($offset: 0)</code></td>
|
||||
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=placeholder</code></td>
|
||||
<td>Sets the styles of an input placeholder.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=unselectable</code></td>
|
||||
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=arrow($color)</code></td>
|
||||
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=block</code></td>
|
||||
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=clearfix</code></td>
|
||||
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=center($size)</code></td>
|
||||
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=delete</code></td>
|
||||
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=fa($size, $dimensions)</code></td>
|
||||
<td>Sets the style of a Font Awesome icon container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=hamburger($dimensions)</code></td>
|
||||
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=loader</code></td>
|
||||
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overflow-touch</code></td>
|
||||
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overlay($offset: 0)</code></td>
|
||||
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=placeholder</code></td>
|
||||
<td>Sets the styles of an input placeholder.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=unselectable</code></td>
|
||||
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="content">
|
||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Responsiveness
|
||||
subtitle: "Bulma is a <strong>mobile-first</strong> framework"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: responsiveness
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-responsiveness
|
||||
variables_keys:
|
||||
- gap
|
||||
- tablet
|
||||
@ -19,244 +25,234 @@ $widescreen-enabled: false
|
||||
$fullhd-enabled: false
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
{% include anchor.html name="Vertical by default" %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Responsiveness</h1>
|
||||
<h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
|
||||
<div class="content">
|
||||
<p>
|
||||
Every element in Bulma is <strong>mobile-first</strong> and optimizes for <strong>vertical reading</strong>, so by default on mobile:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>columns</code> are stacked vertically</li>
|
||||
<li>the <code>level</code> component will show its children stacked vertically</li>
|
||||
<li>the <code>nav</code> menu will be hidden</li>
|
||||
</ul>
|
||||
<p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Vertical by default" %}
|
||||
{% include anchor.html name="Breakpoints" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Every element in Bulma is <strong>mobile-first</strong> and optimizes for <strong>vertical reading</strong>, so by default on mobile:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>columns</code> are stacked vertically</li>
|
||||
<li>the <code>level</code> component will show its children stacked vertically</li>
|
||||
<li>the <code>nav</code> menu will be hidden</li>
|
||||
</ul>
|
||||
<p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
|
||||
</div>
|
||||
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
|
||||
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
|
||||
|
||||
{% include anchor.html name="Breakpoints" %}
|
||||
<div class="content">
|
||||
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<li><code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
|
||||
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
|
||||
<p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
{% case breakpoint.id %}
|
||||
{% when 'mobile' %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% when 'fullhd' %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}-only</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% if breakpoint.id == 'tablet' %}
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endcase %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<li><code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th style="width: 20%;">
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification is-success">mobile</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification is-success">tablet</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification is-success">desktop</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification is-success">widescreen</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">fullhd</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">tablet-only</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">desktop-only</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">widescreen-only</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification is-success">touch</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification is-success">until-widescreen</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification is-success">until-fullhd</p>
|
||||
</td>
|
||||
<td colspan="1">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
{% case breakpoint.id %}
|
||||
{% when 'mobile' %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% when 'fullhd' %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}-only</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% if breakpoint.id == 'tablet' %}
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endcase %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% include anchor.html name="Disabling breakpoints" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th style="width: 20%;">
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification is-success">mobile</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification is-success">tablet</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification is-success">desktop</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification is-success">widescreen</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">fullhd</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">tablet-only</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">desktop-only</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">widescreen-only</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification is-success">touch</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification is-success">until-widescreen</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification is-success">until-fullhd</p>
|
||||
</td>
|
||||
<td colspan="1">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
|
||||
{% include anchor.html name="Disabling breakpoints" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>$widecreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You can disable them by setting the corresponding Sass boolean to <code>false</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
<div class="highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>$widecreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You can disable them by setting the corresponding Sass boolean to <code>false</code>:
|
||||
</p>
|
||||
</div>
|
||||
{% include anchor.html name="Variables" %}
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for key in page.variables_keys %}
|
||||
{% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for key in page.variables_keys %}
|
||||
{% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -1,140 +1,134 @@
|
||||
---
|
||||
title: Get started with Bulma
|
||||
title: Getting started with Bulma
|
||||
subtitle: "You only need <strong>1 CSS file</strong> to use Bulma"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: start
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-start
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Getting started</h1>
|
||||
<h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are several ways to <strong>get started</strong> with Bulma. You can either:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
use <strong>npm</strong> to install the Bulma package
|
||||
</li>
|
||||
<li>
|
||||
use the cdnjs <strong>CDN</strong> to link to the Bulma stylesheet
|
||||
</li>
|
||||
<li>
|
||||
use the <strong>GitHub repository</strong> to get the latest development version
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use <strong>NPM</strong> <em>(recommended)</em>:
|
||||
</p>
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
|
||||
<br>
|
||||
<a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Download from the <strong>repository</strong>
|
||||
<br>
|
||||
<a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
Font Awesome icons
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fontawesome.com">Font Awesome 5</a>:</p>
|
||||
{% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Code requirements" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use the <strong>HTML5 doctype</strong>
|
||||
</p>
|
||||
{% highlight html %}<!DOCTYPE html>{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Add the responsive <strong>viewport</strong> meta tag
|
||||
</p>
|
||||
{% highlight html %}<meta name="viewport" content="width=device-width, initial-scale=1">{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% include anchor.html name="Starter template" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example highlight-full">
|
||||
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="bulma-start" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<code><a href="/bulma-start/">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> dependencies you need to build your own website with Bulma.
|
||||
</p>
|
||||
<p>
|
||||
<a class="button is-link" href="/bulma-start/">Check it out</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
There are several ways to <strong>get started</strong> with Bulma. You can either:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
use <strong>npm</strong> to install the Bulma package
|
||||
</li>
|
||||
<li>
|
||||
use the cdnjs <strong>CDN</strong> to link to the Bulma stylesheet
|
||||
</li>
|
||||
<li>
|
||||
use the <strong>GitHub repository</strong> to get the latest development version
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use <strong>NPM</strong> <em>(recommended)</em>:
|
||||
</p>
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
|
||||
<br>
|
||||
<a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Download from the <strong>repository</strong>
|
||||
<br>
|
||||
<a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
Font Awesome icons
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fontawesome.com">Font Awesome 5</a>:</p>
|
||||
{% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Code requirements" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use the <strong>HTML5 doctype</strong>
|
||||
</p>
|
||||
{% highlight html %}<!DOCTYPE html>{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Add the responsive <strong>viewport</strong> meta tag
|
||||
</p>
|
||||
{% highlight html %}<meta name="viewport" content="width=device-width, initial-scale=1">{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% include anchor.html name="Starter template" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example highlight-full">
|
||||
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="bulma-start" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<code><a href="/bulma-start/">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> dependencies you need to build your own website with Bulma.
|
||||
</p>
|
||||
<p>
|
||||
<a class="button is-link" href="/bulma-start/">Check it out</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,121 +1,115 @@
|
||||
---
|
||||
title: Variables
|
||||
subtitle: "Easily <strong>customize</strong> Bulma to match your design"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: variables
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-variables
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
|
||||
{% assign initial_vars = initial_variables.vars %}
|
||||
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
|
||||
{% assign derived_vars = derived_variables.vars %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Variables</h1>
|
||||
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
|
||||
{% assign initial_vars = initial_variables.vars %}
|
||||
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
|
||||
{% assign derived_vars = derived_variables.vars %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
||||
<ol>
|
||||
<div class="content">
|
||||
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
|
||||
<ul>
|
||||
<li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</code></li>
|
||||
<li><strong>font sizes</strong>: <code>{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}</code></li>
|
||||
<li><strong>dimensions</strong>: <code>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</code></li>
|
||||
<li><strong>other values</strong>: <code>{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}</code> or <code>{{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
|
||||
<strong>Primary colors</strong> derived from the initial variables:
|
||||
<ul>
|
||||
<li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</code></li>
|
||||
<li><strong>font sizes</strong>: <code>{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}</code></li>
|
||||
<li><strong>dimensions</strong>: <code>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</code></li>
|
||||
<li><strong>other values</strong>: <code>{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}</code> or <code>{{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}</code></li>
|
||||
<li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
|
||||
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
|
||||
<li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
|
||||
<li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
|
||||
<li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
|
||||
<li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
|
||||
<li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
|
||||
<li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
|
||||
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</li>
|
||||
<li><code>{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}</code>: the primary font family is the sans-serif one</li>
|
||||
<li>
|
||||
<strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
||||
<strong>Lists and maps</strong> which are collections of already defined variables:
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Primary colors</strong> derived from the initial variables:
|
||||
<ul>
|
||||
<li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
|
||||
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
|
||||
<li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
|
||||
<li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
|
||||
<li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
|
||||
<li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
|
||||
<li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
|
||||
<li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
|
||||
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</li>
|
||||
<li><code>{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}</code>: the primary font family is the sans-serif one</li>
|
||||
<li>
|
||||
<strong>Lists and maps</strong> which are collections of already defined variables:
|
||||
<ul>
|
||||
<li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
|
||||
<li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
|
||||
<li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
|
||||
<li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
|
||||
<li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
||||
</p>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Initial variables" %}
|
||||
{% include anchor.html name="Initial variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered is-striped">
|
||||
<tbody>
|
||||
{% for variable_hash in initial_vars %}
|
||||
{% assign variable = variable_hash[1] %}
|
||||
{% assign starts_with = variable.value | slice: 0, 3 %}
|
||||
<tr>
|
||||
<td>
|
||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% if starts_with == 'hsl' %}
|
||||
<span class="bd-color" style="background: {{ variable.value }};"></span>
|
||||
{% endif %}
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
</table>
|
||||
<table class="table is-bordered is-striped">
|
||||
<tbody>
|
||||
{% for variable_hash in initial_vars %}
|
||||
{% assign variable = variable_hash[1] %}
|
||||
{% assign starts_with = variable.value | slice: 0, 3 %}
|
||||
<tr>
|
||||
<td>
|
||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% if starts_with == 'hsl' %}
|
||||
<span class="bd-color" style="background: {{ variable.value }};"></span>
|
||||
{% endif %}
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
</table>
|
||||
|
||||
{% capture custom_message %}
|
||||
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
|
||||
{% endcapture %}
|
||||
{%
|
||||
include variables.html
|
||||
anchor_name = 'Derived variables'
|
||||
data = derived_variables
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
{% capture custom_message %}
|
||||
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
|
||||
{% endcapture %}
|
||||
{%
|
||||
include variables.html
|
||||
anchor_name = 'Derived variables'
|
||||
data = derived_variables
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
|
||||
{% capture custom_message %}
|
||||
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
{% endcapture %}
|
||||
{%
|
||||
include variables.html
|
||||
anchor_name = 'Generic variables'
|
||||
tab = 'base'
|
||||
subtab = 'generic'
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% capture custom_message %}
|
||||
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
{% endcapture %}
|
||||
{%
|
||||
include variables.html
|
||||
anchor_name = 'Generic variables'
|
||||
tab = 'base'
|
||||
subtab = 'generic'
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user