From e9dd9eb80ed0b88cbdd74d88d5bf3362b627c8ac Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 17:32:12 +0100 Subject: [PATCH] Update overview --- docs/_data/links.json | 37 ++ docs/_sass/main.sass | 8 +- docs/css/bulma-docs.css | 6 +- docs/documentation/overview/classes.html | 57 +-- docs/documentation/overview/colors.html | 189 ++++---- docs/documentation/overview/customize.html | 117 +++-- docs/documentation/overview/functions.html | 449 +++++++++-------- docs/documentation/overview/mixins.html | 119 +++-- docs/documentation/overview/modular.html | 135 +++--- .../overview/responsiveness.html | 452 +++++++++--------- docs/documentation/overview/start.html | 258 +++++----- docs/documentation/overview/variables.html | 194 ++++---- 12 files changed, 1013 insertions(+), 1008 deletions(-) diff --git a/docs/_data/links.json b/docs/_data/links.json index 6c2997d2..16512a1d 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -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"], diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index fe17a2ea..06dcb8e1 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -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 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 83f84e47..d6c93d40 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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 { diff --git a/docs/documentation/overview/classes.html b/docs/documentation/overview/classes.html index 5849b64e..ac7b857a 100644 --- a/docs/documentation/overview/classes.html +++ b/docs/documentation/overview/classes.html @@ -1,38 +1,33 @@ --- title: CSS classes +subtitle: "Bulma is simply a collection 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 %} - -
-
-

Classes

-

Bulma is simply a collection of CSS classes. Write the HTML code you want.

- -
- -
-

- Bulma is a CSS framework, meaning that the end result is simply a single .css file: -
- https://github.com/jgthms/bulma/blob/master/css/bulma.css

-

- 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: -

- -
-
-
+
+

+ Bulma is a CSS framework, meaning that the end result is simply a single .css file: +
+ https://github.com/jgthms/bulma/blob/master/css/bulma.css

+

+ 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: +

+ +
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 $colors Sass map, through which Bulma cycles to grab all the colors and their inverts. +

+
-
-
-

Colors

-

The colors that style most Bulma elements and components

+ + + + + + + + + + + + + {% 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 %} + + + + + + {% if derivedColor.invertValue %} + + + {% elsif derivedColor.invertId %} + {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %} + + + {% endif %} + + {% endfor %} + +
ColorVariableValueComputed valueInvert valueComputed invert value
+ {{ derivedColor.id | capitalize }} + + ${{ derivedColor.id }} + + ${{ initialColor.id }} + + {% include elements/color-square.html value=initialColor.value %} + + {{ derivedColor.invertValue }} + + {% include elements/color-square.html value=derivedColor.invertValue %} + + ${{ derivedColor.invertId }} + + {% include elements/color-square.html value=invertColor.value %} +
-
+
+

+ Bulma also provides a $shades Sass map, that only contains shades of grey between black and white. +

+
-
-

- 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 $colors Sass map, through which Bulma cycles to grab all the colors and their inverts. -

-
- - - - - - - - - - - - - - {% 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 %} - - - - - - {% if derivedColor.invertValue %} - - - {% elsif derivedColor.invertId %} - {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %} - - - {% endif %} - - {% endfor %} - -
ColorVariableValueComputed valueInvert valueComputed invert value
- {{ derivedColor.id | capitalize }} - - ${{ derivedColor.id }} - - ${{ initialColor.id }} - - {% include elements/color-square.html value=initialColor.value %} - - {{ derivedColor.invertValue }} - - {% include elements/color-square.html value=derivedColor.invertValue %} - - ${{ derivedColor.invertId }} - - {% include elements/color-square.html value=invertColor.value %} -
- -
-

- Bulma also provides a $shades Sass map, that only contains shades of grey between black and white. -

