- Because Bulma solely comprises CSS classes, the HTML code you write has no impact on the styling of your page. That's why .input exists as a class, so you can choose which<input type="text"> elements you want to style.
-
-
- Bulma only styles generic tags directly twice:
-
-
-
- generic.sass to define a basic style for your page
-
-
- the .content class to use for any textual content, like WYSIWYG
-
+ Because Bulma solely comprises CSS classes, the HTML code you write has no impact on the styling of your page. That's why .input exists as a class, so you can choose which<input type="text"> elements you want to style.
+
+
+ Bulma only styles generic tags directly twice:
+
+
+
+ generic.sass to define a basic style for your page
+
+
+ the .content class to use for any textual content, like WYSIWYG
+
+
+
diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html
index 7c9f4114..87bf25e8 100644
--- a/docs/documentation/overview/colors.html
+++ b/docs/documentation/overview/colors.html
@@ -1,8 +1,14 @@
---
title: Colors
+subtitle: "The colors that style 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 %}
+
+
+ Most elements and components have color variations thanks to modifiers with syntax .is-$color, like is-primary or is-dark.
+
+
+ This is thanks to the $colorsSass map, through which Bulma cycles to grab all the colors and their inverts.
+
+
-
-
-
Colors
-
The colors that style most Bulma elements and components
+
+
+
+
Color
+
Variable
+
Value
+
Computed value
+
Invert value
+
Computed invert value
+
+
+
+ {% 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 %}
+
+
+ {{ derivedColor.id | capitalize }}
+
+
+ ${{ derivedColor.id }}
+
+
+ ${{ initialColor.id }}
+
+
+ {% include elements/color-square.html value=initialColor.value %}
+
+ {% if derivedColor.invertValue %}
+
+ {{ derivedColor.invertValue }}
+
+
+ {% include elements/color-square.html value=derivedColor.invertValue %}
+
- As $blue has been updated, and since $blue-invert is automatically calculated with the function$blue-invert: findColorInvert($blue), the $blue-invert is now black instead of white
+ As $blue has been updated, and since $blue-invert is automatically calculated with the function$blue-invert: findColorInvert($blue), the $blue-invert is now black instead of white
+
+
+
+
+
+
+
diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html
index 0c02ea6e..8b12ad38 100644
--- a/docs/documentation/overview/functions.html
+++ b/docs/documentation/overview/functions.html
@@ -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 %}
+
+
Bulma uses 3 custom functions to help define the values and colors dynamically:
+
+
powerNumber($number, $exp): calculates the value of a number exposed to another one. Returns a number.
+
colorLuminance($color): 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.
+
findColorInvert($color): returns either 70% transparent black or 100% opaque white depending on the luminance of the color.
+
+
-
-
-
Functions
-
Utility functions to calculate colors and other values
+{% include anchor.html name="The findColorInvert() function" %}
-
-
-
-
Bulma uses 3 custom functions to help define the values and colors dynamically:
-
-
powerNumber($number, $exp): calculates the value of a number exposed to another one. Returns a number.
-
colorLuminance($color): 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.
-
findColorInvert($color): returns either 70% transparent black or 100% opaque white depending on the luminance of the color.
- For colors that have a luminance close to the 0.55 threshold, it can be useful to override the findColorInvert() function, and rather set the invert color manually.
-
- For example, this shade of purple has a color luminance of 0.5529. It can be preferable to set a color invert of white instead of transparent black:
-
+ For colors that have a luminance close to the 0.55 threshold, it can be useful to override the findColorInvert() function, and rather set the invert color manually.
+
+ For example, this shade of purple has a color luminance of 0.5529. It can be preferable to set a color invert of white instead of transparent black:
+
diff --git a/docs/documentation/overview/mixins.html b/docs/documentation/overview/mixins.html
index 9d22ed4d..3721b0a1 100644
--- a/docs/documentation/overview/mixins.html
+++ b/docs/documentation/overview/mixins.html
@@ -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 %}
-
-
-
-
Mixins
-
Utility mixins for custom elements and responsive helpers
-
-
-
-
-
=arrow($color)
-
Creates a CSS-only down arrow. Used for the dropdown select.
-
-
-
=block
-
Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.
-
-
-
=clearfix
-
Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.
-
-
-
=center($size)
-
Positions an element in the exact center of its parent. Used for the spinner in a loading button.
-
-
-
=delete
-
Creates a CSS-only cross. Used for the delete element in modals, messages, tags...
-
-
-
=fa($size, $dimensions)
-
Sets the style of a Font Awesome icon container.
-
-
-
=hamburger($dimensions)
-
Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".
-
-
-
=loader
-
Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.
-
-
-
=overflow-touch
-
Sets the style of a container so that it keeps momentum when scrolling on iOS devices.
-
-
-
=overlay($offset: 0)
-
Makes the element overlay its parent container, like the transparent modal background.
-
-
-
=placeholder
-
Sets the styles of an input placeholder.
-
-
-
=unselectable
-
Turns the element unselectable. Used for buttons to prevent selection when clicking.
-
+
+
=arrow($color)
+
Creates a CSS-only down arrow. Used for the dropdown select.
+
+
+
=block
+
Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.
+
+
+
=clearfix
+
Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.
+
+
+
=center($size)
+
Positions an element in the exact center of its parent. Used for the spinner in a loading button.
+
+
+
=delete
+
Creates a CSS-only cross. Used for the delete element in modals, messages, tags...
+
+
+
=fa($size, $dimensions)
+
Sets the style of a Font Awesome icon container.
+
+
+
=hamburger($dimensions)
+
Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".
+
+
+
=loader
+
Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.
+
+
+
=overflow-touch
+
Sets the style of a container so that it keeps momentum when scrolling on iOS devices.
+
+
+
=overlay($offset: 0)
+
Makes the element overlay its parent container, like the transparent modal background.
+
+
+
=placeholder
+
Sets the styles of an input placeholder.
+
+
+
=unselectable
+
Turns the element unselectable. Used for buttons to prevent selection when clicking.
+
-
-
These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.
-
-
-
+
+
These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.
+
diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html
index d6e5340c..02135faa 100644
--- a/docs/documentation/overview/modular.html
+++ b/docs/documentation/overview/modular.html
@@ -1,38 +1,22 @@
---
title: Modularity
+subtitle: "Just import what you need"
layout: documentation
doc-tab: overview
doc-subtab: modular
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-modular
---
-{% include subnav/subnav-overview.html %}
-
-
-
-
Modular
-
Just import what you need
-
-
-
-
-
- Bulma consists of 39.sass files that you can import individually.
-
-
- For example, let's say you only want the Bulma columns.
-
- The file is located in the bulma/sass/grid folder.
-
- Simply import the utilities dependencies, and then the files you need directly:
-
+ Bulma consists of 39.sass files that you can import individually.
+
+
+ For example, let's say you only want the Bulma columns.
+
+ The file is located in the bulma/sass/grid folder.
+
+ Simply import the utilities dependencies, and then the files you need directly:
+
+ You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Bulma. Learn how.
+
+
- {% include anchor.html name="Variables" %}
-
-
-
- You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Bulma. Learn how.
-
-
-
-
-
-
-
Name
-
Default value
-
-
-
-
-
Name
-
Default value
-
-
-
- {% for key in page.variables_keys %}
- {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
-
-
- {{ variable.name }}
-
-
- {{ variable.value }}
-
-
- {% endfor %}
-
-
-
-
-
+
+
+
+
Name
+
Default value
+
+
+
+
+
Name
+
Default value
+
+
+
+ {% for key in page.variables_keys %}
+ {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
+
+
+ {{ variable.name }}
+
+
+ {{ variable.value }}
+
+
+ {% endfor %}
+
+
diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html
index 15fa6b77..aa23c584 100644
--- a/docs/documentation/overview/start.html
+++ b/docs/documentation/overview/start.html
@@ -1,140 +1,134 @@
---
-title: Get started with Bulma
+title: Getting started with Bulma
+subtitle: "You only need 1 CSS file to use Bulma"
layout: documentation
doc-tab: overview
doc-subtab: start
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-start
---
-{% include subnav/subnav-overview.html %}
-
-
-
-
Getting started
-
You only need 1 CSS file to use Bulma
-
-
-
-
-
- There are several ways to get started with Bulma. You can either:
-
-
-
- use npm to install the Bulma package
-
-
- use the cdnjs CDN to link to the Bulma stylesheet
-
-
- use the GitHub repository to get the latest development version
-
{{ derived_vars.background.name }}: {{ derived_vars.background.value }}: a general background color
+
{{ derived_vars.link.name }}: {{ derived_vars.link.value }}: the links use the primary color
+
{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}: the primary font family is the sans-serif one
- Derived variables where variables are calculated from the values set in the previous file. For example, you can have:
+ Lists and maps which are collections of already defined variables:
-
- Primary colors derived from the initial variables:
-
- {% capture custom_message %}
- These are variables with a value that references 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 variables with a value that references 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 generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how.
- {% 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 %}
+ You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how.
+{% endcapture %}
+{%
+ include variables.html
+ anchor_name = 'Generic variables'
+ tab = 'base'
+ subtab = 'generic'
+ custom_message = custom_message
+ table_class = 'is-bordered is-striped'
+%}
- 
-