"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"
}
},
"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"],
.bd-side-background
display: none
+$sidebar-width: 16rem
+
+tablet
.bd-duo
display: flex
.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
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
display: flex;
}
.bd-side {
- flex: 0 0 calc(300px + 1.5rem);
+ flex: 0 0 calc(16rem + 1.5rem);
}
}
padding: 3rem;
}
.bd-header {
+ align-items: center;
display: flex;
+ min-height: 130px;
}
.bd-header-titles {
flex-grow: 1;
.bd-header-carbon {
flex-grow: 0;
flex-shrink: 0;
- margin-left: 1.5rem;
+ margin: -15px 0 -15px 1.5rem;
width: 300px;
}
.bd-side {
---
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>
---
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
- 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>
---
-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 %}
@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>
+<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>
- <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>
+<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">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">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>
-</section>
+</article>
---
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>
---
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>
---
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>
<div class="column">4</div>
<div class="column">5</div>
</div>
-{% endhighlight %}
-
- <hr>
+{% endcapture %}
- <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>
<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>
---
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
$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>
---
-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>
+<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">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">
+ 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">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>
+<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>
- {% include anchor.html name="Starter template" %}
+<hr>
- <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="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>
- <div class="bd-example highlight-full">
- {% highlight html %}{% include getting-started.html %}{% endhighlight %}
- </div>
+{% include anchor.html name="Code requirements" %}
- {% include anchor.html name="bulma-start" %}
+<div class="content">
+ <p>
+ For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.
+ </p>
+</div>
- <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>
+<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>
-</section>
+</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>
---
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>
-
- {% include anchor.html name="Initial variables" %}
+ </ul>
+ </li>
+ </ol>
+ <p>
+ To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
+ </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>
+{% include anchor.html name="Initial variables" %}
- <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>
+<div class="content">
+ <p>
+ These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
+ </p>
+</div>
- {% 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'
- %}
+<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 %}
- 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'
- %}
+{% 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'
+%}
- </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'
+%}
projects / thirdparty / bulma.git / commitdiff