-
- - - - - - - - - - - {% for shade in page.shades %} - {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %} - - - - - - {% endfor %} - -
ColorVariableValue
- {{ initial_shade.name | capitalize }} - - ${{ initial_shade.id }} - - {% include elements/color-square.html value=initial_shade.value %} -
-
-
+ + + + + + + + + + {% for shade in page.shades %} + {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %} + + + + + + {% endfor %} + +
ColorVariableValue
+ {{ initial_shade.name | capitalize }} + + ${{ initial_shade.id }} + + {% include elements/color-square.html value=initial_shade.value %} +
diff --git a/docs/documentation/overview/customize.html b/docs/documentation/overview/customize.html index 0491c677..98d15ac5 100644 --- a/docs/documentation/overview/customize.html +++ b/docs/documentation/overview/customize.html @@ -1,8 +1,14 @@ --- -title: Customize Bulma +title: Customize Bulma with Sass +subtitle: "Create your own theme with a simple set of variables" 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 %} +
+

If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:

+
-
-
-

Customizing with Sass

-

Create your own theme with a simple set of variables

- -
- -
-

If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:

-
- -
-
-

1

-
-
-

- Download the source files: -

- {% highlight bash %}npm install bulma{% endhighlight %} -
or clone the repository: https://github.com/jgthms/bulma
-
-
- -
-
-

2

-
-
-

- Set your variables -

-

- Create a file called mystyles.scss and add your own colors, set new fonts, override Bulma's default styles... -

-
- {% highlight sass %}{{ scss_code }}{% endhighlight %} -
-
-
- -
-
-

3

-
-
-

- See the result: before and after -

-

- 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

-

-
- Customizing Bulma with Sass - Customizing Bulma with Sass -
-
-
+
+
+

1

-
+
+

+ Download the source files: +

+ {% highlight bash %}npm install bulma{% endhighlight %} +
or clone the repository: https://github.com/jgthms/bulma
+
+ + +
+
+

2

+
+
+

+ Set your variables +

+

+ Create a file called mystyles.scss and add your own colors, set new fonts, override Bulma's default styles... +

+
+ {% highlight sass %}{{ scss_code }}{% endhighlight %} +
+
+
+ +
+
+

3

+
+
+

+ See the result: before and after +

+

+ 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

+

+
+ Customizing Bulma with Sass + Customizing Bulma with Sass +
+
+
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:

+ +
-
-
-

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.
    • -
-
- - {% include anchor.html name="The findColorInvert() function" %} - -
-

