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

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/documentation/features/auto-color.html Normal file
View File

@@ -0,0 +1,12 @@
---
title: Auto Color in Bulma
layout: docs
theme: features
doc-tab: features
doc-subtab: auto-color
breadcrumb:
- home
- documentation
- features
- features-auto-color
---

248
docs/documentation/features/color-palettes.md Normal file
View File

@@ -0,0 +1,248 @@
---
title: Color Palettes in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: color-palettes
breadcrumb:
- home
- documentation
- features
- features-color-palettes
---
Bulma comes with 7 primary colors:
<table class="table is-bordered">
<tr><td><code>text</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-text);"></span></td></tr>
<tr><td><code>link</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-link);"></span></td></tr>
<tr><td><code>primary</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-primary);"></span></td></tr>
<tr><td><code>info</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-info);"></span></td></tr>
<tr><td><code>success</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-success);"></span></td></tr>
<tr><td><code>warning</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-warning);"></span></td></tr>
<tr><td><code>danger</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-danger);"></span></td></tr>
</table>
Bulma will automatically **generate a collection of CSS variables** for each of those colors. These sets of variables act as a **color palette** you can use to play with different _shades_ of a same color.
For example, by setting the primary color with `$primary: hsl(171, 100%, 41%)`, Bulma will generate the following CSS variables:
- `--bulma-primary`
- `--bulma-primary-rgb` if you want to create your own RGBA shade: `rgba(var(--bulma-primary-rgb), 0.5)`
- `--bulma-primary-h` equal to the primary **hue**
- `--bulma-primary-s` equal to the primary **saturation**
- `--bulma-primary-l` equal to the primary **lightness**
- `--bulma-primary-base` (equal to `--bulma-primary`)
- `--bulma-primary-invert` which is a color that will look decent on the primary color (in a foreground/background combination)
- `--bulma-primary-light` which is the primary color at `90%` lightness
- `--bulma-primary-light-invert` which is a color that looks good on the `-light` version
- `--bulma-primary-dark` which is the primary color at `20%` lightness
- `--bulma-primary-dark-invert` which is a color that looks good on the `-dark` version
- `--bulma-primary-soft` which is a `light` color in light mode, and a `dark` color in dark mode
- `--bulma-primary-bold` which is a `dark` color in light mode, and a `light` color in dark mode
- `--bulma-primary-soft-invert` which is the same as the `bold` version
- `--bulma-primary-bold-invert` which is the same as the `soft` version
- `--bulma-primary-on-scheme` which is a color that looks good on the `scheme-main` color (which by default is white, and is used as the page's background color)
Here is what they look like:
<table class="table is-bordered">
<tr>
<td><code>--bulma-primary</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary);"></span></td>
<td><span class="color-primary">The quick brown fox jumps over the lazy dog</span></td>
</tr>
<tr>
<td><code>--bulma-primary-invert</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-invert);"></span></td>
<td><span class="color-primary-invert">The quick brown fox jumps over the lazy dog</span></td>
</tr>
<tr>
<td><code>--bulma-primary-light</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-light);"></span></td>
<td><span class="color-primary-light">The quick brown fox jumps over the lazy dog</span></td>
</tr>
<tr>
<td><code>--bulma-primary-light-invert</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-light-invert);"></span></td>
<td><span class="color-primary-light-invert">The quick brown fox jumps over the lazy dog</span></td>
</tr>
<tr>
<td><code>--bulma-primary-dark</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-dark);"></span></td>
<td><span class="color-primary-dark">The quick brown fox jumps over the lazy dog</span></td>
</tr>
<tr>
<td><code>--bulma-primary-dark-invert</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-dark-invert);"></span></td>
<td><span class="color-primary-dark-invert">The quick brown fox jumps over the lazy dog</span></td>
</tr>
<tr>
<td><code>--bulma-primary-soft</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-soft);"></span></td>
<td><span class="has-text-primary-soft">The quick brown fox jumps over the lazy dog</span></td>
</tr>
<tr>
<td><code>--bulma-primary-bold</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-bold);"></span></td>
<td><span class="has-text-primary-bold">The quick brown fox jumps over the lazy dog</span></td>
</tr>
<tr>
<td><code>--bulma-primary-on-scheme</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-on-scheme);"></span></td>
<td><span class="color-primary-on-scheme">The quick brown fox jumps over the lazy dog</span></td>
</tr>
</table>
## Soft and Bold colors
Because Bulma now has a Dark Mode, it comes with a new color concept: **soft** and **bold** colors.
A **soft** color is a shade of a color that has little contrast with the background. It's a muted, faint shade of that color.
In light mode, this means that a soft color will be light as well. It's ideal of **backgrounds**:
<table class="table is-bordered">
<tr>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-soft);"></span></td>
<td><code>--bulma-primary-soft</code> as <strong>background</strong></td>
<td class="has-background-primary-soft">The quick brown fox jumps over the lazy dog</td>
</tr>
</table>
On the other hand, the **bold** color has a stark contrast with the background. It's a strong, distinct shade of that color.
In light mode, this means that a bold color will be dark. It's ideal of **text colors**:
{% include docs/components/single-color-row.html color="primary-bold" label="text color" classname="has-text-primary-bold" %}
The best use of these colors is to **combine them**: the soft color as background, the bold color as foreground:
<table class="table is-bordered">
<tr>
<td>
<code>--bulma-primary-soft</code> as <strong>background</strong><br>
<code>--bulma-primary-bold</code> as <strong>foreground</strong>
</td>
<td class="has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
</tr>
</table>
### Automatic switching when going into Dark Mode
If you use switch to between light mode and dark mode, you will notice that the soft and bold colors will **swap**. That way, you don't need to update your CSS classes to keep a decent design.
<table class="table is-bordered">
<tr>
<th>System</th>
<th>Light Mode</th>
<th>Dark Mode</th>
</tr>
<tr>
<td class="has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
<td class="theme-light has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
<td class="theme-dark has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
</tr>
</table>
## Invert colors
The purpose of `-invert` colors is to combine them with their base counterparts. For example, if you use `primary-light` as the background color, you can use `primary-light-invert` as the foreground color:
<table class="table is-bordered">
{% include docs/elements/background-foreground-row.html %}
{% include docs/elements/background-foreground-row.html color="light" %}
{% include docs/elements/background-foreground-row.html color="dark" %}
</table>
## 21 shades for each color
Bulma will automatically generate 21 shades of each color, one for each amount of **lightness**, starting from _around_ `0%` and going up in `5%` increments, until `100%` is reached.
> I am saying _around_ `0%` because the last digit is determined by the base color. If the base color's lightness is `42%`, then `--bulma-primary-00` will be `2%`, not `0%`.
<table class="table is-bordered">
{% for i in (0..19) %}
{% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
<tr>
<td><code>--bulma-primary-{{ color }}</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-{{ color }});"></span></td>
<td><code>--bulma-primary-{{ color }}-invert</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-{{ color }}-invert);"></span></td>
</tr>
{% endfor %}
<tr>
<td><code>--bulma-primary-100</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-100);"></span></td>
<td><code>--bulma-primary-100-invert</code></td>
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-100-invert);"></span></td>
</tr>
</table>
Each of these shades has an `-invert` counterpart that can be used as a foreground color:
<table class="table is-bordered">
{% for i in (0..19) %}
{% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
{% include docs/elements/background-foreground-row.html color=color %}
{% endfor %}
{% include docs/elements/background-foreground-row.html color="100" %}
</table>
### Lightness CSS variables
If you write your own CSS and want to use one these shades yourself, you can access the **lightness** value via its dedicated CSS variable that has a `-l` suffix.
For example, the `bulma-primary-75` color is defined like this:
```css
:root {
--bulma-primary-75: hsla(
var(--bulma-primary-h),
var(--bulma-primary-s),
var(--bulma-primary-75-l),
1
);
}
```
In this case, `--bulma-primary-75-l` is equal to `76%`, and you can access its value with the `var(--bulma-primary-75-l)` CSS variable.
## CSS helper classes
While you can access all a color's CSS variables directly by writing `color: var(--bulma-primary)` for example, Bulma also provides **CSS helper classes** for each color.
Those helper classes exist for to set either the `color` or the `background`.
<div class="table-container">
<table class="table is-bordered">
<thead>
<tr>
<th>#</th>
<th>Color</th>
<th colspan="2"><code>color</code> class</th>
<th colspan="2"><code>background</code> class</th>
</tr>
</thead>
<tbody>
{% include docs/elements/palette-class-row.html color="primary" %}
{% include docs/elements/palette-class-row.html color="primary-invert" %}
{% include docs/elements/palette-class-row.html color="primary-light" %}
{% include docs/elements/palette-class-row.html color="primary-light-invert" %}
{% include docs/elements/palette-class-row.html color="primary-dark" %}
{% include docs/elements/palette-class-row.html color="primary-dark-invert" %}
{% include docs/elements/palette-class-row.html color="primary-on-scheme" %}
{% for i in (0..19) %}
{% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
{% assign name = color | prepend: 'primary-' %}
{% include docs/elements/palette-class-row.html color=name %}
{% endfor %}
{% include docs/elements/palette-class-row.html color="primary-100" %}
</tbody>
</table>
</div>

71
docs/documentation/features/css-variables.md Normal file
View File

@@ -0,0 +1,71 @@
---
title: CSS Variables in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: css-variables
breadcrumb:
- home
- documentation
- features
- features-css-variables
---
All Bulma components are styled using **CSS Variables** (which are also called CSS custom properties). [Read more about them on the MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
For example, here is how the `.title` element is styled:
```css
.title {
color: var(--bulma-title-color);
font-size: var(--bulma-title-size);
font-weight: var(--bulma-title-weight);
line-height: var(--bulma-title-line-height);
}
```
## Scope
Bulma CSS variables are either defined:
- at the **global** scope `:root`
- at the **component** scope, like `.button`
CSS Variables defined at a more specific scope (like `.button`) will override the ones defined at a more global scope.
```css
:root {
/* Default global value */
--bulma-size-medium: 1.25rem;
}
.button {
/* Overrides the global value */
--bulma-size-medium: 1.5rem;
}
```
## Prefix
All Bulma CSS variables are prefixed with `bulma-` (including the dash). You will notice theme when inspecting a webpage:
<img src="/assets/images/content-inspect.png" alt="Inspect CSS variables" width="640" height="340">
This prefix can be changed by setting the `$cssvars-prefix` Sass variable:
```scss
@use "bulma/sass" with (
$cssvars-prefix: "my-prefix-"
);
```
## Themes
The global CSS variables defined at the `:root` level are what defines a **Bulma theme**. Think of a theme as simply a collection of CSS variables.
<p>
<a href="{{ site.url }}/documentation/features/themes/">
Read more about Themes
</a>
</p>

473
docs/documentation/features/dark-mode.md Normal file
View File

@@ -0,0 +1,473 @@
---
title: Dark Mode in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: dark-mode
breadcrumb:
- home
- documentation
- features
- features-dark-mode
---
Modern browsers come with a way to detect if a user has set their theme preference to `light` or `dark` by using the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) keyword.
This value can be used in a media query to change a website's styles accordingly:
```css
@media (prefers-color-scheme: dark) {
:root {
/* Update CSS variables */
}
}
```
However, it's not possible for a website to alter this preference. That's why it's preferable to **also** add a `data-theme` HTML attribute or a `theme-dark` CSS class.
This is how Bulma defines its dark theme:
```css
@media (prefers-color-scheme: dark) {
:root {
/* Update CSS variables */
}
}
[data-theme=dark],
.theme-dark {
/* Update CSS variables */
}
```
With these rules:
* the website will be **light by default**, if no user preference is set
* it will also be **light** if the user has set their preference to `light`
* the website will be **dark** if the user has set their preference to `dark`
{% include docs/elements/anchor.html name="Force Dark Mode within a page" %}
You can **enable** Dark Mode in part of your HTML by simply using the HTML attribute or the CSS class:
```html
<div>
This is in Light Mode if the user hasn't set a preference, or if their preference is set to <code>light</code>.
</div>
<div data-theme="dark">
This is in Dark Mode
</div>
<div class="theme-dark">
This is also in Dark Mode
</div>
```
{% include docs/elements/anchor.html name="Force Dark Mode for a whole webpage" %}
If you want to enable Dark Mode for a whole webpage, simply set the attribute or the class on the `<html>` element:
```html
<html data-theme="dark">
<!-- Or -->
<html class="theme-dark">
```
{% include docs/elements/anchor.html name="How the Dark theme is created" %}
This is the content of the `sass/themes/dark.scss` file:
```scss
@use "sass/utilities/initial-variables" as iv;
@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;
@use "sass/themes/setup";
// The main lightness of this theme
$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;
// The main scheme color, used to make calculations
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
@mixin dark-theme {
// Required: update the lightness colors and hover/active states
@include cv.register-vars(
(
"scheme-brightness": "dark",
"scheme-main-l": $scheme-main-l,
"scheme-main-bis-l": $scheme-main-l + 2%,
"scheme-main-ter-l": $scheme-main-l + 4%,
"background-l": $background-l,
"border-weak-l": 21%,
"border-l": 24%,
"text-weak-l": 53%,
"text-l": $text-l,
"text-strong-l": 93%,
"text-title-l": 100%,
"hover-background-l-delta": 5%,
"active-background-l-delta": 10%,
"hover-border-l-delta": 10%,
"active-border-l-delta": 20%,
"hover-color-l-delta": 5%,
"active-color-l-delta": 10%,
)
);
// Required: update the "on scheme" colors since the main scheme color is changed
// from white (100% lightness)
// to black (11% lightness in this case)
@each $name, $color in dv.$colors {
@include cv.generate-on-scheme-colors($name, $color, $scheme-main);
}
// Optional: update the shadow color
@include cv.register-hsl("shadow", white);
}
```
This mixin outputs a list of CSS variables and their new value.
To use this theme with the `prefer-color-scheme` media query, write the following:
```scss
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@include cv.system-theme($name: "dark") {
@include dark.dark-theme;
}
```
To use this theme with the `[data-theme=dark]` and `.theme-dark` selectors, write the following:
```scss
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@use "sass/themes/setup";
@include cv.bulma-theme($name: "dark") {
@include dark.dark-theme;
@include setup.setup-theme;
}
```
### The `bulma-theme()` mixin
This mixin will allow you to generate a CSS rule-set with both an appropriate HTML attribute selector and a CSS class selector, which names are defined by the `$name` parameter.
```scss
@use "sass/utilities/css-variables" as cv;
@include cv.bulma-theme($name: "my-theme") {
// Your code
}
```
This will output the following:
```css
[data-theme=my-theme],
.theme-my-theme {
/* Your code */
}
```
### The `system-theme()` mixin
This mixin will generate a `@media (prefers-color-scheme: $name)` media query.
```scss
@use "sass/utilities/css-variables" as cv;
@include cv.system-theme($name: "dark") {
// Your code
}
```
This will output the following:
```css
@media (prefers-color-scheme: dark) {
:root {
/* Your code */
}
}
```
### The `register-vars()` function
All Bulma CSS variables are prefixed with `bulma-`. This prefix is defined with the `$cssvars-prefix: "bulma-";` Sass variable.
Because writing all CSS variables with this prefix can be cumbersome, Bulma provides a Sass function to register new variables: `register-vars()`.
This function accepts a Sass map of `name: value` pairs.
```scss
@use "sass/utilities/css-variables" as cv;
$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;
@include cv.bulma-theme($name: "my-theme") {
@include cv.register-vars(
(
"scheme-brightness": "dark",
"scheme-main-l": $scheme-main-l,
"scheme-main-bis-l": $scheme-main-l + 2%,
"scheme-main-ter-l": $scheme-main-l + 4%,
"background-l": $background-l,
"border-weak-l": 21%,
"border-l": 24%,
"text-weak-l": 53%,
"text-l": $text-l,
"text-strong-l": 93%,
"text-title-l": 100%,
"hover-background-l-delta": 5%,
"active-background-l-delta": 10%,
"hover-border-l-delta": 10%,
"active-border-l-delta": 20%,
"hover-color-l-delta": 5%,
"active-color-l-delta": 10%,
)
);
}
```
### Updating the lightness
For Dark Mode, Bulma will keep the same hue and saturation of the main scheme color. It will however **invert the lightness** of background, borders, text colors, and hover/active states.
<table class="table is-bordered">
<thead>
<tr>
<th>Lightness Name</th>
<th colspan="2">Light Mode (default)</th>
<th colspan="2">Dark Mode (default)</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>--bulma-scheme-main-l</code></th>
<td><code>100%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
<td><code>11%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-scheme-main-bis-l</code></th>
<td><code>98%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
<td><code>13%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-scheme-main-ter-l</code></th>
<td><code>98%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
<td><code>15%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-background-l</code></th>
<td><code>96%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
<td><code>14%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-border-weak-l</code></th>
<td><code>93%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
<td><code>21%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-border-l</code></th>
<td><code>86%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
<td><code>24%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-text-weak-l</code></th>
<td><code>48%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
<td><code>53%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-text-l</code></th>
<td><code>29%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
<td><code>71%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-text-strong-l</code></th>
<td><code>21%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
<td><code>93%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-text-title-l</code></th>
<td><code>14%</code></td>
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
<td><code>100%</code></td>
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
</tr>
<tr>
<th><code>--bulma-hover-background-l-delta</code></th>
<td colspan="2"><code>5%</code></td>
<td colspan="2"><code>5%</code></td>
</tr>
<tr>
<th><code>--bulma-active-background-l-delta</code></th>
<td colspan="2"><code>10%</code></td>
<td colspan="2"><code>10%</code></td>
</tr>
<tr>
<th><code>--bulma-hover-border-l-delta</code></th>
<td colspan="2"><code>10%</code></td>
<td colspan="2"><code>10%</code></td>
</tr>
<tr>
<th><code>--bulma-active-border-l-delta</code></th>
<td colspan="2"><code>20%</code></td>
<td colspan="2"><code>20%</code></td>
</tr>
<tr>
<th><code>--bulma-hover-color-l-delta</code></th>
<td colspan="2"><code>5%</code></td>
<td colspan="2"><code>5%</code></td>
</tr>
<tr>
<th><code>--bulma-active-color-l-delta</code></th>
<td colspan="2"><code>10%</code></td>
<td colspan="2"><code>10%</code></td>
</tr>
</tbody>
</table>
### The `generate-on-scheme-colors()` function
The **scheme** color is the one used for:
* {% include docs/elements/color-swatch.html background="var(--bulma-background)" %} backgrounds
* {% include docs/elements/color-swatch.html background="var(--bulma-border)" %} borders
* text shades
* {% include docs/elements/color-swatch.html background="var(--bulma-text-strong)" %} strong text
* {% include docs/elements/color-swatch.html background="var(--bulma-text-weak)" %} weak text
* {% include docs/elements/color-swatch.html background="var(--bulma-title-color)" %} title text
* {% include docs/elements/color-swatch.html background="var(--bulma-text)" %} and normal text
For each of the 7 primary colors {% include docs/elements/primary-colors.html %}, the default Bulma theme generates **on scheme** shades, meaning shades of each color that will look decent on the main scheme color.
In Light Mode, they look like this:
<table class="table is-bordered">
<tbody>
{% for color in site.data.colors.justColors %}
{% assign foreground = color | prepend: 'var(--bulma-' | append: '-on-scheme)' %}
<tr>
<th><code>{{ color }}</code></th>
<td>{% include docs/elements/color-swatch.html background="var(--bulma-scheme-main)" color=foreground text=foreground %}</td>
</tr>
{% endfor %}
</tbody>
</table>
Because in Dark Mode we are inverting the lightness of these colors, the page background will go from white {% include docs/elements/color-swatch.html background="#fff" %} to black {% include docs/elements/color-swatch.html background="#141414" %}. We thus need to update the `-on-scheme` colors of all 7 primary colors.
In Dark Mode, they look like this:
<table class="table is-bordered">
<tbody>
{% for color in site.data.colors.justColors %}
{% assign foreground = color | prepend: 'var(--bulma-' | append: '-on-scheme)' %}
<tr>
<th><code>{{ color }}</code></th>
<td class="theme-dark">{% include docs/elements/color-swatch.html background="var(--bulma-scheme-main)" color=foreground text=foreground %}</td>
</tr>
{% endfor %}
</tbody>
</table>
If you are creating your own theme, you can automatically generate new `-on-scheme` colors by using the `generate-on-scheme-colors()` for **each** color. It takes 3 parameters:
* `$name` which is a string. E.g. `"primary"`
* `$color` which is the color value. E.g.
* `$scheme-main` which is the theme's main scheme color (the one used as the page background). E.g. `#fff`
The full code looks like this:
```scss
@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;
$scheme-main-l: 11%;
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
@include cv.bulma-theme($name: "my-theme") {
@each $name, $color in dv.$colors {
@include cv.generate-on-scheme-colors($name, $color, $scheme-main);
}
}
```
### The `setup-theme()` function
In Bulma, some CSS variables reference other CSS variables. For example, `--bulma-scheme-main` is defined like this:
```css
:root {
--bulma-scheme-main: hsl(
var(--bulma-scheme-h)
var(--bulma-scheme-s)
var(--bulma-scheme-main-l)
);
}
```
Because of how CSS variables work, if you update the value of `--bulma-scheme-main-l`, you need to define `--bulma-scheme-main` again. That is what `setup-theme()` does.
```css
[data-theme=my-theme],
.theme-my-theme {
--bulma-scheme-main-l: 7%;
--bulma-scheme-main: hsl(
var(--bulma-scheme-h)
var(--bulma-scheme-s)
var(--bulma-scheme-main-l)
);
}
```
If you create your own theme, simply call this function _after_ having set your own CSS variables:
```scss
@use "sass/themes/setup";
@include cv.bulma-theme($name: "my-theme") {
// Set your own CSS variables,
// either manually:
--bulma-scheme-main-l: 7%;
// or using Bulma's register-vars() function:
@include register-vars((
"bulma-scheme-main-l": 7%,
));
// Then, setup the new theme.
@include setup.setup-theme();
}
```

416
docs/documentation/features/skeletons.html Normal file
View File

@@ -0,0 +1,416 @@
---
title: Skeletons in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: skeletons
breadcrumb:
- home
- documentation
- features
- features-skeletons
---
{% capture title_is_skeleton %}
<h1 class="title is-skeleton">
Title
</h1>
{% endcapture %}
{% capture title_has_skeleton %}
<h1 class="title has-skeleton">
Title
</h1>
{% endcapture %}
{% capture subtitle_is_skeleton %}
<h2 class="subtitle is-skeleton">
Subtitle
</h2>
{% endcapture %}
{% capture subtitle_has_skeleton %}
<h2 class="subtitle has-skeleton">
Subtitle
</h2>
{% endcapture %}
{% capture title_and_subtitle_is_skeleton %}
<h1 class="title is-skeleton">
Title
</h1>
<h2 class="subtitle is-skeleton">
Subtitle
</h2>
{% endcapture %}
{% capture title_and_subtitle_has_skeleton %}
<h1 class="title has-skeleton">
Title
</h1>
<h2 class="subtitle has-skeleton">
Subtitle
</h2>
{% endcapture %}
{% capture skeleton_block %}
<div class="skeleton-block"></div>
{% endcapture %}
{% capture skeleton_block_with_text %}
<div class="skeleton-block">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Donec sed odio dui.
Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id
nibh ultricies vehicula ut id elit.
</div>
{% endcapture %}
{% capture skeleton_lines %}
<div class="skeleton-lines">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
{% endcapture %}
{% capture markdown %}
A skeleton loader is a loading state that acts as a **placeholder** for content in an interface.
Bulma v1 ships with 2 skeleton elements, and skeleton variants for most Bulma components.
All skeleton loaders share these CSS variables:
```css
:root {
--bulma-skeleton-background: var(--bulma-border);
--bulma-skeleton-radius: var(--bulma-radius-small);
--bulma-skeleton-block-min-height: 4.5em;
--bulma-skeleton-lines-gap: 0.75em;
--bulma-skeleton-line-height: 0.75em;
}
```
{% endcapture %}
{% include markdown.html content=markdown %}
{% include docs/elements/anchor.html name="Skeleton Block" %}
{% capture markdown %}
The skeleton block is a simple block element with a pulsating background. It has a minimum height of `4.5em`.
{% endcapture %}
{% include markdown.html content=markdown %}
{% include docs/elements/snippet.html content=skeleton_block %}
{% capture markdown %}
If you insert text inside this block, you can make its height responsive:
{% endcapture %}
{% include markdown.html content=markdown %}
{% include docs/elements/snippet.html content=skeleton_block_with_text %}
{% include docs/elements/anchor.html name="Skeleton Lines" %}
{% capture markdown %}
The skeleton lines element is a loading element which resembles a **paragraph**. Each `<div></div>` will render as a separate loading line.
{% endcapture %}
{% include markdown.html content=markdown %}
{% include docs/elements/snippet.html content=skeleton_lines %}
{% include docs/elements/anchor.html name="Bulma components with skeletons" %}
{% capture markdown %}
Most Bulma elements and components have a skeleton variant, which can be enabled by adding either the `is-skeleton` or `has-skeleton` modifier.
{% endcapture %}
{% include markdown.html content=markdown %}
{% include docs/elements/anchor-bis.html name="Button" %}
{% capture button_skeleton %}
<div class="buttons">
<button class="button is-skeleton">Button</button>
<button class="button is-link is-skeleton">Link</button>
<button class="button is-primary is-skeleton">Primary</button>
<button class="button is-success is-skeleton">Success</button>
<button class="button is-info is-skeleton">Info</button>
<button class="button is-warning is-skeleton">Warning</button>
<button class="button is-danger is-skeleton">Danger</button>
</div>
{% endcapture %}
{% include docs/elements/snippet.html content=button_skeleton %}
{% include docs/elements/anchor-bis.html name="Icon" %}
{% capture icon_skeleton %}
<span class="icon is-skeleton">
<i class="fas fa-reply"></i>
</span>
{% endcapture %}
{% include docs/elements/snippet.html content=icon_skeleton %}
{% include docs/elements/anchor-bis.html name="Image" %}
{% capture image_skeleton %}
<figure class="image is-16x16 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/16x16">
</figure>
<figure class="image is-32x32 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/32x32">
</figure>
<figure class="image is-64x64 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/64x64">
</figure>
<figure class="image is-128x128 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/128x128">
</figure>
{% endcapture %}
{% include docs/elements/snippet.html content=image_skeleton %}
{% include docs/elements/anchor-bis.html name="Media Object" %}
{% capture media_skeleton %}
<article class="media">
<figure class="media-left">
<p class="image is-64x64 is-skeleton">
<img src="https://placehold.co/128x128" alt="Placeholder image">
</p>
</figure>
<div class="media-content">
<div class="content is-skeleton">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus,
nisi erat porttitor ligula, eget lacinia odio sem nec elit
vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-reply"></i></span></a>
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-retweet"></i></span></a>
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-heart"></i></span></a>
</div>
</nav>
</div>
<div class="media-right">
<button aria-label="delete" class="delete is-skeleton"></button>
</div>
</article>
{% endcapture %}
{% capture media_skeleton_bis %}
<article class="media">
<figure class="media-left">
<p class="image is-64x64 is-skeleton">
<img src="https://placehold.co/128x128" alt="Placeholder image">
</p>
</figure>
<div class="media-content">
<div class="field">
<p class="control">
<textarea class="textarea is-skeleton" placeholder="Add a comment..."></textarea>
</p>
</div>
<nav class="level">
<div class="level-left">
<div class="level-item">
<a class="button is-info is-skeleton">Submit</a>
</div>
</div>
<div class="level-right">
<div class="level-item">
<label class="checkbox is-skeleton"> <input type="checkbox"> Press enter to submit </label>
</div>
</div>
</nav>
</div>
</article>
{% endcapture %}
{% include docs/elements/snippet.html content=media_skeleton %}
{% include docs/elements/snippet.html content=media_skeleton_bis %}
{% include docs/elements/anchor-bis.html name="Notification" %}
{% capture notification_skeleton %}
<div class="notification is-skeleton">
Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</div>
{% endcapture %}
{% include docs/elements/snippet.html content=notification_skeleton %}
{% include docs/elements/anchor-bis.html name="Tag" %}
{% capture tag_skeleton %}
<span class="tag is-skeleton">Tag</span>{% for color in site.data.colors.justColors %}
<span class="tag is-{{ color }} is-skeleton">{{ color | capitalize }}</span>{% endfor %}
{% endcapture %}
{% include docs/elements/snippet.html content=tag_skeleton %}
{% include docs/elements/anchor-bis.html name="Title and Subtitle" %}
The `.title` and `.subtitle` elements have both an `is-skeleton` and `has-skeleton` variant:
* `is-skeleton` will turn the whole block into a loading skeleton
* `has-skeleton` will turn only a small part of its content into a loading skeleton, to simulate loading only the inner text rather than the whole block
{% include docs/elements/snippet.html content=title_is_skeleton %}
{% include docs/elements/snippet.html content=title_has_skeleton %}
{% include docs/elements/snippet.html content=subtitle_is_skeleton %}
{% include docs/elements/snippet.html content=subtitle_has_skeleton %}
{% include docs/elements/snippet.html content=title_and_subtitle_is_skeleton %}
{% include docs/elements/snippet.html content=title_and_subtitle_has_skeleton %}
{% include docs/elements/anchor-bis.html name="Form Controls" %}
{% capture input_skeleton %}
<input class="input is-skeleton">
{% endcapture %}
{% capture textarea_skeleton %}
<textarea class="textarea is-skeleton"></textarea>
{% endcapture %}
{% include docs/elements/snippet.html content=input_skeleton %}
{% include docs/elements/snippet.html content=textarea_skeleton %}
<div class="skeleton-toggler display-flex align-items-center gap-2">
<button id="js-toggle-skeleton" class="button">
<div id="js-timer" class="timer is-active">
<div class="timer-mask"></div>
</div>
<span class="mr-2">Toggle Skeleton Animations</span>
<span class="tag is-success" style="margin-right: -0.5rem;">Active</span>
</button>
</div>
<style type="text/css">
.timer {
--duration: 2;
--size: 1.5;
--background: var(--bulma-border-weak);
--foreground: var(--bulma-danger);
animation-duration: calc(var(--duration) * 1s);
animation-iteration-count: infinite;
animation-timing-function: steps(1000, start);
background: linear-gradient(90deg, var(--foreground) 50%, var(--background) 50%);
border-radius: 100%;
height: calc(var(--size) * 1em);
margin: 0 0.5rem 0 -0.5rem;
mask: radial-gradient(transparent 0%, transparent 29%, #000 30%, #000 100%);
position: relative;
width: calc(var(--size) * 1em);
}
.timer.is-active {
--foreground: var(--bulma-success);
animation-name: anim-timer;
}
.timer.is-active .timer-mask {
animation-name: anim-timer-mask;
}
.timer-mask {
animation-duration: calc(var(--duration) * 1s);
animation-iteration-count: infinite;
animation-timing-function: steps(500, start);
border-radius: 100% 0 0 100% / 50% 0 0 50%;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform-origin: 100% 50%;
width: 50%;
}
@keyframes anim-timer {
100% {
transform: rotate(360deg);
}
}
@keyframes anim-timer-mask {
0% {
background: var(--background);
transform: rotate(0deg);
}
50% {
background: var(--background);
transform: rotate(-180deg);
}
50.01% {
background: var(--foreground);
transform: rotate(0deg);
}
100% {
background: var(--foreground);
transform: rotate(-180deg);
}
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const hasSkeletons = document.querySelectorAll('.has-skeleton');
const isSkeletons = document.querySelectorAll('.is-skeleton');
const timer = document.getElementById('js-timer');
const toggleSkeleton = document.getElementById('js-toggle-skeleton');
const toggleSkeletonTag = toggleSkeleton.querySelector('.tag');
let skeletonInterval = setInterval(toggleSkeletons, 2000);
function toggleSkeletonInterval() {
if (skeletonInterval) {
clearInterval(skeletonInterval);
skeletonInterval = null;
toggleSkeletonTag.className = "tag is-danger is-light";
toggleSkeletonTag.textContent = "Inactive";
timer.classList.remove("is-active");
return;
} else {
skeletonInterval = setInterval(toggleSkeletons, 2000);
toggleSkeletonTag.className = "tag is-success";
toggleSkeletonTag.textContent = "Active";
timer.classList.add("is-active");
}
}
function toggleSkeletons() {
hasSkeletons.forEach((el) => {
el.classList.toggle("has-skeleton");
});
isSkeletons.forEach((el) => {
el.classList.toggle("is-skeleton");
});
}
toggleSkeleton.addEventListener("click", () => {
toggleSkeletonInterval();
});
});
</script>

12
docs/documentation/features/smart-columns.html Normal file
View File

@@ -0,0 +1,12 @@
---
title: Smart Columns in Bulma
layout: docs
theme: features
doc-tab: features
doc-subtab: smart-columns
breadcrumb:
- home
- documentation
- features
- features-smart-columns
---

12
docs/documentation/features/smart-grid.html Normal file
View File

@@ -0,0 +1,12 @@
---
title: Smart Grid in Bulma
layout: docs
theme: features
doc-tab: features
doc-subtab: smart-grid
breadcrumb:
- home
- documentation
- features
- features-smart-grid
---

83
docs/documentation/features/themes.md Normal file
View File

@@ -0,0 +1,83 @@
---
title: Themes in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: themes
breadcrumb:
- home
- documentation
- features
- features-themes
---
In Bulma, a **theme** is a **collection** of CSS variables.
Bulma comes with 2 themes:
- `light.scss` (required)
- `dark.scss` (optional)
## The default themes
Because Bulma requires a default value for all CSS variables, it comes with a **default light theme** located at `/sass/themes/light.scss`.
It also comes with a **dark theme** located at `/sass/themes/dark.scss`.
The file `/sass/themes/_index.scss` takes care of including both themes, each in two ways:
* with the `@media (prefers-color-scheme: $name)` media query
* with an HTML attribute `[data-theme=$name]` and CSS class `.theme-$name` selector
The only difference is that the light theme is also defined at the top-level: `:root` (equivalent to the `html` element, the ancestor of all HTML elements on a webpage). This ensures that a **default** value is set for all CSS variables.
The CSS output of that theme resembles the following:
```css
:root {
/* CSS Variables */
}
@media (prefers-color-scheme: light) {
:root {
/* CSS Variables */
}
}
@media (prefers-color-scheme: dark) {
:root {
/* CSS Variables */
}
}
[data-theme=light],
.theme-light {
/* CSS Variables */
}
[data-theme=dark],
.theme-dark {
/* CSS Variables */
}
```
## Creating a custom theme
Creating a theme is essentially **setting your own CSS variables**. A custom theme requires:
* a name like `sunrise`
* a scope like `:root`, `[data-theme=sunrise]`, `.theme-sunrise` or all three
* a set of CSS variables and their new value
### Customizing in the browser
If you set your CSS variables under the `:root` scope, you are **overwriting** Bulma's default theme. This can be done by with Sass or CSS.
To test out the CSS method, simply follow these steps:
{% include docs/elements/step.html image="images/themes/step-1-inspect.png" content="Open your browser inspector" width=496 height=748 %}
{% include docs/elements/step.html image="images/themes/step-2-html.png" content="Select the `html` element" width=528 height=232 %}
{% include docs/elements/step.html image="images/themes/step-3-var.png" content="Insert a new value for the `--bulma-link-h` variable (the hue of the link color)" width=376 height=120 %}
{% include docs/elements/step.html image="images/themes/step-4-menu.png" content="Notice how the CSS Helpers section in the side menu changes color" width=480 height=256 %}