The findColorInvert($color) function takes a color as an input, and outputs either transparent black rgba(#000, 0.7) or white #fff:

-
    -
  • if colorLuminance($color) > 0.55, it outputs rgba(#000, 0.7)
    • -
  • otherwise, it outputs #fff
    • -
-

Its purpose is to guarantee a readable shade for the text when the input color is used as the background.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
colorcolor luminancefindColorInvert()result
- - #00d1b2 - - 0.52831 - - - #fff - - - Button - -
- - #3273dc - - 0.23119 - - - #fff - - - Button - -
- - #23d160 - - 0.51067 - - - #fff - - - Button - -
- - #ffdd57 - - 0.76863 - - - rgba(0, 0, 0, 0.7) - - - Button - -
- - #ff3860 - - 0.27313 - - - #fff - - - Button - -
- - #ffb3b3 - - 0.61796 - - - rgba(0,0,0,0.7) - - - Button - -
- - #ffbc6b - - 0.63053 - - - rgba(0,0,0,0.7) - - - Button - -
- - hsl(294, 71%, 79%) - - 0.5529 - - - rgba(0,0,0,0.7) - - - Button - -
-

- 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: -

- - - - - - - - - - - - - - - -
- with findColorInvert() - - $purple-invert: findColorInvert($purple) - - - rgba(0,0,0,0.7) - - - Button - -
- with manual setting - - $purple-invert: #fff - - - #fff - - - Button - -
-
-
-
+
+

The findColorInvert($color) function takes a color as an input, and outputs either transparent black rgba(#000, 0.7) or white #fff:

+ +

Its purpose is to guarantee a readable shade for the text when the input color is used as the background.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
colorcolor luminancefindColorInvert()result
+ + #00d1b2 + + 0.52831 + + + #fff + + + Button + +
+ + #3273dc + + 0.23119 + + + #fff + + + Button + +
+ + #23d160 + + 0.51067 + + + #fff + + + Button + +
+ + #ffdd57 + + 0.76863 + + + rgba(0, 0, 0, 0.7) + + + Button + +
+ + #ff3860 + + 0.27313 + + + #fff + + + Button + +
+ + #ffb3b3 + + 0.61796 + + + rgba(0,0,0,0.7) + + + Button + +
+ + #ffbc6b + + 0.63053 + + + rgba(0,0,0,0.7) + + + Button + +
+ + hsl(294, 71%, 79%) + + 0.5529 + + + rgba(0,0,0,0.7) + + + Button + +
+

+ 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: +

+ + + + + + + + + + + + + + + +
+ with findColorInvert() + + $purple-invert: findColorInvert($purple) + + + rgba(0,0,0,0.7) + + + Button + +
+ with manual setting + + $purple-invert: #fff + + + #fff + + + Button + +
+
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.
=blockDefines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.
=clearfixAdds 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.
=deleteCreates 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".
=loaderCreates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.
=overflow-touchSets 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.
=placeholderSets the styles of an input placeholder.
=unselectableTurns the element unselectable. Used for buttons to prevent selection when clicking.
=arrow($color)Creates a CSS-only down arrow. Used for the dropdown select.
=blockDefines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.
=clearfixAdds 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.
=deleteCreates 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".
=loaderCreates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.
=overflow-touchSets 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.
=placeholderSets the styles of an input placeholder.
=unselectableTurns 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: -

-{% highlight sass %} +{% capture import %} @import "bulma/sass/utilities/_all" @import "bulma/sass/grid/columns" -{% endhighlight %} -

- Now you can use the classes .columns (for the container) and .column directly: -

-{% highlight html %} +{% endcapture %} + +{% capture columns %}
1
2
@@ -40,45 +24,14 @@ doc-subtab: modular
4
5
-{% endhighlight %} +{% endcapture %} -
- -

- What if you only want the button styles instead? -

-{% highlight sass %} +{% capture only_button %} @import "bulma/sass/utilities/_all" @import "bulma/sass/elements/button.sass" -{% endhighlight %} -

- You can now use the .button class, and all its modifiers: -

-
    -
  • - .is-active -
    • -
  • - .is-primary, - .is-info, - .is-success... -
    • -
  • - .is-small, - .is-medium, - .is-large -
    • -
  • - .is-outlined, - .is-inverted, - .is-link -
    • -
  • - .is-loading, - [disabled] -
    • -
-{% highlight html %} +{% endcapture %} + +{% capture buttons %} Button @@ -94,7 +47,57 @@ doc-subtab: modular Loading button -{% endhighlight %} -
-
-
+{% endcapture %} + +
+

+ 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: +

+ {% highlight sass %}{{ import }}{% endhighlight %} +

+ Now you can use the classes .columns (for the container) and .column directly: +

+ {% highlight html %}{{ columns }}{% endhighlight %} + +
+ +

+ What if you only want the button styles instead? +

+ {% highlight sass %}{{ only_button }}{% endhighlight %} +

+ You can now use the .button class, and all its modifiers: +

+ + {% highlight html %}{{ buttons }}{% endhighlight %} +
diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index b2132150..c6a2b586 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/docs/documentation/overview/responsiveness.html @@ -1,8 +1,14 @@ --- title: Responsiveness +subtitle: "Bulma is a mobile-first 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" %} -
-
-

Responsiveness

-

Bulma is a mobile-first framework

+
+

+ Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile: +

+
    +
  • columns are stacked vertically
    • +
  • the level component will show its children stacked vertically
    • +
  • the nav menu will be hidden
    • +
+

For example, you can enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

+
- {% include anchor.html name="Vertical by default" %} +{% include anchor.html name="Breakpoints" %} -
-

- Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile: -

-
    -
  • columns are stacked vertically
    • -
  • the level component will show its children stacked vertically
    • -
  • the nav menu will be hidden
    • -
-

For example, you can enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

-
+{% 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" %} +
+

Bulma has 5 breakpoints:

+
    + {% for breakpoint_hash in site.data.breakpoints %} + {% assign breakpoint = breakpoint_hash[1] %} +
  • {{ breakpoint.id }}: {% if breakpoint.id == 'mobile' %}up to {{ breakpoint.to }}px{% else %}from {{ breakpoint.from }}px{% endif %}
    • + {% endfor %} +
- {% 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 %} +

Bulma uses 9 responsive mixins:

+
    + {% for breakpoint_hash in site.data.breakpoints %} + {% assign breakpoint = breakpoint_hash[1] %} + {% case breakpoint.id %} + {% when 'mobile' %} +
  • + ={{ breakpoint.id }}
    + until {{ breakpoint.to }}px +
    • + {% when 'fullhd' %} +
  • + ={{ breakpoint.id }}
    + from {{ breakpoint.from }}px +
    • + {% else %} +
  • + ={{ breakpoint.id }}
    + from {{ breakpoint.from }}px +
    • +
  • + ={{ breakpoint.id }}-only
    + from {{ breakpoint.from }}px and until {{ breakpoint.to }}px +
    • + {% if breakpoint.id == 'tablet' %} +
  • + =touch
    + until {{ breakpoint.to }}px +
    • + {% endif %} + {% endcase %} + {% endfor %} +
+
-
-

Bulma has 5 breakpoints:

-
    - {% for breakpoint_hash in site.data.breakpoints %} - {% assign breakpoint = breakpoint_hash[1] %} -
  • {{ breakpoint.id }}: {% if breakpoint.id == 'mobile' %}up to {{ breakpoint.to }}px{% else %}from {{ breakpoint.from }}px{% endif %}
    • - {% endfor %} -
+ + + + {% for breakpoint_hash in site.data.breakpoints %} + {% assign breakpoint = breakpoint_hash[1] %} + + {% endfor %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {{ breakpoint.name }}
+ {% if breakpoint.id == 'mobile' %} + Up to {{ breakpoint.to }}px + {% elsif breakpoint.id == 'fullhd' %} + {{ breakpoint.from }}px and above + {% else %} + Between {{ breakpoint.from }}px and {{ breakpoint.to }}px + {% endif %} +
+

mobile

+ 		+

-

+
+

-

+ 		+

tablet

+
+

-

+ 		+

desktop

+
+

-

+ 		+

widescreen

+
+

-

+ 		+

fullhd

+
+

-

+ 		+

tablet-only

+ 		+

-

+
+

-

+ 		+

desktop-only

+ 		+

-

+
+

-

+ 		+

widescreen-only

+ 		+

-

+
+

touch

+ 		+

-

+
+

until-widescreen

+ 		+

-

+
+

until-fullhd

+ 		+

-

+
-

Bulma uses 9 responsive mixins:

-
    - {% for breakpoint_hash in site.data.breakpoints %} - {% assign breakpoint = breakpoint_hash[1] %} - {% case breakpoint.id %} - {% when 'mobile' %} -
  • - ={{ breakpoint.id }}
    - until {{ breakpoint.to }}px -
    • - {% when 'fullhd' %} -
  • - ={{ breakpoint.id }}
    - from {{ breakpoint.from }}px -
    • - {% else %} -
  • - ={{ breakpoint.id }}
    - from {{ breakpoint.from }}px -
    • -
  • - ={{ breakpoint.id }}-only
    - from {{ breakpoint.from }}px and until {{ breakpoint.to }}px -
    • - {% if breakpoint.id == 'tablet' %} -
  • - =touch
    - until {{ breakpoint.to }}px -
    • - {% endif %} - {% endcase %} - {% endfor %} -
-
+{% include anchor.html name="Disabling breakpoints" %} - - - - {% for breakpoint_hash in site.data.breakpoints %} - {% assign breakpoint = breakpoint_hash[1] %} - - {% endfor %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- {{ breakpoint.name }}
- {% if breakpoint.id == 'mobile' %} - Up to {{ breakpoint.to }}px - {% elsif breakpoint.id == 'fullhd' %} - {{ breakpoint.from }}px and above - {% else %} - Between {{ breakpoint.from }}px and {{ breakpoint.to }}px - {% endif %} -
-

mobile

- 		-

-

-
-

-

- 		-

tablet

-
-

-

- 		-

desktop

-
-

-

- 		-

widescreen

-
-

-

- 		-

fullhd

-
-

-

- 		-

tablet-only

- 		-

-

-
-

-

- 		-

desktop-only

- 		-

-

-
-

-

- 		-

widescreen-only

- 		-

-

-
-

touch

- 		-

-

-
-

until-widescreen

- 		-

-

-
-

until-fullhd

- 		-

-

-
+{% include elements/new-tag.html version="0.6.3" %} - {% include anchor.html name="Disabling breakpoints" %} +
+

+ By default, the $widecreen and $fullhd breakpoints are enabled. You can disable them by setting the corresponding Sass boolean to false: +

+
- {% include elements/new-tag.html version="0.6.3" %} +
+ {% highlight sass %}{{ scss_code }}{% endhighlight %} +
-
-

- By default, the $widecreen and $fullhd breakpoints are enabled. You can disable them by setting the corresponding Sass boolean to false: -

-
+{% include anchor.html name="Variables" %} -
- {% highlight sass %}{{ scss_code }}{% endhighlight %} -
+
+

+ 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. -

-
- - - - - - - - - - - - - - - - {% for key in page.variables_keys %} - {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %} - - - - - {% endfor %} - -
NameDefault value
NameDefault value
- {{ variable.name }} - - {{ variable.value }} -
- -
-
+ + + + + + + + + + + + + + + {% for key in page.variables_keys %} + {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %} + + + + + {% endfor %} + +
NameDefault value
NameDefault value
+ {{ variable.name }} + + {{ variable.value }} +
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: -

-
    -
  1. - use npm to install the Bulma package -
    2. -
  2. - use the cdnjs CDN to link to the Bulma stylesheet -
    3. -
  3. - use the GitHub repository to get the latest development version -
    4. -
-
- -
-
-

1

-
-
-

- Use NPM (recommended): -

- {% highlight bash %}npm install bulma{% endhighlight %} -
-
- - - - - -
- -
-
- Font Awesome icons -
-
-

If you want to use icons with Bulma, don't forget to include Font Awesome 5:

- {% highlight html %}{% endhighlight %} -
-
- - {% include anchor.html name="Code requirements" %} - -
-

- For Bulma to work correctly, you need to make your webpage responsive. -

-
- -
-
-

1

-
-
-

- Use the HTML5 doctype -

- {% highlight html %}{% endhighlight %} -
-
- -
-
-

2

-
-
-

- Add the responsive viewport meta tag -

- {% highlight html %}{% endhighlight %} -
-
- - {% include anchor.html name="Starter template" %} - -
-

- If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer. -

-
- -
- {% highlight html %}{% include getting-started.html %}{% endhighlight %} -
- - {% include anchor.html name="bulma-start" %} - -
-

- bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma. -

-

- Check it out -

-
+
+

+ There are several ways to get started with Bulma. You can either: +

+
    +
  1. + use npm to install the Bulma package +
    2. +
  2. + use the cdnjs CDN to link to the Bulma stylesheet +
    3. +
  3. + use the GitHub repository to get the latest development version +
    4. +
+
+
+
+

1

-
+
+

+ Use NPM (recommended): +

+ {% highlight bash %}npm install bulma{% endhighlight %} +
+ + +
+
+

2

+
+
+

+ Use the cdnjs CDN +
+ https://cdnjs.com/libraries/bulma +

+
+
+ +
+
+

3

+
+
+

+ Download from the repository +
+ https://github.com/jgthms/bulma/tree/master/css +

+
+
+ +
+ +
+
+ Font Awesome icons +
+
+

If you want to use icons with Bulma, don't forget to include Font Awesome 5:

+ {% highlight html %}{% endhighlight %} +
+
+ +{% include anchor.html name="Code requirements" %} + +
+

+ For Bulma to work correctly, you need to make your webpage responsive. +

+
+ +
+
+

1

+
+
+

+ Use the HTML5 doctype +

+ {% highlight html %}{% endhighlight %} +
+
+ +
+
+

2

+
+
+

+ Add the responsive viewport meta tag +

+ {% highlight html %}{% endhighlight %} +
+
+ +{% include anchor.html name="Starter template" %} + +
+

+ If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer. +

+
+ +
+ {% highlight html %}{% include getting-started.html %}{% endhighlight %} +
+ +{% include anchor.html name="bulma-start" %} + +
+

+ bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma. +

+

+ Check it out +

+
diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 618015a2..099db28d 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -1,121 +1,115 @@ --- title: Variables +subtitle: "Easily customize 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 %} -
-
-

Variables

-

Easily customize Bulma to match your design

- -
- - {% 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 %} - -
-

Bulma has two variable files divided into 4 sections:

-
    +
    +

    Bulma has two variable files divided into 4 sections:

    +
      +
    1. + Initial variables: where you define variables by literal value, like: +
        +
      • colors: {{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}
        • +
      • font sizes: {{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}
        • +
      • dimensions: {{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}
        • +
      • other values: {{ initial_vars.easing.name }}: {{ initial_vars.easing.value }} or {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}
        • +
      +
      2. +
    2. + Derived variables where variables are calculated from the values set in the previous file. For example, you can have: +
      • - Initial variables: where you define variables by literal value, like: + Primary colors derived from the initial variables:
          -
        • colors: {{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}
          • -
        • font sizes: {{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}
          • -
        • dimensions: {{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}
          • -
        • other values: {{ initial_vars.easing.name }}: {{ initial_vars.easing.value }} or {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}
          • +
        • {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}
          • +
        • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}
          • +
        • {{ derived_vars.info.name }}: {{ derived_vars.info.value }}
          • +
        • {{ derived_vars.success.name }}: {{ derived_vars.success.value }}
          • +
        • {{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}
          • +
        • {{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}
          • +
        • {{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}
          • +
        • {{ derived_vars.text.name }}: {{ derived_vars.text.value }}
        • +
      • {{ 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: -
            -
          • {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}
            • -
          • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}
            • -
          • {{ derived_vars.info.name }}: {{ derived_vars.info.value }}
            • -
          • {{ derived_vars.success.name }}: {{ derived_vars.success.value }}
            • -
          • {{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}
            • -
          • {{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}
            • -
          • {{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}
            • -
          • {{ derived_vars.text.name }}: {{ derived_vars.text.value }}
            • -
          -
          • -
        • {{ 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
          • -
        • - Lists and maps which are collections of already defined variables: -
            -
          • {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}
            • -
          • {{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}
            • -
          • {{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}
            • -
          -
          • +
        • {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}
          • +
        • {{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}
          • +
        • {{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}
        • -
    -

    - To override any of these variables, just set them before importing Bulma. -

    -
    + + +
+

+ To override any of these variables, just set them before importing Bulma. +

+
- {% include anchor.html name="Initial variables" %} +{% include anchor.html name="Initial variables" %} -
-

- These are variables with a literal value. -

-
+
+

+ These are variables with a literal value. +

+
- - - {% for variable_hash in initial_vars %} - {% assign variable = variable_hash[1] %} - {% assign starts_with = variable.value | slice: 0, 3 %} - - - - - {% endfor %} - -
- {{ variable.name }} - - {% if starts_with == 'hsl' %} - - {% endif %} - {{ variable.value }} -
+ + + {% for variable_hash in initial_vars %} + {% assign variable = variable_hash[1] %} + {% assign starts_with = variable.value | slice: 0, 3 %} + + + + + {% endfor %} + +
+ {{ variable.name }} + + {% if starts_with == 'hsl' %} + + {% endif %} + {{ variable.value }} +
- {% 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' +%}