library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into css-variables

Browse Source
This commit is contained in:
Jeremy Thomas 2020-01-05 20:38:06 +00:00
commit 65946caa2b
174 changed files with 6337 additions and 3964 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1,4 @@
# These are supported funding model platforms
github: jgthms
patreon: jgthms

454
BACKERS.md
View File

@ -56,7 +56,7 @@
<tbody>
<tr>
<td>usave</td>
<td>Yiannakis Ttafounas</td>
<td>
@ -138,33 +138,7 @@
<tr>
<td>KeyCDN</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Katerina Iosif</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>HebergeurWeb.ca</td>
<td>Iaroslav Baklan</td>
<td>
@ -185,19 +159,6 @@
<td>
</td>
</tr>
<tr>
<td>CodeFirst</td>
<td>
</td>
<td>
</td>
</tr>
@ -221,36 +182,6 @@
<tbody>
<tr>
<td>Yagamii Society-Squad</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Tony James</td>
<td>
<a href="https://twitter.com/tryhyperhost" target="_blank" rel="nofollow">
@tryhyperhost
</a>
</td>
<td>
</td>
</tr>
<tr>
<td>Roman Chvanikoff</td>
@ -260,40 +191,6 @@
<td>
</td>
</tr>
<tr>
<td>Nazar</td>
<td>
<a href="https://twitter.com/nazar_io" target="_blank" rel="nofollow">
@nazar_io
</a>
</td>
<td>
</td>
</tr>
<tr>
<td>Jon Yongfook</td>
<td>
<a href="https://twitter.com/yongfook" target="_blank" rel="nofollow">
@yongfook
</a>
</td>
<td>
</td>
</tr>
@ -372,32 +269,6 @@
<tbody>
<tr>
<td>Wikiki</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Tőrös Egon Richárd</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Tyler Weeres</td>
@ -441,196 +312,6 @@
<td>
</td>
</tr>
<tr>
<td>Stanley Eosakul</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Rob</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Peter Ryszkiewicz</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Patrick Cool</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Niklas</td>
<td>
<a href="https://twitter.com/paradoxxger" target="_blank" rel="nofollow">
@paradoxxger
</a>
</td>
<td>
</td>
</tr>
<tr>
<td>MrG0lden</td>
<td>
<a href="https://twitter.com/mrg0lden" target="_blank" rel="nofollow">
@mrg0lden
</a>
</td>
<td>
</td>
</tr>
<tr>
<td>Millie Lin</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Michael Schinis</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Matt Swan</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Marozed</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Marcel Schiering</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Mae van Dijk</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Luis Guillermo Moreno</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Luis Castro Martín</td>
<td>
</td>
<td>
</td>
</tr>
@ -648,32 +329,6 @@
<td>
</td>
</tr>
<tr>
<td>Kyu</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>JustBoil.me</td>
<td>
</td>
<td>
</td>
</tr>
@ -700,49 +355,6 @@
<td>
</td>
</tr>
<tr>
<td>Jan Kremlacek</td>
<td>
<a href="https://twitter.com/jankremlacek" target="_blank" rel="nofollow">
@jankremlacek
</a>
</td>
<td>
</td>
</tr>
<tr>
<td>Heli Herrera</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>GameTop.com</td>
<td>
</td>
<td>
</td>
</tr>
@ -765,51 +377,12 @@
<tr>
<td>Emil Sonesson</td>
<td>Florian Breisch</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Dmitry Malyshev</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>dansup</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Daniel Zavala</td>
<td>
<a href="https://twitter.com/Siedrix" target="_blank" rel="nofollow">
@Siedrix
<a href="https://twitter.com/FlorianBreisch" target="_blank" rel="nofollow">
@FlorianBreisch
</a>
</td>
@ -821,13 +394,22 @@
<tr>
<td>Charles Treece</td>
<td>Dodzidenu Dzakuma</td>
<td>
<a href="https://twitter.com/charlestreece" target="_blank" rel="nofollow">
@charlestreece
</a>
</td>
<td>
</td>
</tr>
<tr>
<td>Dave Matthews</td>
<td>
</td>

121
CHANGELOG.md
View File

@ -1,11 +1,128 @@
# Bulma Changelog
## Upcoming release
## Next release
### Improvements
* #2709 Add light colors to the `notification` element
* #2740 Fixes #2739 -> Add variables size for layout `hero`
* Fix #2741 -> Create `bulmaRgba()` function to support `inherit` value
### Bug fixes
* #2664 Fixes #2671 -> Add `$panel-colors` variable
## 0.8.0
### Big update
#### Larger form controls
Controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:
```sass
$control-height: 2.25em
$control-padding-vertical: calc(0.375em - #{$control-border-width})
$control-padding-horizontal: calc(0.625em - #{$control-border-width})
$button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em
```
#### Light and dark colors
Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now has a `*-light` and `*-dark` version. They are calculated using 2 new color functions:
* `findLightColor()` which finds the light version of a color
* `findDarkolor()` which finds the dark version of a color
The light colors are used by the `button` element, while the light and dark colors are used by the `message` component.
#### Panel colors
The `panel` component is now available in all the different colors.
#### 4-value color map
The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.
If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:
```scss
$custom-colors: (
"lime": (lime),
"tomato": (tomato, white),
"orange": ($orange, $orange-invert, $orange-light),
"lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
);
```
This is processed by the updated `mergeColorMaps()` Sass function.
#### Scheme variables
There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter`
They replace the `$white` and `$black` occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:
```sass
$scheme-main: $black
$scheme-invert: $white
// etc.
```
That is also why most of the codebase now references **derived** variables (`$text`, `$background`, `$border` etc.) instead of **initial** ones (`$grey`, `$grey-lighter`, `$grey-darker` etc.): updating the derived variables will affect all elements and components directly.
#### Initial variables
* `$green: hsl(141, 53%, 53%)`
* `$cyan: hsl(204, 71%, 53%)`
* `$red: hsl(348, 86%, 61%)`
#### Derived variables
* `$primary-invert: findColorInvert($primary)`
* `$primary-light: findLightColor($primary)`
* `$primary-dark: findDarkColor($primary)`
* `$info-invert: findColorInvert($info)`
* `$info-light: findLightColor($info)`
* `$info-dark: findDarkColor($info)`
* `$success-invert: findColorInvert($success)`
* `$success-light: findLightColor($success)`
* `$success-dark: findDarkColor($success)`
* `$warning-invert: findColorInvert($warning)`
* `$warning-light: findLightColor($warning)`
* `$warning-dark: findDarkColor($warning)`
* `$danger-invert: findColorInvert($danger)`
* `$danger-light: findLightColor($danger)`
* `$danger-dark: findDarkColor($danger)`
* `$light-invert: findColorInvert($light)`
* `$dark-invert: findColorInvert($dark)`
* `$scheme-main: $white`
* `$scheme-main-bis: $white-bis`
* `$scheme-main-ter: $white-ter`
* `$scheme-invert: $black`
* `$scheme-invert-bis: $black-bis`
* `$scheme-invert-ter: $black-ter`
### Other variables
* `$control-height: 2.5em`
* `$control-padding-vertical: calc(0.5em - #{$control-border-width})`
* `$control-padding-horizontal: calc(0.75em - #{$control-border-width})`
* `$media-border-color: rgba($border, 0.5)`
* `$notification-code-background-color: $scheme-main`
* `$panel-radius: $radius-large`
* `$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)`
* `$textarea-padding: $control-padding-horizontal`
* `$textarea-max-height: 40em`
* `$textarea-min-height: 8em`
### Bug fixes
* Fix #2647 -> Missing meta tags in snippet
* Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
* Fix #2060 -> `height: auto` on HTML `audio` element breaks height of element
* Fix #706 -> Derive `-invert` variables using `findColorInvert()`
* #1608 Fix #1552 -> `.container.is-fluid` margins
### New features
@ -17,7 +134,7 @@
### Deprecation warning
The `form.sass` file is **deprecated**. It has moved into its own `/form` folder. If you were importing `form.sass`, please import `sass/form/_all.sass` now.
If you were simply importing the whole of Bulma with `@import "~/bulma/bulma.sass"` or similar, you won't have to change anything, and everything will work as bbefore.
If you were simply importing the whole of Bulma with `@import "~/bulma/bulma.sass"` or similar, you won't have to change anything, and everything will work as before.
### New features

18
README.md
View File

@ -4,11 +4,12 @@ Bulma is a **modern CSS framework** based on [Flexbox](https://developer.mozilla
[![npm](https://img.shields.io/npm/v/bulma.svg)][npm-link]
[![npm](https://img.shields.io/npm/dm/bulma.svg)][npm-link]
[![](https://data.jsdelivr.com/v1/package/npm/bulma/badge)](https://www.jsdelivr.com/package/npm/bulma)
[![Awesome][awesome-badge]][awesome-link]
[![Join the chat at https://gitter.im/jgthms/bulma](https://badges.gitter.im/jgthms/bulma.svg)](https://gitter.im/jgthms/bulma)
[![Build Status](https://travis-ci.org/jgthms/bulma.svg?branch=master)](https://travis-ci.org/jgthms/bulma)
<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600" height="315"></a>
<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600"></a>
## Quick install
@ -43,7 +44,7 @@ import 'bulma/css/bulma.css'
### CDN
[https://cdnjs.com/libraries/bulma](https://cdnjs.com/libraries/bulma)
[https://www.jsdelivr.com/package/npm/bulma](https://www.jsdelivr.com/package/npm/bulma)
Feel free to raise an issue or submit a pull request.
@ -79,9 +80,9 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors) | Adds support for attribute-based selectors |
| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails) | Integrates Bulma with the rails asset pipeline |
| [Vue Admin](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma |
| [Vue Admin (dead)](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma |
| [Bulmaswatch](https://github.com/jenil/bulmaswatch) | Free themes for Bulma |
| [Goldfish](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin |
| [Goldfish (read-only)](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin |
| [ember-bulma](https://github.com/open-tux/ember-bulma) | Ember addon providing a collection of UI components for Bulma |
| [Bloomer](https://bloomer.js.org) | A set of React components for Bulma |
| [React-bulma](https://github.com/kulakowka/react-bulma) | React.js components for Bulma |
@ -89,7 +90,8 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
| [vue-bulma-components](https://github.com/vouill/vue-bulma-components) | Bulma components for Vue.js with straightforward syntax |
| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS) | Javascript integration for Bulma. Written in ES6 with a data-* API |
| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx) | A set of modal window effects with CSS transitions and animations for Bulma |
| [Bulma.styl](https://github.com/log1x/bulma.styl) | 1:1 Stylus translation of Bulma |
| [Bulma Stylus](https://github.com/groenroos/bulma-stylus) | Up-to-date 1:1 translation to Stylus
| [Bulma.styl (read-only)](https://github.com/log1x/bulma.styl) | 1:1 Stylus translation of Bulma 0.6.11 |
| [elm-bulma](https://github.com/surprisetalk/elm-bulma) | Bulma + Elm |
| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes) | Bulma classes prepared for usage with Elm |
| [Bulma Customizer](https://bulma-customizer.bstash.io/) | Bulma Customizer &#8211; Create your own **bespoke** Bulma build |
@ -105,7 +107,7 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react) | Bulma pagination as a react component |
| [bulma-helpers](https://github.com/jmaczan/bulma-helpers) | Functional / Atomic CSS classes for Bulma |
| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook) | Bulma swatches as a react hook and a component |
| [BulmaWP](https://github.com/tomhrtly/BulmaWP) | Starter WordPress theme for Bulma |
| [BulmaWP (read-only)](https://github.com/tomhrtly/BulmaWP) | Starter WordPress theme for Bulma |
| [Ralma](https://github.com/aldi/ralma) | Stateless Ractive.js Components for Bulma |
| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma) | Lightweight integration of Bulma and Bulma-Extensions for your Django app |
| [rbx](https://dfee.github.io/rbx) | Comprehensive React UI Framework written in TypeScript |
@ -115,10 +117,12 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
| [Drulma](https://www.drupal.org/project/drulma) | Drupal theme for Bulma. |
| [Bulrush](https://github.com/textbook/bulrush) | A Bulma-based Python Pelican blog theme |
| [Bulma Variable Export](https://github.com/service-paradis/bulma-variables-export) | Access Bulma Variables in Javascript/Typescript in project using Webpack |
| [Bulmil](https://github.com/gomah/bulmil) | An agnostic UI components library based on Web Components, made with Bulma & Stencil. |
| [Svelte Bulma Components](https://github.com/elcobvg/svelte-bulma-components) | Library of UI components to be used in [Svelte.js](https://svelte.technology/) or standalone. |
## Copyright and license
Code copyright 2019 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
Code copyright 2020 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
[npm-link]: https://www.npmjs.com/package/bulma
[awesome-link]: https://github.com/awesome-css-group/awesome-css

2
bower.json
View File

@ -1,6 +1,6 @@
{
"name": "bulma",
"version": "0.7.5",
"version": "0.8.0",
"homepage": "https://bulma.io",
"authors": [
"jgthms <bbxdesign@gmail.com>"

2
bulma.sass vendored
View File

@ -1,5 +1,5 @@
@charset "utf-8"
/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"

914
css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/.gitignore vendored
View File

@ -27,3 +27,4 @@ test.scss
/styles/node_modules
/versions
_site
.jekyll-cache

190
docs/_data/backers.json
View File

@ -1,50 +1,25 @@
{
"10": [
{
"name": "Charles Treece",
"twitter": "charlestreece",
"start_timestamp": 1529691809367
},
{
"name": "Daniel Zavala",
"twitter": "Siedrix",
"start_timestamp": 1529716263081
},
{
"name": "dansup",
"name": "Dave Matthews",
"twitter": "",
"start_timestamp": 1510690234523
"start_timestamp": 1572311879973
},
{
"name": "Dmitry Malyshev",
"name": "Dodzidenu Dzakuma",
"twitter": "",
"start_timestamp": 1527750137010
"start_timestamp": 1572836840820
},
{
"name": "Emil Sonesson",
"twitter": "",
"start_timestamp": 1514840896323
"name": "Florian Breisch",
"twitter": "FlorianBreisch",
"start_timestamp": 1568874287443
},
{
"name": "Franz Geffke",
"twitter": "f_anzs",
"start_timestamp": 1534701757930
},
{
"name": "GameTop.com",
"twitter": "",
"start_timestamp": 1547543775155
},
{
"name": "Heli Herrera",
"twitter": "",
"start_timestamp": 1521355127164
},
{
"name": "Jan Kremlacek",
"twitter": "jankremlacek",
"start_timestamp": 1515677659602
},
{
"name": "Jason Seminara",
"twitter": "",
@ -55,91 +30,11 @@
"twitter": "",
"start_timestamp": 1510767260223
},
{
"name": "JustBoil.me",
"twitter": "",
"start_timestamp": 1566299949150
},
{
"name": "Kyu",
"twitter": "",
"start_timestamp": 1511206454450
},
{
"name": "Leo Zeba",
"twitter": "leozeba",
"start_timestamp": 1511898573597
},
{
"name": "Luis Castro Martín",
"twitter": "",
"start_timestamp": 1541171212880
},
{
"name": "Luis Guillermo Moreno",
"twitter": "",
"start_timestamp": 1512875878046
},
{
"name": "Mae van Dijk",
"twitter": "",
"start_timestamp": 1545250051380
},
{
"name": "Marcel Schiering",
"twitter": "",
"start_timestamp": 1530361790433
},
{
"name": "Marozed",
"twitter": "",
"start_timestamp": 1554644489695
},
{
"name": "Matt Swan",
"twitter": "",
"start_timestamp": 1511195163646
},
{
"name": "Michael Schinis",
"twitter": "",
"start_timestamp": 1510582549865
},
{
"name": "Millie Lin",
"twitter": "",
"start_timestamp": 1534580207167
},
{
"name": "MrG0lden",
"twitter": "mrg0lden",
"start_timestamp": 1550684446917
},
{
"name": "Niklas",
"twitter": "paradoxxger",
"start_timestamp": 1510740078593
},
{
"name": "Patrick Cool",
"twitter": "",
"start_timestamp": 1515628908009
},
{
"name": "Peter Ryszkiewicz",
"twitter": "",
"start_timestamp": 1510668549717
},
{
"name": "Rob",
"twitter": "",
"start_timestamp": 1526014047574
},
{
"name": "Stanley Eosakul",
"twitter": "",
"start_timestamp": 1532470367448
},
{
"name": "Stuart Stanfield",
"twitter": "",
@ -154,16 +49,6 @@
"name": "Tyler Weeres",
"twitter": "tweeres04",
"start_timestamp": 1552764835672
},
{
"name": "Tőrös Egon Richárd",
"twitter": "",
"start_timestamp": 1518689634542
},
{
"name": "Wikiki",
"twitter": "",
"start_timestamp": 1510677732534
}
],
"30": [
@ -184,57 +69,22 @@
"twitter": "garrynewman",
"start_timestamp": 1511186868165
},
{
"name": "Jon Yongfook",
"twitter": "yongfook",
"start_timestamp": 1514463320418
},
{
"name": "Nazar",
"twitter": "nazar_io",
"start_timestamp": 1511984104607
},
{
"name": "Roman Chvanikoff",
"twitter": "",
"start_timestamp": 1554650361520
},
{
"name": "Tony James",
"twitter": "tryhyperhost",
"start_timestamp": 1540278599558
},
{
"name": "Yagamii Society-Squad",
"twitter": "",
"start_timestamp": 1551197615762
}
],
"100": [
{
"name": "CodeFirst",
"twitter": "",
"start_timestamp": 1544398029162
},
{
"name": "DontPayFull",
"twitter": "",
"start_timestamp": 1535455908636
},
{
"name": "HebergeurWeb.ca",
"name": "Iaroslav Baklan",
"twitter": "",
"start_timestamp": 1544758597015
},
{
"name": "Katerina Iosif",
"twitter": "",
"start_timestamp": 1564570532754
},
{
"name": "KeyCDN",
"twitter": "",
"start_timestamp": 1520273212416
"start_timestamp": 1571294038349
},
{
"name": "Mark Mazza",
@ -262,28 +112,12 @@
"start_timestamp": 1522552630215
},
{
"name": "usave",
"name": "Yiannakis Ttafounas",
"twitter": "",
"start_timestamp": 1554906720385
}
],
"300": [
{
"name": "Adela Belin",
"twitter": "",
"start_timestamp": 1564993835335
},
{
"name": "Alexander Haslam",
"twitter": "",
"start_timestamp": 1520399110272
},
{
"name": "Ravi Gadesha",
"twitter": "_9brainz",
"start_timestamp": 1511089664533
"start_timestamp": 1564570532754
}
],
"300": [],
"500": [
{
"name": "Tipe",

2
docs/_data/colors.json
View File

@ -68,7 +68,7 @@
{
"id":"green",
"name":"Green",
"value": "hsl(141, 71%, 48%)"
"value": "hsl(141, 53%, 53%)"
},
{
"id":"turquoise",

7
docs/_data/expo.json
View File

@ -1,5 +1,10 @@
{
"by_id": {
"sinuous": {
"name": "Sinuous",
"url": "https://sinuous.netlify.com/",
"date": "21 Sep 2019"
},
"divjoy": {
"name": "Divjoy",
"url": "https://divjoy.com/",
@ -50,7 +55,6 @@
},
"mynameismirko2018": {
"name": "mynameismirko",
"highlighted": true,
"url": "http://2018.mynameismirko.it/",
"date": "26 Jan 2019"
},
@ -347,6 +351,7 @@
"bulmaplay",
"filegator",
"counternetwork",
"sinuous",
"agilox",
"pingstack",
"mynameismirko2018",

1
docs/_data/icons.json
View File

@ -1,7 +1,6 @@
{
"fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
"fontawesome5": "https://use.fontawesome.com/releases/v5.3.1/js/all.js",
"iconic": "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css",
"ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css",
"mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"
}

29
docs/_data/links.json
View File

@ -482,14 +482,22 @@
},
"videos": {
"name": "Videos",
"color": "success",
"icon": "play-circle",
"title": "Videos",
"path": "/videos"
},
"blog": {
"name": "Blog",
"title": "Blog",
"subtitle": "Stay updated with new features",
"color": "orange",
"icon": "rss",
"path": "/blog"
},
"expo": {
"name": "Expo",
"title": "Expo",
"subtitle": "Official Bulma showcase",
"icon": "star",
"color": "star",
@ -497,11 +505,23 @@
},
"love": {
"name": "Love",
"title": "Love",
"subtitle": "Fans of Bulma around the world",
"color": "danger",
"icon": "heart",
"path": "/love"
},
"backers": {
"id": "backers",
"name": "Patreon Backers",
"title": "Backers",
"color": "patreon",
"icon": "patreon",
"path": "/backers",
"icon_brand": true,
"subtitle": "Everyone who is supporting Bulma",
"description": "Everyone who is supporting Bulma"
},
"more": {
"name": "More",
"path": "/more"
@ -543,8 +563,15 @@
"path": "/extensions"
}
},
"navbar": [
"videos",
"expo",
"love",
"backers"
],
"more": [
"patreon-backers",
"backers",
"blog",
"made-with-bulma",
"bootstrap",
"extensions",

679
docs/_data/love.json
View File

File diff suppressed because it is too large Load Diff

12
docs/_data/meta.json
View File

@ -1,14 +1,16 @@
{
"title": "Bulma: Free, open source, & modern CSS framework based on Flexbox",
"title": "Bulma: Free, open source, and modern CSS framework based on Flexbox",
"description": "Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
"documentation": "/documentation",
"download": "https://github.com/jgthms/bulma/releases/download/0.7.5/bulma-0.7.5.zip",
"release_notes": "https://github.com/jgthms/bulma/releases/tag/0.7.5",
"download": "https://github.com/jgthms/bulma/releases/download/0.8.0/bulma-0.8.0.zip",
"release_notes": "https://github.com/jgthms/bulma/releases/tag/0.8.0",
"github": "https://github.com/jgthms/bulma",
"twitter": "https://twitter.com/jgthms",
"version": "0.7.5",
"version": "0.8.0",
"book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
"book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
"book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",
"scrimba_url": "https://scrimba.com/g/gbulma"
"scrimba_url": "https://scrimba.com/g/gbulma",
"patreon_url": "https://www.patreon.com/jgthms",
"sponsorship_url": "https://github.com/users/jgthms/sponsorship"
}

63
docs/_data/sponsors.json
View File

@ -110,6 +110,53 @@
"title": "PromoCodeWatch",
"width":"125",
"height":"35"
},
"clothingric": {
"name": "ClothingRIC",
"url": "https://www.clothingric.com/",
"title": "ClothingRIC",
"width":"160",
"height":"40",
"follow": true
},
"edubirdie": {
"name": "edubirdie",
"url": "https://edubirdie.com/",
"title": "Edubirdie offers writing services",
"width":"161",
"height":"27",
"follow": true
},
"edusson": {
"name": "edusson",
"url": "https://edusson.com/",
"title": "Essay writing service",
"width":"104",
"height":"20",
"follow": true
},
"emucoupon": {
"name": "emucoupon",
"url": "https://www.emucoupon.com/",
"title": "Leading Coupon Website for Aussies",
"width":"120",
"height":"30",
"follow": true
},
"namobot": {
"name": "namobot",
"url": "https://www.namobot.com/coupon/",
"title": "Free Coupons for Domains, Hosting & VPN",
"width":"120",
"height":"30",
"follow": true
},
"firesticktricks": {
"name": "firesticktricks",
"url": "https://www.firesticktricks.com/",
"title": "firesticktricks",
"width":"120",
"height":"30"
}
},
"home": [
@ -117,16 +164,22 @@
"tooltwist",
"dontpayfull",
"devsquad",
"hebergeurweb",
"vpsserver",
"usave",
"craft",
"paperleaf",
"buildthis",
"papersowl",
"sparheld",
"bid4papers",
"writersperhour",
"promocodewatch"
"promocodewatch",
"clothingric",
"edubirdie",
"edusson",
"emucoupon",
"namobot",
"firesticktricks"
],
"footer": []
"footer": [
"writersperhour"
]
}

2
docs/_data/variables/base/generic.json
View File

@ -2,7 +2,7 @@
"by_name": {
"$body-background-color": {
"name": "$body-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"

2
docs/_data/variables/components/breadcrumb.json
View File

@ -33,7 +33,7 @@
},
"$breadcrumb-item-separator-color": {
"name": "$breadcrumb-item-separator-color",
"value": "$grey-light",
"value": "$border-hover",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 71%)"

10
docs/_data/variables/components/card.json
View File

@ -9,14 +9,14 @@
},
"$card-background-color": {
"name": "$card-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
},
"$card-shadow": {
"name": "$card-shadow",
"value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
"type": "size"
},
"$card-header-background-color": {
@ -33,12 +33,12 @@
},
"$card-header-padding": {
"name": "$card-header-padding",
"value": "0.75rem",
"value": "0.75rem 1rem",
"type": "size"
},
"$card-header-shadow": {
"name": "$card-header-shadow",
"value": "0 1px 2px rgba($black, 0.1)",
"value": "0 0.125em 0.25em rgba($scheme-invert, 0.1)",
"type": "size"
},
"$card-header-weight": {
@ -65,7 +65,7 @@
},
"$card-footer-border-top": {
"name": "$card-footer-border-top",
"value": "1px solid $border",
"value": "1px solid $border-light",
"type": "size"
},
"$card-footer-padding": {

12
docs/_data/variables/components/dropdown.json
View File

@ -7,7 +7,7 @@
},
"$dropdown-content-background-color": {
"name": "$dropdown-content-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
@ -43,7 +43,7 @@
},
"$dropdown-content-shadow": {
"name": "$dropdown-content-shadow",
"value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
"type": "size"
},
"$dropdown-content-z": {
@ -53,14 +53,14 @@
},
"$dropdown-item-color": {
"name": "$dropdown-item-color",
"value": "$grey-dark",
"value": "$text",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 29%)"
},
"$dropdown-item-hover-color": {
"name": "$dropdown-item-hover-color",
"value": "$black",
"value": "$scheme-invert",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 4%)"
@ -88,10 +88,10 @@
},
"$dropdown-divider-background-color": {
"name": "$dropdown-divider-background-color",
"value": "$border",
"value": "$border-light",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"
"computed_value": "hsl(0, 0%, 93%)"
}
},
"list": [

13
docs/_data/variables/components/media.json Normal file
View File

@ -0,0 +1,13 @@
{
"by_name": {
"$media-border-color": {
"name": "$media-border-color",
"value": "rgba($border, 0.5)",
"type": "color"
}
},
"list": [
"$media-border-color"
],
"file_path": "components/media.sass"
}

4
docs/_data/variables/components/message.json
View File

@ -80,7 +80,7 @@
},
"$message-body-pre-background-color": {
"name": "$message-body-pre-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
@ -100,7 +100,7 @@
"value": "$colors",
"type": "variable",
"computed_type": "function",
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert)), $custom-colors)"
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
}
},
"list": [

4
docs/_data/variables/components/modal.json
View File

@ -7,7 +7,7 @@
},
"$modal-background-background-color": {
"name": "$modal-background-background-color",
"value": "rgba($black, 0.86)",
"value": "rgba($scheme-invert, 0.86)",
"type": "color"
},
"$modal-content-width": {
@ -107,7 +107,7 @@
},
"$modal-card-body-background-color": {
"name": "$modal-card-body-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"

14
docs/_data/variables/components/navbar.json
View File

@ -2,7 +2,7 @@
"by_name": {
"$navbar-background-color": {
"name": "$navbar-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
@ -46,7 +46,7 @@
},
"$navbar-item-color": {
"name": "$navbar-item-color",
"value": "$grey-dark",
"value": "$text",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 29%)"
@ -60,14 +60,14 @@
},
"$navbar-item-hover-background-color": {
"name": "$navbar-item-hover-background-color",
"value": "$white-bis",
"value": "$scheme-main-bis",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)"
},
"$navbar-item-active-color": {
"name": "$navbar-item-active-color",
"value": "$black",
"value": "$scheme-invert",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 4%)"
@ -130,7 +130,7 @@
},
"$navbar-dropdown-background-color": {
"name": "$navbar-dropdown-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
@ -173,12 +173,12 @@
},
"$navbar-dropdown-boxed-shadow": {
"name": "$navbar-dropdown-boxed-shadow",
"value": "0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
"value": "0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)",
"type": "size"
},
"$navbar-dropdown-item-hover-color": {
"name": "$navbar-dropdown-item-hover-color",
"value": "$black",
"value": "$scheme-invert",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 4%)"

10
docs/_data/variables/components/pagination.json
View File

@ -2,14 +2,14 @@
"by_name": {
"$pagination-color": {
"name": "$pagination-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
},
"$pagination-border-color": {
"name": "$pagination-border-color",
"value": "$grey-lighter",
"value": "$border",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"
@ -88,21 +88,21 @@
},
"$pagination-disabled-color": {
"name": "$pagination-disabled-color",
"value": "$grey",
"value": "$text-light",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 48%)"
},
"$pagination-disabled-background-color": {
"name": "$pagination-disabled-background-color",
"value": "$grey-lighter",
"value": "$border",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"
},
"$pagination-disabled-border-color": {
"name": "$pagination-disabled-border-color",
"value": "$grey-lighter",
"value": "$border",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"

36
docs/_data/variables/components/panel.json
View File

@ -9,15 +9,27 @@
},
"$panel-item-border": {
"name": "$panel-item-border",
"value": "1px solid $border",
"value": "1px solid $border-light",
"type": "size"
},
"$panel-radius": {
"name": "$panel-radius",
"value": "$radius-large",
"type": "variable",
"computed_type": "size",
"computed_value": "6px"
},
"$panel-shadow": {
"name": "$panel-shadow",
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
"type": "size"
},
"$panel-heading-background-color": {
"name": "$panel-heading-background-color",
"value": "$background",
"value": "$border-light",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)"
"computed_value": "hsl(0, 0%, 93%)"
},
"$panel-heading-color": {
"name": "$panel-heading-color",
@ -33,7 +45,7 @@
},
"$panel-heading-padding": {
"name": "$panel-heading-padding",
"value": "0.5em 0.75em",
"value": "0.75em 1em",
"type": "size"
},
"$panel-heading-radius": {
@ -50,10 +62,10 @@
},
"$panel-heading-weight": {
"name": "$panel-heading-weight",
"value": "$weight-light",
"value": "$weight-bold",
"type": "variable",
"computed_type": "font-weight",
"computed_value": "300"
"computed_value": "700"
},
"$panel-tabs-font-size": {
"name": "$panel-tabs-font-size",
@ -134,11 +146,20 @@
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 48%)"
},
"$panel-colors": {
"name": "$panel-colors",
"value": "$colors",
"type": "variable",
"computed_type": "function",
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
}
},
"list": [
"$panel-margin",
"$panel-item-border",
"$panel-radius",
"$panel-shadow",
"$panel-heading-background-color",
"$panel-heading-color",
"$panel-heading-line-height",
@ -157,7 +178,8 @@
"$panel-block-active-border-left-color",
"$panel-block-active-color",
"$panel-block-active-icon-color",
"$panel-icon-color"
"$panel-icon-color",
"$panel-colors"
],
"file_path": "components/panel.sass"
}

2
docs/_data/variables/components/tabs.json
View File

@ -80,7 +80,7 @@
},
"$tabs-boxed-link-active-background-color": {
"name": "$tabs-boxed-link-active-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"

8
docs/_data/variables/elements/box.json
View File

@ -9,7 +9,7 @@
},
"$box-background-color": {
"name": "$box-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
@ -23,7 +23,7 @@
},
"$box-shadow": {
"name": "$box-shadow",
"value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
"type": "size"
},
"$box-padding": {
@ -33,12 +33,12 @@
},
"$box-link-hover-shadow": {
"name": "$box-link-hover-shadow",
"value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link",
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link",
"type": "size"
},
"$box-link-active-shadow": {
"name": "$box-link-active-shadow",
"value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link",
"value": "inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link",
"type": "size"
}
},

20
docs/_data/variables/elements/button.json
View File

@ -2,14 +2,14 @@
"by_name": {
"$button-color": {
"name": "$button-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
},
"$button-background-color": {
"name": "$button-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
@ -21,7 +21,7 @@
},
"$button-border-color": {
"name": "$button-border-color",
"value": "$grey-lighter",
"value": "$border",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"
@ -33,12 +33,12 @@
},
"$button-padding-vertical": {
"name": "$button-padding-vertical",
"value": "calc(0.375em - #{$button-border-width})",
"value": "calc(0.5em - #{$button-border-width})",
"type": "size"
},
"$button-padding-horizontal": {
"name": "$button-padding-horizontal",
"value": "0.75em",
"value": "1em",
"type": "size"
},
"$button-hover-color": {
@ -116,14 +116,14 @@
},
"$button-disabled-background-color": {
"name": "$button-disabled-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
},
"$button-disabled-border-color": {
"name": "$button-disabled-border-color",
"value": "$grey-lighter",
"value": "$border",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"
@ -140,21 +140,21 @@
},
"$button-static-color": {
"name": "$button-static-color",
"value": "$grey",
"value": "$text-light",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 48%)"
},
"$button-static-background-color": {
"name": "$button-static-background-color",
"value": "$white-ter",
"value": "$scheme-main-ter",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)"
},
"$button-static-border-color": {
"name": "$button-static-border-color",
"value": "$grey-lighter",
"value": "$border",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"

8
docs/_data/variables/elements/notification.json
View File

@ -7,6 +7,13 @@
"computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)"
},
"$notification-code-background-color": {
"name": "$notification-code-background-color",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
},
"$notification-radius": {
"name": "$notification-radius",
"value": "$radius",
@ -22,6 +29,7 @@
},
"list": [
"$notification-background-color",
"$notification-code-background-color",
"$notification-radius",
"$notification-padding"
],

4
docs/_data/variables/elements/progress.json
View File

@ -2,10 +2,10 @@
"by_name": {
"$progress-bar-background-color": {
"name": "$progress-bar-background-color",
"value": "$border",
"value": "$border-light",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"
"computed_value": "hsl(0, 0%, 93%)"
},
"$progress-value-background-color": {
"name": "$progress-value-background-color",

12
docs/_data/variables/elements/table.json
View File

@ -2,21 +2,21 @@
"by_name": {
"$table-color": {
"name": "$table-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
},
"$table-background-color": {
"name": "$table-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
},
"$table-cell-border": {
"name": "$table-cell-border",
"value": "1px solid $grey-lighter",
"value": "1px solid $border",
"type": "size"
},
"$table-cell-border-width": {
@ -77,7 +77,7 @@
},
"$table-row-hover-background-color": {
"name": "$table-row-hover-background-color",
"value": "$white-bis",
"value": "$scheme-main-bis",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)"
@ -98,14 +98,14 @@
},
"$table-striped-row-even-background-color": {
"name": "$table-striped-row-even-background-color",
"value": "$white-bis",
"value": "$scheme-main-bis",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)"
},
"$table-striped-row-even-hover-background-color": {
"name": "$table-striped-row-even-hover-background-color",
"value": "$white-ter",
"value": "$scheme-main-ter",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)"

6
docs/_data/variables/elements/title.json
View File

@ -2,7 +2,7 @@
"by_name": {
"$title-color": {
"name": "$title-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
@ -53,7 +53,7 @@
},
"$subtitle-color": {
"name": "$subtitle-color",
"value": "$grey-dark",
"value": "$text",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 29%)"
@ -84,7 +84,7 @@
},
"$subtitle-strong-color": {
"name": "$subtitle-strong-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"

8
docs/_data/variables/form/file.json
View File

@ -16,28 +16,28 @@
},
"$file-cta-background-color": {
"name": "$file-cta-background-color",
"value": "$white-ter",
"value": "$scheme-main-ter",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)"
},
"$file-cta-color": {
"name": "$file-cta-color",
"value": "$grey-dark",
"value": "$text",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 29%)"
},
"$file-cta-hover-color": {
"name": "$file-cta-hover-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
},
"$file-cta-active-color": {
"name": "$file-cta-active-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"

25
docs/_data/variables/form/input-textarea.json Normal file
View File

@ -0,0 +1,25 @@
{
"by_name": {
"$textarea-padding": {
"name": "$textarea-padding",
"value": "$control-padding-horizontal",
"type": "variable"
},
"$textarea-max-height": {
"name": "$textarea-max-height",
"value": "40em",
"type": "size"
},
"$textarea-min-height": {
"name": "$textarea-min-height",
"value": "8em",
"type": "size"
}
},
"list": [
"$textarea-padding",
"$textarea-max-height",
"$textarea-min-height"
],
"file_path": "form/input-textarea.sass"
}

20
docs/_data/variables/form/shared.json
View File

@ -2,21 +2,21 @@
"by_name": {
"$input-color": {
"name": "$input-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
},
"$input-background-color": {
"name": "$input-background-color",
"value": "$white",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
},
"$input-border-color": {
"name": "$input-border-color",
"value": "$grey-lighter",
"value": "$border",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"
@ -28,7 +28,7 @@
},
"$input-shadow": {
"name": "$input-shadow",
"value": "inset 0 1px 2px rgba($black, 0.1)",
"value": "inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05)",
"type": "size"
},
"$input-placeholder-color": {
@ -38,21 +38,21 @@
},
"$input-hover-color": {
"name": "$input-hover-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
},
"$input-hover-border-color": {
"name": "$input-hover-border-color",
"value": "$grey-light",
"value": "$border-hover",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 71%)"
},
"$input-focus-color": {
"name": "$input-focus-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
@ -109,17 +109,17 @@
},
"$input-icon-color": {
"name": "$input-icon-color",
"value": "$grey-lighter",
"value": "$border",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)"
},
"$input-icon-active-color": {
"name": "$input-icon-active-color",
"value": "$grey",
"value": "$text",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 48%)"
"computed_value": "hsl(0, 0%, 29%)"
},
"$input-radius": {
"name": "$input-radius",

2
docs/_data/variables/form/tools.json
View File

@ -2,7 +2,7 @@
"by_name": {
"$label-color": {
"name": "$label-color",
"value": "$grey-darker",
"value": "$text-strong",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"

2
docs/_data/variables/layout/footer.json
View File

@ -2,7 +2,7 @@
"by_name": {
"$footer-background-color": {
"name": "$footer-background-color",
"value": "$white-bis",
"value": "$scheme-main-bis",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)"

31
docs/_data/variables/layout/hero.json Normal file
View File

@ -0,0 +1,31 @@
{
"by_name": {
"$hero-body-padding": {
"name": "$hero-body-padding",
"value": "3rem 1.5rem",
"type": "size"
},
"$hero-body-padding-small": {
"name": "$hero-body-padding-small",
"value": "1.5rem",
"type": "size"
},
"$hero-body-padding-medium": {
"name": "$hero-body-padding-medium",
"value": "9rem 1.5rem",
"type": "size"
},
"$hero-body-padding-large": {
"name": "$hero-body-padding-large",
"value": "18rem 1.5rem",
"type": "size"
}
},
"list": [
"$hero-body-padding",
"$hero-body-padding-small",
"$hero-body-padding-medium",
"$hero-body-padding-large"
],
"file_path": "layout/hero.sass"
}

6
docs/_data/variables/utilities/controls.json
View File

@ -21,7 +21,7 @@
},
"$control-height": {
"name": "$control-height",
"value": "2.25em",
"value": "2.5em",
"type": "size"
},
"$control-line-height": {
@ -31,12 +31,12 @@
},
"$control-padding-vertical": {
"name": "$control-padding-vertical",
"value": "calc(0.375em - #{$control-border-width})",
"value": "calc(0.5em - #{$control-border-width})",
"type": "size"
},
"$control-padding-horizontal": {
"name": "$control-padding-horizontal",
"value": "calc(0.625em - #{$control-border-width})",
"value": "calc(0.75em - #{$control-border-width})",
"type": "size"
}
},

188
docs/_data/variables/utilities/derived-variables.json
View File

@ -12,14 +12,14 @@
"value": "$cyan",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(204, 86%, 53%)"
"computed_value": "hsl(204, 71%, 53%)"
},
"$success": {
"name": "$success",
"value": "$green",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(141, 71%, 48%)"
"computed_value": "hsl(141, 53%, 53%)"
},
"$warning": {
"name": "$warning",
@ -33,7 +33,7 @@
"value": "$red",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(348, 100%, 61%)"
"computed_value": "hsl(348, 86%, 61%)"
},
"$light": {
"name": "$light",
@ -107,53 +107,145 @@
},
"$primary-invert": {
"name": "$primary-invert",
"value": "$turquoise-invert",
"type": "variable",
"value": "findColorInvert($primary)",
"type": "function",
"computed_type": "color",
"computed_value": "#fff"
},
"$primary-light": {
"name": "$primary-light",
"value": "findLightColor($primary)",
"type": "compound"
},
"$primary-dark": {
"name": "$primary-dark",
"value": "findDarkColor($primary)",
"type": "compound"
},
"$info-invert": {
"name": "$info-invert",
"value": "$cyan-invert",
"type": "variable",
"value": "findColorInvert($info)",
"type": "function",
"computed_type": "color",
"computed_value": "#fff"
},
"$info-light": {
"name": "$info-light",
"value": "findLightColor($info)",
"type": "compound"
},
"$info-dark": {
"name": "$info-dark",
"value": "findDarkColor($info)",
"type": "compound"
},
"$success-invert": {
"name": "$success-invert",
"value": "$green-invert",
"type": "variable",
"value": "findColorInvert($success)",
"type": "function",
"computed_type": "color",
"computed_value": "#fff"
},
"$success-light": {
"name": "$success-light",
"value": "findLightColor($success)",
"type": "compound"
},
"$success-dark": {
"name": "$success-dark",
"value": "findDarkColor($success)",
"type": "compound"
},
"$warning-invert": {
"name": "$warning-invert",
"value": "$yellow-invert",
"type": "variable",
"computed_type": "color",
"computed_value": "rgba(0, 0, 0, 0.7)"
},
"$danger-invert": {
"name": "$danger-invert",
"value": "$red-invert",
"type": "variable",
"value": "findColorInvert($warning)",
"type": "function",
"computed_type": "color",
"computed_value": "#fff"
},
"$warning-light": {
"name": "$warning-light",
"value": "findLightColor($warning)",
"type": "compound"
},
"$warning-dark": {
"name": "$warning-dark",
"value": "findDarkColor($warning)",
"type": "compound"
},
"$danger-invert": {
"name": "$danger-invert",
"value": "findColorInvert($danger)",
"type": "function",
"computed_type": "color",
"computed_value": "#fff"
},
"$danger-light": {
"name": "$danger-light",
"value": "findLightColor($danger)",
"type": "compound"
},
"$danger-dark": {
"name": "$danger-dark",
"value": "findDarkColor($danger)",
"type": "compound"
},
"$light-invert": {
"name": "$light-invert",
"value": "$dark",
"type": "variable",
"value": "findColorInvert($light)",
"type": "function",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)"
"computed_value": "#fff"
},
"$dark-invert": {
"name": "$dark-invert",
"value": "$light",
"value": "findColorInvert($dark)",
"type": "function",
"computed_type": "color",
"computed_value": "#fff"
},
"$scheme-main": {
"name": "$scheme-main",
"value": "$white",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
},
"$scheme-main-bis": {
"name": "$scheme-main-bis",
"value": "$white-bis",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)"
},
"$scheme-main-ter": {
"name": "$scheme-main-ter",
"value": "$white-ter",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)"
},
"$scheme-invert": {
"name": "$scheme-invert",
"value": "$black",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 4%)"
},
"$scheme-invert-bis": {
"name": "$scheme-invert-bis",
"value": "$black-bis",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 7%)"
},
"$scheme-invert-ter": {
"name": "$scheme-invert-ter",
"value": "$black-ter",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 14%)"
},
"$background": {
"name": "$background",
"value": "$white-ter",
@ -175,6 +267,20 @@
"computed_type": "color",
"computed_value": "hsl(0, 0%, 71%)"
},
"$border-light": {
"name": "$border-light",
"value": "$grey-lightest",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 93%)"
},
"$border-light-hover": {
"name": "$border-light-hover",
"value": "$grey-light",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 71%)"
},
"$text": {
"name": "$text",
"value": "$grey-dark",
@ -208,7 +314,7 @@
"value": "$red",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(348, 100%, 61%)"
"computed_value": "hsl(348, 86%, 61%)"
},
"$code-background": {
"name": "$code-background",
@ -240,11 +346,21 @@
},
"$link-invert": {
"name": "$link-invert",
"value": "$blue-invert",
"type": "variable",
"value": "findColorInvert($link)",
"type": "function",
"computed_type": "color",
"computed_value": "#fff"
},
"$link-light": {
"name": "$link-light",
"value": "findLightColor($link)",
"type": "compound"
},
"$link-dark": {
"name": "$link-dark",
"value": "findDarkColor($link)",
"type": "compound"
},
"$link-visited": {
"name": "$link-visited",
"value": "$purple",
@ -355,7 +471,7 @@
},
"$colors": {
"name": "$colors",
"value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert)), $custom-colors)",
"value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)",
"type": "function"
},
"$shades": {
@ -386,15 +502,33 @@
"$purple-invert",
"$red-invert",
"$primary-invert",
"$primary-light",
"$primary-dark",
"$info-invert",
"$info-light",
"$info-dark",
"$success-invert",
"$success-light",
"$success-dark",
"$warning-invert",
"$warning-light",
"$warning-dark",
"$danger-invert",
"$danger-light",
"$danger-dark",
"$light-invert",
"$dark-invert",
"$scheme-main",
"$scheme-main-bis",
"$scheme-main-ter",
"$scheme-invert",
"$scheme-invert-bis",
"$scheme-invert-ter",
"$background",
"$border",
"$border-hover",
"$border-light",
"$border-light-hover",
"$text",
"$text-invert",
"$text-light",
@ -405,6 +539,8 @@
"$pre-background",
"$link",
"$link-invert",
"$link-light",
"$link-dark",
"$link-visited",
"$link-hover",
"$link-hover-border",

12
docs/_data/variables/utilities/initial-variables.json
View File

@ -40,6 +40,11 @@
"value": "hsl(0, 0%, 86%)",
"type": "color"
},
"$grey-lightest": {
"name": "$grey-lightest",
"value": "hsl(0, 0%, 93%)",
"type": "color"
},
"$white-ter": {
"name": "$white-ter",
"value": "hsl(0, 0%, 96%)",
@ -67,7 +72,7 @@
},
"$green": {
"name": "$green",
"value": "hsl(141, 71%, 48%)",
"value": "hsl(141, 53%, 53%)",
"type": "color"
},
"$turquoise": {
@ -77,7 +82,7 @@
},
"$cyan": {
"name": "$cyan",
"value": "hsl(204, 86%, 53%)",
"value": "hsl(204, 71%, 53%)",
"type": "color"
},
"$blue": {
@ -92,7 +97,7 @@
},
"$red": {
"name": "$red",
"value": "hsl(348, 100%, 61%)",
"value": "hsl(348, 86%, 61%)",
"type": "color"
},
"$family-sans-serif": {
@ -255,6 +260,7 @@
"$grey",
"$grey-light",
"$grey-lighter",
"$grey-lightest",
"$white-ter",
"$white-bis",
"$white",

2
docs/_includes/components/categories.html
View File

@ -14,7 +14,7 @@
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
<strong>{{ category_link.name }}</strong>
{% if category_link.name == 'Customize' %}
<span class="tag is-success">
<span class="tag bd-mini-tag is-success">
New!
</span>
{% endif %}

7
docs/_includes/elements/github.html Normal file
View File

@ -0,0 +1,7 @@
<a class="button bd-github-button" href="{{ site.data.meta.sponsorship_url }}" target="_blank">
<span class="icon">
<i class="fas fa-heart"></i>
</span>
<strong>Sponsor</strong>
<em class="tag bd-mini-tag is-small is-success">New!</em>
</a>

1
docs/_includes/elements/new-tag.html
View File

@ -4,7 +4,6 @@
<div class="tags has-addons">
{% if tag_version_value > current_version_value %}
<span class="tag is-warning">Coming soon!</span>
<span class="tag is-danger">{{ include.version }}</span>
{% elsif tag_version_value == current_version_value %}
<span class="tag">New!</span>
<span class="tag is-success">{{ include.version }}</span>

2
docs/_includes/elements/patreon.html
View File

@ -1,4 +1,4 @@
<a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
<a class="bd-patreon-button" href="{{ site.data.meta.patreon_url }}" target="_blank">
{%
include elements/responsive-image.html
path="become-a-patron"

4
docs/_includes/elements/tw-button.html
View File

@ -1,9 +1,9 @@
<a class="bd-tw-button button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="{{ site.url }}"
data-social-target="https://bulma.io"
target="_blank"
href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&hashtags=bulmaio&url={{ site.url }}&via=jgthms">
href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&hashtags=bulmaio&url={{ 'https://bulma.io' | urlencode }}&via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>

2
docs/_includes/examples/navbar-bottom.html
View File

@ -50,7 +50,7 @@
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>

2
docs/_includes/examples/navbar-color.html
View File

@ -54,7 +54,7 @@
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>

2
docs/_includes/examples/navbar.html
View File

@ -50,7 +50,7 @@
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>

1
docs/_includes/footer/support.html
View File

@ -38,6 +38,7 @@
<strong>Monthly</strong> donation
</p>
<div class="bd-footer-donation-action">
{% include elements/github.html %}
{% include elements/patreon.html %}
</div>
</div>

3
docs/_includes/global/head.html
View File

@ -9,9 +9,6 @@
{% if page.fontawesome4 %}
<link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
{% endif %}
{% if page.iconic %}
<link rel="stylesheet" href="{{ site.data.icons.iconic }}">
{% endif %}
{% if page.ionicons %}
<link rel="stylesheet" href="{{ site.data.icons.ionicons }}">
{% endif %}

37
docs/_includes/global/navbar.html
View File

@ -1,4 +1,4 @@
<nav id="navbar" class="navbar has-shadow is-spaced">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
@ -38,13 +38,14 @@
</span>
</a>
{% for item in site.data.global.navbar_items %}
<a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
<span class="icon {{ item.color }}">
<i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
{% for link_id in site.data.links.navbar %}
{% assign link = site.data.links.by_id[link_id] %}
<a class="navbar-item bd-navbar-item-{{ link.id }} {% if page.route == link.id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
<span class="icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
</span>
<span>{{ item.title }}</span>
<span>{{ link.title }}</span>
</a>
{% endfor %}
@ -55,9 +56,22 @@
</a>
<div id="moreDropdown" class="navbar-dropdown">
<a class="navbar-item is-hidden-widescreen" href="{{ site.data.meta.github }}" target="_blank">
<span>
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github-alt"></i>
</span>
<strong>GitHub</strong>
<br>
The official repository
</span>
</a>
<hr class="navbar-divider is-hidden-widescreen">
{% for link_id in site.data.links.more %}
{% assign link = site.data.links.by_id[link_id] %}
<a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}/{{ link.path }}">
<a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}">
<span>
<span class="icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
@ -76,13 +90,13 @@
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-touch is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
<a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github-alt"></i>
</span>
</a>
<a class="navbar-item is-hidden-touch is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
<a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fab fa-lg fa-twitter"></i>
</span>
@ -90,11 +104,14 @@
<div class="navbar-item">
<div class="field is-grouped is-grouped-multiline">
<p class="control">
{% include elements/github.html %}
</p>
<p class="control">
{% include elements/patreon.html %}
</p>
<p class="control">
<a class="button is-primary" href="{{ site.data.meta.download }}">
<a class="button is-primary" style="height: 2.25em; padding: calc(.375em - 1px) .75em;" href="{{ site.data.meta.download }}">
<strong>Download</strong>
</a>
</p>

4
docs/_includes/index/partnrs.html
View File

@ -1,7 +1,7 @@
<section class="bd-partnrs-list">
<div class="bd-partner bd-is-sponsor">
<p class="bd-partner-title has-text-centered">
Bulma is thankful to its <a href="https://www.patreon.com/jgthms" target="_blank">Patreon sponsors</a>
Bulma is thankful to its <a href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and <a href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a>
</p>
<div class="bd-partner-sponsors">
@ -25,7 +25,7 @@
</div>
<p class="has-text-centered" style="margin-top: 1.5rem;">
<a class="button is-primary is-medium" href="https://www.patreon.com/jgthms" target="_blank">
<a class="button is-primary is-medium" href="{{ site.data.meta.sponsorship_url }}" target="_blank">
Become a sponsor
</a>
</p>

2
docs/_includes/snippets/getting-started.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/{{ site.data.meta.version }}/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
</head>
<body>

3
docs/_includes/snippets/mypage.html
View File

@ -1,6 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My custom Bulma website</title>
<link rel="stylesheet" href="css/mystyles.css">
</head>

2
docs/_javascript/index.js
View File

@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
const introIframe = document.getElementById('introIframe');
const npmClipboard = new Clipboard('#npmCopy');
if (Vimeo) {
if (window.Vimeo) {
const introPlayer = new Vimeo.Player(introIframe);
introPlayer.ready().then(function() {
introVideo.classList.add('has-loaded');

4
docs/_layouts/post.html
View File

@ -71,14 +71,12 @@ breadcrumb:
</header>
<div class="bd-content">
<div class="columns">
<div class="column is-offset-2 is-8">
<div class="bd-post-container">
<div class="bd-post content is-medium">
{{ content }}
</div>
</div>
</div>
</div>
<nav class="bd-prev-next-bis">
{% if page.previous.url %}

2
docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
View File

@ -8,7 +8,7 @@ icon: "font-awesome"
icon_brand: true
---
Bulma is **icon library agnostic**: this means that you can use _any_ icon font library (like Font Awesome 4 or 5, Material Design Icons, Open Iconic, Ionicons…) with Bulma's `icon` class.
Bulma is **icon library agnostic**: this means that you can use _any_ icon font library (like Font Awesome 4 or 5, Material Design Icons, Ionicons…) with Bulma's `icon` class.
As a result, **Bulma already supports Font Awesome 5**! 😃

165
docs/_posts/2019-10-15-light-dark-colors.md Normal file
View File

@ -0,0 +1,165 @@
---
title: "Light and Dark colors, better look, larger form controls, panel colors, and more"
layout: post
introduction: "A big update for more colors and flexibility"
color: "primary"
name: "Light/Dark colors, better look, larger controls"
icon: "sun"
---
The new version **[Bulma 0.8.0](https://github.com/jgthms/bulma/releases/tag/0.8.0)** is out! 😃 It comes with several bug fixes and a lot of nice new features:
* [Light/Dark colors](#light-dark-colors)
* [Better visual look](#better-visual-look)
* [Panel colors](#panel-colors)
* [Larger form controls](#larger-form-controls)
* [4-value color map](#4-value-color-map)
* [Scheme variables for "Dark mode"](#scheme-variables-for-dark-mode)
More in the [Changelog](https://github.com/jgthms/bulma/releases/tag/0.8.0).
{% include elements/anchor.html name="Light/Dark colors" %}
Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions:
* `findLightColor()` which finds the light version of a color
* `findDarkolor()` which finds the dark version of a color
The **light** colors are used by the `button` element:
<figure>
<a href="{{ site.data.links.by_id.elements-button.path }}">
<img src="{{ site.url }}/images/blog/v8/light-buttons-bis.png" alt="List Bulma buttons" width="530" height="104">
</a>
</figure>
The **light** and **dark** colors are used by the `message` component, which generates much prettier colored versions. See the difference between before (left) and after (right):
<div class="bd-post-fullwidth">
<a href="{{ site.data.links.by_id.components-message.path }}">
<img src="{{ site.url }}/images/blog/v8/messages-before.png" alt="Messages before" width="448" height="1200">
<img src="{{ site.url }}/images/blog/v8/messages-after.png" alt="Messages after" width="448" height="1200">
</a>
</div>
{% include elements/anchor.html name="Better visual look" %}
Some of the Bulma colors have been updated:
<table>
<tr>
<th>Color</th>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<th>
<code>$green</code>
</th>
<td>
{% include elements/color-square.html value="hsl(141, 71%, 48%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(141, 53%, 53%)" %}
</td>
</tr>
<tr>
<th>
<code>$cyan</code>
</th>
<td>
{% include elements/color-square.html value="hsl(204, 86%, 53%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(204, 71%, 53%)" %}
</td>
</tr>
<tr>
<th>
<code>$red</code>
</th>
<td>
{% include elements/color-square.html value="hsl(348, 100%, 61%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(348, 86%, 61%)" %}
</td>
</tr>
</table>
The <strong>shadows</strong> of the <code>box</code> and <code>card</code> have been improved:
<div class="bd-post-fullwidth">
<a href="{{ site.data.links.by_id.components-card.path }}">
<img src="{{ site.url }}/images/blog/v8/card-before.png" alt="Card before" width="464" height="236">
<img src="{{ site.url }}/images/blog/v8/card-after.png" alt="Card after" width="464" height="236">
</a>
</div>
<div class="bd-post-fullwidth">
<a href="{{ site.data.links.by_id.elements-box.path }}" style="display: block;" class="has-text-centered">
<img src="{{ site.url }}/images/blog/v8/box-before.png" alt="Box before" width="464" height="236">
<img src="{{ site.url }}/images/blog/v8/box-after.png" alt="Box after" width="464" height="236">
</a>
</div>
{% include elements/anchor.html name="Panel colors" %}
<p>
The <a href="{{ site.data.links.by_id.components-panel.path }}">panel component</a> is now available in all <strong>colors</strong>:
</p>
<div class="bd-post-fullwidth">
<a href="{{ site.data.links.by_id.components-panel.path }}">
<img src="{{ site.url }}/images/blog/v8/panel-colors.png" alt="Panel colors" width="768" height="1029">
</a>
</div>
{% include elements/anchor.html name="Larger form controls" %}
Form controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:
```sass
$control-height: 2.25em
$control-padding-vertical: calc(0.375em - #{$control-border-width})
$control-padding-horizontal: calc(0.625em - #{$control-border-width})
$button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em
```
{% include elements/anchor.html name="4-value color map" %}
The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.
If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:
```scss
$custom-colors: (
"lime": (lime),
"tomato": (tomato, white),
"orange": ($orange, $orange-invert, $orange-light),
"lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
);
```
This is processed by the updated `mergeColorMaps()` Sass function.
{% include elements/anchor.html name='Scheme variables for "Dark mode"' %}
There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter`
They replace the `$white` and `$black` occurences in the codebase.
This makes it easy to create a **"Dark mode"** simply by swapping the values:
```sass
$scheme-main: $black
$scheme-invert: $white
// etc.
```
That is also why most of the codebase now references **derived** variables (`$text`, `$background`, `$border` etc.) instead of **initial** ones (`$grey`, `$grey-lighter`, `$grey-darker` etc.): updating the derived variables will affect all elements and components directly.
<hr class="hr">
The new 0.8.0 version should be fully compatible with any Bulma setup. Feel free to <a href="https://github.com/jgthms/bulma/issues" target="_blank">post an issue</a> if you encounter any problem upgrading.

6
docs/_sass/book.sass
View File

@ -45,7 +45,7 @@ $book-beige: #FFEDD7
.bd-book-content
@extend %bd-box
box-shadow: 0 3rem 3rem -1rem rgba($black, 0.2)
box-shadow: 0 3rem 3rem -1rem rgba($scheme-invert, 0.2)
max-width: 520px
padding: 3rem
@ -98,7 +98,7 @@ $book-beige: #FFEDD7
.bd-book-modal-background
+overlay
background-color: rgba($black, 0.86)
background-color: rgba($scheme-invert, 0.86)
.bd-book-modal
.bd-book-modal-background,
@ -153,7 +153,7 @@ $book-beige: #FFEDD7
.bd-book-inline-cover
display: none
.bd-book-modal-column
background-color: $white
background-color: $scheme-main
position: relative
&.bd-is-cover
align-items: center

10
docs/_sass/bsa.sass
View File

@ -8,7 +8,7 @@
.default-ad
background-color: rgba(black, 0.3)
border-radius: 2px
color: $white
color: $scheme-main
display: inline-block
font-size: 10px
font-weight: bold
@ -16,9 +16,9 @@
text-transform: uppercase
vertical-align: top
& > a
background-color: $white
background-color: $scheme-main
border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)
color: $text
display: block
line-height: 1.375
@ -29,9 +29,9 @@
position: relative
&:hover,
&:focus
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px $link
&:active
box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
span
display: block
.default-image

2
docs/_sass/example.sass
View File

@ -164,7 +164,7 @@ $structure-invert: $danger-invert
position: relative
&::before
+overlay
background: rgba($black, 0.7)
background: rgba($scheme-invert, 0.7)
background: $background
border: 1px solid $border
content: ""

4
docs/_sass/expo.sass
View File

@ -1,5 +1,5 @@
.bd-expo
background-color: $white
background-color: $scheme-main
padding: 1.5rem
.bd-website
@ -31,7 +31,7 @@
transition: opacity 200ms $easing
.bd-website-overlay
background-color: $black
background-color: $scheme-invert
opacity: 0
transition: opacity 200ms $easing

21
docs/_sass/footer.sass
View File

@ -9,7 +9,7 @@
font-weight: $weight-semibold
.bd-footer-subtitle
color: $grey-light
color: $border-hover
margin-top: -0.5rem
transition-duration: $speed
transition-property: color
@ -29,7 +29,7 @@
width: 100%
.bd-footer-tsp
color: $grey-light
color: $border-hover
margin-top: 1.5rem
%bd-footer-box
@ -42,7 +42,7 @@
.bd-footer-support
@extend %bd-footer-box
border-top: 2px solid $white-ter
border-top: 2px solid $scheme-main-ter
box-shadow: none
padding: 3rem
.bd-footer-title
@ -60,10 +60,10 @@
+tablet
.bd-footer-donation
width: 240px
padding: 0.75rem 1.5rem
.bd-footer-donation-title
color: $grey-light
color: $border-hover
margin-bottom: 0.5rem
strong
color: currentColor
@ -71,6 +71,11 @@
.bd-footer-donation-action
@extend %center
height: 70px
.bd-github-button
margin-right: 0.5rem
.bd-github-button,
.bd-patreon-button
flex-shrink: 0
.paypal-form
height: 30px
img
@ -98,7 +103,7 @@ $star-figure-height: 156px
+tablet
width: calc(33.3333% - 2rem)
&:hover
box-shadow: 0 3rem 3rem -1.25rem rgba($black, 0.1)
box-shadow: 0 3rem 3rem -1.25rem rgba($scheme-invert, 0.1)
transform: translateY(-0.5rem)
.bd-footer-title,
.bd-footer-subtitle
@ -153,7 +158,7 @@ $star-figure-height: 156px
&.bd-is-more
font-size: 0.875rem
a:not(:hover)
color: $grey-light
color: $border-hover
&.bd-has-subtitle
a
align-items: center
@ -169,7 +174,7 @@ $star-figure-height: 156px
font-style: normal
&:not(:hover)
em
color: $grey-light
color: $border-hover
+mobile
flex-wrap: wrap
margin-top: 1rem

48
docs/_sass/global.sass
View File

@ -16,10 +16,10 @@ svg
strong
color: currentColor
a
border-bottom: 1px solid rgba($white, 0.5)
border-bottom: 1px solid rgba($scheme-main, 0.5)
padding-bottom: 2px
&:hover
border-bottom-color: $white
border-bottom-color: $scheme-main
span
margin: 0 0.25em
opacity: 0.5
@ -37,6 +37,30 @@ svg
p:first-child
margin-right: 1em
.bd-github-button
background-color: #eff3f6
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%)
border-color: #1b1f2333
color: #24292e
font-size: 0.875rem
height: auto
padding: calc(0.5em - 1px) 1em
position: relative
strong
font-weight: $weight-semibold
margin-top: -2px
.icon
color: #ea4aaa
.tag
font-size: 0.5rem
font-style: normal
margin: -1px -8px 0 7px
&:hover
background-color: #e6ebf1
background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%)
background-position: -.5em
border-color: #1b1f2359
.bd-patreon-button
display: inline-block
position: relative
@ -75,8 +99,8 @@ $carbon-poweredby-height: 20px
padding: 0
position: relative
&:hover
background-color: $white
box-shadow: 0 0 0 $carbon-shadow-size $white
background-color: $scheme-main
box-shadow: 0 0 0 $carbon-shadow-size $scheme-main
+tablet
width: $carbon-width
@ -127,7 +151,7 @@ $carbon-poweredby-height: 20px
color: $link
.carbon-poweredby
bottom: 0
color: $grey-light
color: $border-hover
display: inline
font-size: $size-small
line-height: $carbon-poweredby-height
@ -135,3 +159,17 @@ $carbon-poweredby-height: 20px
right: 0
&:hover
text-decoration: underline
+until($fullhd)
.bd-navbar-icon
display: none
+until($widescreen)
.bd-navbar .bd-navbar-item-backers
display: none
+widescreen
#moreDropdown
.navbar-item:first-child,
.navbar-divider:nth-child(2)
display: none

8
docs/_sass/header.sass
View File

@ -4,19 +4,19 @@
&:hover
background: $github
border-color: $github
color: $white
color: $scheme-main
.bd-tw-button
background-color: $twitter
color: $white
color: $scheme-main
border-color: transparent !important
&:hover
background-color: darken($twitter, 2.5%)
color: $white
color: $scheme-main
&:active,
&:focus
background-color: darken($twitter, 5%)
color: $white
color: $scheme-main
#moreDropdown
.navbar-item

26
docs/_sass/index.sass
View File

@ -18,7 +18,7 @@
strong
color: $primary
.subtitle
color: $grey-light !important
color: $border-hover !important
strong
color: currentColor
&:not(:last-child)
@ -41,7 +41,7 @@
margin-right: auto
.bd-index-custom-title
color: $grey-light
color: $border-hover
.bd-index-custom-example
padding: 1rem
@ -77,28 +77,28 @@
.button
&.is-primary
background-color: $mauve
color: $white
color: $scheme-main
&:hover
background-color: darken($mauve, 2.5%)
&:active
background-color: darken($mauve, 5%)
&.is-link
background-color: $pink
color: $white
color: $scheme-main
&:hover
background-color: darken($pink, 2.5%)
&:active
background-color: darken($pink, 5%)
+selection
background-color: $pink
color: $white
color: $scheme-main
// Fullscreen
.bd-index-fullscreen
.tabs
a
color: $grey-light !important
color: $border-hover !important
// Columns
@ -161,13 +161,13 @@
transition-duration: $speed * 2
transition-property: color
.subtitle
color: $grey-light
color: $border-hover
position: relative
strong
color: currentColor
&::before
+overlay
background-color: $white-bis
background-color: $scheme-main-bis
border-radius: $radius-large
content: ""
display: block
@ -194,7 +194,7 @@
color: $link
&:nth-child(4):hover
.title
color: $black
color: $scheme-invert
.bd-focus-icon
position: relative
@ -292,7 +292,7 @@
color: $black-ter
&.is-success,
&.is-error
color: $white
color: $scheme-main
pointer-events: none
text-decoration: none
&.is-success
@ -301,10 +301,10 @@
background-color: $red
\::-moz-selection
background: $yellow
color: $black-ter
color: $scheme-invert-ter
\::selection
background: $yellow
color: $black-ter
color: $scheme-invert-ter
.intro-buttons
margin-top: 1.5rem
@ -313,7 +313,7 @@
padding-right: 1.375em
.intro-video
background-color: $white
background-color: $scheme-main
margin-left: auto
margin-right: auto
max-width: 640px

2
docs/_sass/klmn.sass
View File

@ -24,7 +24,7 @@
white-space: nowrap
&.bd-is-selected
background-color: $green
color: $white
color: $scheme-main
.bd-klmn-columns:last-child
.bd-notification

4
docs/_sass/love.sass
View File

@ -7,7 +7,7 @@
justify-content: center
.bd-testimonial-tweet
background-color: $white
background-color: $scheme-main
.bd-more-loves
align-items: center
@ -57,7 +57,7 @@
.hero.bd-is-love
.title,
.subtitle
color: $white
color: $scheme-main
@keyframes rainbow
0%

34
docs/_sass/main.sass
View File

@ -5,7 +5,7 @@
.bd-figure
+block
align-items: center
border: 2px solid $white-ter
border: 2px solid $scheme-main-ter
border-radius: $radius
display: flex
flex-direction: column
@ -14,7 +14,7 @@
margin: 1em
figcaption
align-self: stretch
background-color: $white-ter
background-color: $scheme-main-ter
color: $text-light
font-size: $size-small
padding: 1em
@ -33,7 +33,7 @@
.bd-prev-next
align-items: flex-start
color: $grey-light
color: $border-hover
display: none
flex-grow: 0
flex-shrink: 0
@ -87,7 +87,7 @@
overflow: visible
ul,
a
border-bottom-color: $white-ter
border-bottom-color: $scheme-main-ter
border-bottom-width: 2px
a
margin-bottom: -2px
@ -109,7 +109,7 @@
.bd-side,
.bd-side-background
background-color: $white-bis
background-color: $scheme-main-bis
.bd-side
position: relative
@ -128,7 +128,7 @@
margin-bottom: 0.5em
&.is-past
a
color: $grey-light
color: $border-hover
&.is-current
a
color: $link
@ -156,7 +156,7 @@
.bd-category-toggle
+overlay
align-items: center
color: $grey-light
color: $border-hover
display: flex
justify-content: flex-end
.icon
@ -165,19 +165,21 @@
transition-duration: $speed
transition-property: transform
.tag.bd-mini-tag
border-radius: 2px !important
font-family: Verdana, sans-serif
font-size: 0.5rem
font-weight: bold
height: 2.25em
vertical-align: text-bottom
.bd-category-name
color: $text-strong
position: relative
&.is-active
color: $link
.tag
border-radius: 2px
font-family: Verdana
font-size: 0.5rem
font-weight: bold
height: 2.25em
.bd-mini-tag
margin-left: 0.5em
vertical-align: text-bottom
.bd-category-list
@extend %bd-list
@ -199,7 +201,7 @@
top: 0
.bd-anchors-title
color: $grey-light
color: $border-hover
font-size: 0.875rem
font-weight: $weight-semibold
margin-bottom: 0.5rem
@ -227,7 +229,7 @@
.bd-duo
display: flex
.bd-lead
background-color: $white
background-color: $scheme-main
overflow: hidden
flex-grow: 1
flex-shrink: 1

4
docs/_sass/native.sass
View File

@ -30,7 +30,7 @@
text-decoration: none
&:hover
.native-cta
box-shadow: 0 1rem 2rem 0 rgba($black, 0.1)
box-shadow: 0 1rem 2rem 0 rgba($scheme-invert, 0.1)
transform: translateY(-0.25rem)
.native-img
@ -62,7 +62,7 @@
.native-cta
border: none
box-shadow: 0 0.5rem 1rem 0 rgba($black, 0.2)
box-shadow: 0 0.5rem 1rem 0 rgba($scheme-invert, 0.2)
flex-grow: 0
flex-shrink: 0
font-weight: $weight-semibold

6
docs/_sass/patreon.sass
View File

@ -4,7 +4,7 @@
.bd-side-sponsor-label,
.bd-banner-label
color: $grey-light
color: $border-hover
font-size: 0.75rem
margin-bottom: 0.75rem
@ -31,9 +31,9 @@
margin-bottom: 0.25em
&.is-patreon
background-color: $patreon-blue
color: $white
color: $scheme-main
// &.is-fortyfour
// background-color: $white
// background-color: $scheme-main
// border: 2px solid $background
.button
transform-origin: center

18
docs/_sass/specific.sass
View File

@ -2,6 +2,18 @@
background-color: $primary
color: $primary-invert
.bd-post-container
margin: 0 auto
max-width: 56rem
.bd-post-fullwidth
text-align: center
+from(60rem)
.bd-post-fullwidth
margin-left: calc(28rem - 50vw)
margin-right: calc(28rem - 50vw)
.bd-post
.table
font-size: 1rem
@ -56,7 +68,7 @@
strong
font-weight: $weight-semibold
&:hover
background-color: $white-bis
background-color: $scheme-main-bis
.bd-link-surtitle
float: right
@ -280,9 +292,9 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
color: currentColor
code,
pre
background-color: rgba($black, 0.2)
background-color: rgba($scheme-invert, 0.2)
border-radius: $radius
color: $white
color: $scheme-main
pre code
background-color: transparent
// Colors

17
docs/_sass/sponsors.sass
View File

@ -11,14 +11,17 @@
.bd-partnrs-list
margin: -3rem 0 3rem
$bd-partner-width: 12rem
.bd-partner-sponsors
align-items: center
display: flex
flex-wrap: wrap
justify-content: space-between
justify-content: space-around
justify-content: center
margin: 0 auto
max-width: 80rem
max-width: (7 * $bd-partner-width)
.bd-partner-sponsor
align-items: center
@ -30,12 +33,12 @@
text-align: center
&.is-text
color: $text-light
font-size: 0.75em
font-size: 0.875em
line-height: 1.25
min-height: 0
.bd-partnrs
background-color: $white-bis
background-color: $scheme-main-bis
#carbonads
.carbon-text
padding-bottom: 0
@ -43,7 +46,7 @@
display: none
.bd-partner-title
color: $grey-light
color: $border-hover
font-size: 0.875rem
margin-bottom: 1rem
@ -57,11 +60,11 @@
.bd-minis-link
@extend %center
color: $grey
color: $text-light
.icon
margin-right: 0.25em
strong
color: $grey
color: $text-light
margin-left: 0.25em
.bd-minis-list
@ -99,6 +102,8 @@ $bd-partnrs-4: 1130px
flex-shrink: 0
margin-left: 1rem
width: $carbon-width
.bd-partner-sponsor
width: $bd-partner-width
+widescreen
.bd-partnrs

11
docs/_sass/twitter.sass
View File

@ -1,13 +1,14 @@
$tw-black: #1c2022
// $tw-black: #1c2022
$tw-black: $text-strong
$tw-blue: #2b7bb9
$tw-grey: #697882
$tw-border: #e1e8ed
.bd-tws-home
background-color: $white-bis
background-color: $scheme-main-bis
.bd-tw
background-color: $white-bis
background-color: $scheme-main-bis
border-radius: $radius-large
color: $tw-grey
flex-shrink: 0
@ -17,7 +18,7 @@ $tw-border: #e1e8ed
padding: 20px
text-align: left
&.bd-is-white
background-color: $white
background-color: $scheme-main
.bd-tw-header
align-items: stretch
@ -162,7 +163,7 @@ $tw-border: #e1e8ed
min-height: 632px
.twitter-tweet:not(.twitter-tweet-rendered)
background-color: $white
background-color: $scheme-main
border: 1px solid $tw-border
border-radius: 5px
color: $tw-grey

1
docs/backers.html
View File

@ -4,7 +4,6 @@ layout: more
route: backers
breadcrumb:
- home
- more
- patreon-backers
---

41
docs/bulma-dark.sass Normal file
View File

@ -0,0 +1,41 @@
@import ../sass/utilities/initial-variables.sass
// General colors
$scheme-main: $black
$scheme-main-bis: $black-bis
$scheme-main-ter: $black-ter
$scheme-invert: $white
$scheme-invert-bis: $white-bis
$scheme-invert-ter: $white-ter
$background: $black-ter
$border: $grey-darker
$border-hover: $grey-dark
$border-light: $grey-darker
$border-light-hover: $grey-dark
// Text colors
$text: $grey-light
$text-invert: $grey-darker
$text-light: $grey
$text-strong: $white
// Link colors
$link-hover: $white
$link-hover-border: $grey-dark
$link-focus: $white
$link-focus-border: $blue
$link-active: $white
$link-active-border: $grey-light
.bd-navbar
background-color: $scheme-main-bis
&.has-shadow
box-shadow: none

1
docs/bulma-docs.sass
View File

@ -24,6 +24,7 @@ $main-spacing: 3rem
$intro-width: 1080px
$sidebar-width: 10.5rem
// @import "./bulma-dark"
@import "../bulma"
%center

1681
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
docs/documentation/components/breadcrumb.html
View File

@ -164,8 +164,9 @@ meta:
{% endcapture %}
<div class="content">
<p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
<p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
<p>
The Bulma <strong>breadcrumb</strong> is a simple navigation component that only requires a <code>breadcrumb</code> container and a <code>ul</code> list. The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.
</p>
<p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
</div>
@ -175,7 +176,7 @@ meta:
{% include elements/anchor.html name="Alignment" %}
<div class="content">
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>breadcrumb</code> container.</p>
</div>
{% include elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}

17
docs/documentation/components/menu.html
View File

@ -51,6 +51,23 @@ meta:
</aside>
{% endcapture %}
<div class="content">
<p>
The Bulma <code>menu</code> is a vertical navigation component that comprises:
</p>
<ul>
<li>
the <code>menu</code> container
</li>
<li>
informative <code>menu-label</code> labels
</li>
<li>
interactive <code>menu-list</code> lists that can be nested up to 2 levels
</li>
</ul>
</div>
{% include elements/snippet.html content=menu_example size="one-third" %}
{% include elements/variables.html type='component' %}

33
docs/documentation/components/message.html
View File

@ -117,22 +117,53 @@ meta:
{% endfor %}
{% endcapture %}
<div class="content">
<p>
The Bulma <code>message</code> is a multi-part component:
</p>
<ul>
<li>
the <code>message</code> container
</li>
<li>
the optional <code>message-header</code> that can hold a title and a <code>delete</code> element
</li>
<li>
the <code>message-body</code> for the longer body of the message
</li>
</ul>
</div>
{% include elements/snippet.html content=message_example %}
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The message component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html content=message_colors_example %}
{% include elements/anchor.html name="Message body only" %}
<div class="content">
<p>You can <strong>omit</strong> the message header:</p>
<p>
You can remove the <code>message-header</code> if you don't need it, which will add a left border to the <code>message-body</code>:
</p>
</div>
{% include elements/snippet.html content=message_body_example %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>
You can add one of <strong>3 size modifiers</strong> to the <code>message</code> component:
</p>
</div>
{% include elements/snippet.html content=message_small %}
{% include elements/snippet.html content=message_normal %}

86
docs/documentation/components/panel.html
View File

@ -9,7 +9,7 @@ breadcrumb:
- components
- components-panel
meta:
colors: false
colors: true
sizes: false
variables: true
---
@ -17,22 +17,22 @@ meta:
{% capture panel_example %}
<nav class="panel">
<p class="panel-heading">
repositories
Repositories
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-small" type="text" placeholder="search">
<span class="icon is-small is-left">
<input class="input" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">all</a>
<a>public</a>
<a>private</a>
<a>sources</a>
<a>forks</a>
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
@ -76,12 +76,61 @@ meta:
</label>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth">
reset all filters
Reset all filters
</button>
</div>
</nav>
{% endcapture %}
{% capture panel_colors_example %}
{% for color in site.data.colors.justColors %}
<article class="panel is-{{ color }}">
<p class="panel-heading">
{{ color | capitalize }}
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-{{ color }}" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
</article>
{% endfor %}
{% endcapture %}
<div class="content">
<p>
The <code>panel</code> is container for several types:
@ -108,6 +157,21 @@ meta:
</p>
</div>
{% include elements/snippet.html content=panel_example %}
{% include elements/snippet.html content=panel_example more=true %}
{% include elements/anchor.html name="Colors" %}
{% include elements/new-tag.html version="0.8.0" %}
<div class="content">
<p>
The panel component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>. Simply append one of the color modifiers.
</p>
<p>
For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
</p>
</div>
{% include elements/snippet.html content=panel_colors_example more=true %}
{% include elements/variables.html type='component' %}

22
docs/documentation/components/tabs.html
View File

@ -354,8 +354,26 @@ meta:
{% endcapture %}
<div class="content">
<p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code>&lt;ul&gt;</code> list.<br>
The <strong>default</strong> tabs style has a single border at the bottom.</p>
<p>
The Bulma <code>tabs</code> are a straightforward navigation component that come in a variety of versions. They only require the following structure:
</p>
<ul>
<li>
a <code>tabs</code> container
</li>
<li>
a <code>&lt;ul&gt;</code> HTML element
</li>
<li>
a list of <code>&lt;li&gt;</code> HTML element
</li>
<li>
<code>&lt;a&gt;</code> HTML anchor elements for each link
</li>
</ul>
<p>
The <strong>default</strong> tabs style has a single border at the bottom.
</p>
</div>
{% include elements/snippet.html content=tabs_example horizontal=true %}

2
docs/documentation/customize/concepts.html
View File

@ -14,7 +14,7 @@ breadcrumb:
<div class="content">
<p>
Bulma is highly customizable thanks to <strong>415 Sass variables</strong> living across <strong>28 files</strong>.
Bulma is highly customizable thanks to <strong>419 Sass variables</strong> living across <strong>28 files</strong>.
</p>
<p>

3
docs/documentation/customize/with-webpack.html
View File

@ -14,6 +14,7 @@ breadcrumb:
npm install bulma --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install mini-css-extract-plugin --save-dev
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
@ -116,7 +117,7 @@ module.exports = {
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].bundle.css'
filename: 'css/mystyles.css'
}),
]
};

2
docs/documentation/elements/box.html
View File

@ -56,7 +56,7 @@ meta:
<div class="content">
<p>
The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
The <code>box</code> element is simply a container with a shadow, a border, a radius, and some padding.
<br>
For example, you can include a media object:
</p>

480
docs/documentation/elements/button.html
View File

@ -15,7 +15,7 @@ meta:
---
{% capture button_example %}
<a class="button">Button</a>
<button class="button">Button</button>
{% endcapture %}
{% capture button_tags_example %}
@ -26,137 +26,156 @@ meta:
{% endcapture %}
{% capture button_colors_a_example %}
<a class="button is-white">White</a>
<a class="button is-light">Light</a>
<a class="button is-dark">Dark</a>
<a class="button is-black">Black</a>
<a class="button is-text">Text</a>
<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
{% endcapture %}
{% capture button_colors_b_example %}
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>
<div class="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
</div>
<div class="buttons">
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
</div>
{% endcapture %}
{% capture button_light_colors_b_example %}
<div class="buttons">
<button class="button is-primary is-light">Primary</button>
<button class="button is-link is-light">Link</button>
</div>
<div class="buttons">
<button class="button is-info is-light">Info</button>
<button class="button is-success is-light">Success</button>
<button class="button is-warning is-light">Warning</button>
<button class="button is-danger is-light">Danger</button>
</div>
{% endcapture %}
{% capture button_sizes_example %}
<a class="button is-small">Small</a>
<a class="button">Default</a>
<a class="button is-normal">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>
<button class="button is-small">Small</button>
<button class="button">Default</button>
<button class="button is-normal">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>
{% endcapture %}
{% capture buttons_medium_sizes_example %}
<div class="buttons are-medium">
<a class="button">All</a>
<a class="button">Medium</a>
<a class="button">Size</a>
<button class="button">All</button>
<button class="button">Medium</button>
<button class="button">Size</button>
</div>
{% endcapture %}
{% capture buttons_small_normal_sizes_example %}
<div class="buttons are-small">
<a class="button">Small</a>
<a class="button">Small</a>
<a class="button">Small</a>
<a class="button is-normal">Normal</a>
<a class="button">Small</a>
<button class="button">Small</button>
<button class="button">Small</button>
<button class="button">Small</button>
<button class="button is-normal">Normal</button>
<button class="button">Small</button>
</div>
{% endcapture %}
{% capture button_displays_example %}
<a class="button is-small is-fullwidth">Small</a>
<a class="button is-fullwidth">Normal</a>
<a class="button is-medium is-fullwidth">Medium</a>
<a class="button is-large is-fullwidth">Large</a>
<button class="button is-small is-fullwidth">Small</button>
<button class="button is-fullwidth">Normal</button>
<button class="button is-medium is-fullwidth">Medium</button>
<button class="button is-large is-fullwidth">Large</button>
{% endcapture %}
{% capture button_outlined_example %}
<a class="button is-outlined">Outlined</a>
<a class="button is-primary is-outlined">Outlined</a>
<a class="button is-link is-outlined">Outlined</a>
<a class="button is-info is-outlined">Outlined</a>
<a class="button is-success is-outlined">Outlined</a>
<a class="button is-danger is-outlined">Outlined</a>
<button class="button is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-link is-outlined">Outlined</button>
<button class="button is-info is-outlined">Outlined</button>
<button class="button is-success is-outlined">Outlined</button>
<button class="button is-danger is-outlined">Outlined</button>
{% endcapture %}
{% capture button_inverted_example %}
<a class="button is-primary is-inverted">Inverted</a>
<a class="button is-link is-inverted">Inverted</a>
<a class="button is-info is-inverted">Inverted</a>
<a class="button is-success is-inverted">Inverted</a>
<a class="button is-danger is-inverted">Inverted</a>
<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-link is-inverted">Inverted</button>
<button class="button is-info is-inverted">Inverted</button>
<button class="button is-success is-inverted">Inverted</button>
<button class="button is-danger is-inverted">Inverted</button>
{% endcapture %}
{% capture button_inverted_outlined_example %}
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class="button is-link is-inverted is-outlined">Invert Outlined</a>
<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
<button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
<button class="button is-link is-inverted is-outlined">Invert Outlined</button>
<button class="button is-info is-inverted is-outlined">Invert Outlined</button>
<button class="button is-success is-inverted is-outlined">Invert Outlined</button>
<button class="button is-danger is-inverted is-outlined">Invert Outlined</button>
{% endcapture %}
{% capture button_rounded_example %}
<a class="button is-rounded">Rounded</a>
<a class="button is-primary is-rounded">Rounded</a>
<a class="button is-link is-rounded">Rounded</a>
<a class="button is-info is-rounded">Rounded</a>
<a class="button is-success is-rounded">Rounded</a>
<a class="button is-danger is-rounded">Rounded</a>
<button class="button is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-link is-rounded">Rounded</button>
<button class="button is-info is-rounded">Rounded</button>
<button class="button is-success is-rounded">Rounded</button>
<button class="button is-danger is-rounded">Rounded</button>
{% endcapture %}
{% capture button_normal_example %}
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-link">Normal</a>
<a class="button is-info">Normal</a>
<a class="button is-success">Normal</a>
<a class="button is-warning">Normal</a>
<a class="button is-danger">Normal</a>
<button class="button">Normal</button>
<button class="button is-primary">Normal</button>
<button class="button is-link">Normal</button>
<button class="button is-info">Normal</button>
<button class="button is-success">Normal</button>
<button class="button is-warning">Normal</button>
<button class="button is-danger">Normal</button>
{% endcapture %}
{% capture button_hover_example %}
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-link is-hovered">Hover</a>
<a class="button is-info is-hovered">Hover</a>
<a class="button is-success is-hovered">Hover</a>
<a class="button is-warning is-hovered">Hover</a>
<a class="button is-danger is-hovered">Hover</a>
<button class="button is-hovered">Hover</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-link is-hovered">Hover</button>
<button class="button is-info is-hovered">Hover</button>
<button class="button is-success is-hovered">Hover</button>
<button class="button is-warning is-hovered">Hover</button>
<button class="button is-danger is-hovered">Hover</button>
{% endcapture %}
{% capture button_focus_example %}
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-link is-focused">Focus</a>
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
<a class="button is-danger is-focused">Focus</a>
<button class="button is-focused">Focus</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-link is-focused">Focus</button>
<button class="button is-info is-focused">Focus</button>
<button class="button is-success is-focused">Focus</button>
<button class="button is-warning is-focused">Focus</button>
<button class="button is-danger is-focused">Focus</button>
{% endcapture %}
{% capture button_active_example %}
<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-link is-active">Active</a>
<a class="button is-info is-active">Active</a>
<a class="button is-success is-active">Active</a>
<a class="button is-warning is-active">Active</a>
<a class="button is-danger is-active">Active</a>
<button class="button is-active">Active</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-link is-active">Active</button>
<button class="button is-info is-active">Active</button>
<button class="button is-success is-active">Active</button>
<button class="button is-warning is-active">Active</button>
<button class="button is-danger is-active">Active</button>
{% endcapture %}
{% capture button_loading_example %}
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-link is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>
<button class="button is-loading">Loading</button>
<button class="button is-primary is-loading">Loading</button>
<button class="button is-link is-loading">Loading</button>
<button class="button is-info is-loading">Loading</button>
<button class="button is-success is-loading">Loading</button>
<button class="button is-warning is-loading">Loading</button>
<button class="button is-danger is-loading">Loading</button>
{% endcapture %}
{% capture button_static_example %}
@ -164,159 +183,160 @@ meta:
{% endcapture %}
{% capture button_disabled_example %}
<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-link" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>
<button class="button" title="Disabled button" disabled>Disabled</button>
<button class="button is-primary" title="Disabled button" disabled>Disabled</button>
<button class="button is-link" title="Disabled button" disabled>Disabled</button>
<button class="button is-info" title="Disabled button" disabled>Disabled</button>
<button class="button is-success" title="Disabled button" disabled>Disabled</button>
<button class="button is-warning" title="Disabled button" disabled>Disabled</button>
<button class="button is-danger" title="Disabled button" disabled>Disabled</button>
{% endcapture %}
{% capture button_fa_example %}
<p class="buttons">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-bold"></i>
</span>
</a>
<a class="button">
</button>
<button class="button">
<span class="icon is-small">
<i class="fas fa-italic"></i>
</span>
</a>
<a class="button">
</button>
<button class="button">
<span class="icon is-small">
<i class="fas fa-underline"></i>
</span>
</a>
</button>
</p>
<p class="buttons">
<a class="button">
<button class="button">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="button is-primary">
</button>
<button class="button is-primary">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>Twitter</span>
</a>
<a class="button is-success">
</button>
<button class="button is-success">
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
<span>Save</span>
</a>
<a class="button is-danger is-outlined">
</button>
<button class="button is-danger is-outlined">
<span>Delete</span>
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
</button>
</a>
</p>
<p class="buttons">
<a class="button is-small">
<button class="button is-small">
<span class="icon is-small">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="button">
</button>
<button class="button">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="button is-medium">
</button>
<button class="button is-medium">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="button is-large">
</button>
<button class="button is-large">
<span class="icon is-medium">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
</button>
</p>
{% endcapture %}
{% capture button_only_icon_example %}
<p class="buttons">
<a class="button is-small">
<button class="button is-small">
<span class="icon is-small">
<i class="fas fa-heading"></i>
</span>
</a>
</button>
</p>
<p class="buttons">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-heading"></i>
</span>
</a>
<a class="button">
</button>
<button class="button">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</a>
</button>
</p>
<p class="buttons">
<a class="button is-medium">
<button class="button is-medium">
<span class="icon is-small">
<i class="fas fa-heading"></i>
</span>
</a>
<a class="button is-medium">
</button>
<button class="button is-medium">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</a>
<a class="button is-medium">
</button>
<button class="button is-medium">
<span class="icon is-medium">
<i class="fas fa-heading fa-2x"></i>
</span>
</a>
</button>
</p>
<p class="buttons">
<a class="button is-large">
<button class="button is-large">
<span class="icon is-small">
<i class="fas fa-heading"></i>
</span>
</a>
<a class="button is-large">
</button>
<button class="button is-large">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</a>
<a class="button is-large">
</button>
<button class="button is-large">
<span class="icon is-medium">
<i class="fas fa-heading fa-2x"></i>
</span>
</a>
</button>
</p>
{% endcapture %}
{% capture button_group_example %}
<div class="field is-grouped">
<p class="control">
<a class="button is-link">
<button class="button is-link">
Save changes
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
Cancel
</a>
</button>
</p>
<p class="control">
<a class="button is-danger">
<button class="button is-danger">
Delete post
</a>
</button>
</p>
</div>
{% endcapture %}
@ -324,28 +344,28 @@ meta:
{% capture button_addons_example %}
<div class="field has-addons">
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-left"></i>
</span>
<span>Left</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-center"></i>
</span>
<span>Center</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-right"></i>
</span>
<span>Right</span>
</a>
</button>
</p>
</div>
{% endcapture %}
@ -353,133 +373,133 @@ meta:
{% capture button_group_addons_example %}
<div class="field has-addons">
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-bold"></i>
</span>
<span>Bold</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-italic"></i>
</span>
<span>Italic</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-underline"></i>
</span>
<span>Underline</span>
</a>
</button>
</p>
</div>
<div class="field has-addons">
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-left"></i>
</span>
<span>Left</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-center"></i>
</span>
<span>Center</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-right"></i>
</span>
<span>Right</span>
</a>
</button>
</p>
</div>
{% endcapture %}
{% capture buttons_list %}
<div class="buttons">
<span class="button is-success">Save changes</span>
<span class="button is-info">Save and continue</span>
<span class="button is-danger">Cancel</span>
<button class="button is-success">Save changes</button>
<button class="button is-info">Save and continue</button>
<button class="button is-danger">Cancel</button>
</div>
{% endcapture %}
{% capture buttons_multiple %}
<div class="buttons">
<span class="button">One</span>
<span class="button">Two</span>
<span class="button">Three</span>
<span class="button">Four</span>
<span class="button">Five</span>
<span class="button">Six</span>
<span class="button">Seven</span>
<span class="button">Eight</span>
<span class="button">Nine</span>
<span class="button">Ten</span>
<span class="button">Eleven</span>
<span class="button">Twelve</span>
<span class="button">Thirteen</span>
<span class="button">Fourteen</span>
<span class="button">Fifteen</span>
<span class="button">Sixteen</span>
<span class="button">Seventeen</span>
<span class="button">Eighteen</span>
<span class="button">Nineteen</span>
<span class="button">Twenty</span>
<button class="button">One</button>
<button class="button">Two</button>
<button class="button">Three</button>
<button class="button">Four</button>
<button class="button">Five</button>
<button class="button">Six</button>
<button class="button">Seven</button>
<button class="button">Eight</button>
<button class="button">Nine</button>
<button class="button">Ten</button>
<button class="button">Eleven</button>
<button class="button">Twelve</button>
<button class="button">Thirteen</button>
<button class="button">Fourteen</button>
<button class="button">Fifteen</button>
<button class="button">Sixteen</button>
<button class="button">Seventeen</button>
<button class="button">Eighteen</button>
<button class="button">Nineteen</button>
<button class="button">Twenty</button>
</div>
{% endcapture %}
{% capture buttons_addons %}
<div class="buttons has-addons">
<span class="button">Yes</span>
<span class="button">Maybe</span>
<span class="button">No</span>
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_centered %}
<div class="buttons has-addons is-centered">
<span class="button">Yes</span>
<span class="button">Maybe</span>
<span class="button">No</span>
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_right %}
<div class="buttons has-addons is-right">
<span class="button">Yes</span>
<span class="button">Maybe</span>
<span class="button">No</span>
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_selected %}
<div class="buttons has-addons">
<span class="button is-success is-selected">Yes</span>
<span class="button">Maybe</span>
<span class="button">No</span>
<button class="button is-success is-selected">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
<div class="buttons has-addons">
<span class="button">Yes</span>
<span class="button is-info is-selected">Maybe</span>
<span class="button">No</span>
<button class="button">Yes</button>
<button class="button is-info is-selected">Maybe</button>
<button class="button">No</button>
</div>
<div class="buttons has-addons">
<span class="button">Yes</span>
<span class="button">Maybe</span>
<span class="button is-danger is-selected">No</span>
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button is-danger is-selected">No</button>
</div>
{% endcapture %}
@ -493,7 +513,7 @@ meta:
<div class="content">
<p>
The <code>.button</code> class can be used on:
The <code>button</code> class can be used on:
</p>
<ul>
<li>
@ -515,9 +535,25 @@ meta:
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The button is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html wrapper="buttons" content=button_colors_a_example %}
{% include elements/snippet.html wrapper="buttons" content=button_colors_b_example %}
{% include elements/snippet.html content=button_colors_b_example %}
{% include elements/new-tag.html version="0.8.0" %}
<div class="content">
<p>
Each color now comes in its <strong>light version</strong>. Simply append the modifier <code>is-light</code> to the color modifier to apply the light version of the button.
</p>
</div>
{% include elements/snippet.html content=button_light_colors_b_example %}
{% include elements/anchor.html name="Sizes" %}
@ -550,7 +586,7 @@ meta:
<div class="content">
<p>
You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>.buttons</code> parent, and applying one of 3 modifiers:
You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>buttons</code> parent, and applying one of 3 modifiers:
</p>
<ul>
<li>
@ -633,6 +669,26 @@ meta:
{% include elements/anchor.html name="States" %}
<div class="content">
<p>
Bulma styles the different <strong>states</strong> of its buttons. Each state is available as a pseudo-class and a CSS class:
</p>
<ul>
<li>
<code>:hover</code> and <code>is-hovered</code>
</li>
<li>
<code>:focus</code> and <code>is-focused</code>
</li>
<li>
<code>:active</code> and <code>is-active</code>
</li>
</ul>
<p>
This allows you to obtain the style of a certain state without having to trigger it.
</p>
</div>
<h4 class="subtitle">Normal</h4>
{% include elements/snippet.html wrapper="buttons" content=button_normal_example %}
@ -651,6 +707,12 @@ meta:
<h4 class="subtitle">Loading</h4>
<div class="content">
<p>
You can very easily turn a button into its <strong>loading</strong> version by appending the <code>is-loading</code> modifier. You don't even need to remove the inner text, which allows the button to maintain its <strong>original size</strong> between its default and loading states.
</p>
</div>
<div class="columns">
<div class="column">
<div class="buttons">
@ -659,7 +721,7 @@ meta:
<div class="message is-info">
<div class="message-body">
<p>
Since the loading spinner is implemented using the <code>:after</code> pseudo-element, it is not supported by the <code>&lt;input type="submit"&gt;</code> element. Consider using <code>&lt;button type="submit"&gt;</code> instead.
Since the loading spinner is implemented using the <code>::after</code> pseudo-element, it is not supported by the <code>&lt;input&nbsp;type="submit"&gt;</code> element. Consider using <code>&lt;button&nbsp;type="submit"&gt;</code> instead.
</p>
</div>
</div>
@ -689,6 +751,12 @@ meta:
<h4 class="subtitle">Disabled</h4>
<div class="content">
<p>
Bulma supports the use of the <code>disabled</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button" target="_blank">Boolean HTML attribute</a>, which prevents the user from interacting with the button.
</p>
</div>
<div class="columns">
<div class="column">
<div class="buttons">
@ -707,6 +775,12 @@ meta:
<h4 class="subtitle">With Font Awesome icons</h4>
<div class="content">
<p>
Bulma buttons can easily be enhanced by adding a <strong>Font Awesome icon</strong>. For the best results, wrap the inner text in a separate <code>&lt;span&gt;</code> element.
</p>
</div>
{% include elements/snippet.html content=button_fa_example clipped=true %}
<div class="columns">
@ -755,7 +829,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
You can create a <strong>list of buttons</strong> by using the <code>buttons</code> container.
</p>
</div>
<div class="bd-example">
@ -787,7 +861,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
You can <strong>attach buttons together</strong> with the <code>has-addons</code> modifier.
</p>
</div>
<div class="bd-example">

2
docs/documentation/elements/delete.html
View File

@ -51,7 +51,7 @@ meta:
<div class="content">
<p>
The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
The <code>delete</code> element is a stand-alone element that can be used in different contexts.
</p>
<p>
On its own, it's a simple circle with a cross:

104
docs/documentation/elements/icon.html
View File

@ -1,8 +1,7 @@
---
title: Icon
subtitle: "Bulma is compatible with <strong>all icon font libraries</strong>: <a href=\"https://fontawesome.com/\">Font Awesome 5</a>, <a href=\"http://fontawesome.io/\">Font Awesome 4</a>, <a href=\"https://materialdesignicons.com\">Material Design Icons</a>, <a href=\"https://useiconic.com/open\">Open Iconic</a>, <a href=\"http://ionicons.com/\">Ionicons</a> etc."
subtitle: "Bulma is compatible with <strong>all icon font libraries</strong>: <a href=\"https://fontawesome.com/\">Font Awesome 5</a>, <a href=\"http://fontawesome.io/\">Font Awesome 4</a>, <a href=\"https://materialdesignicons.com\">Material Design Icons</a>, <a href=\"http://ionicons.com/\">Ionicons</a>, etc."
fontawesome4: true
iconic: true
ionicons: true
mdi: true
layout: documentation
@ -94,7 +93,8 @@ meta:
<div class="content">
<p>
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.
</p>
</div>
{% include elements/anchor.html name="Colors" %}
@ -750,104 +750,6 @@ meta:
</tbody>
</table>
{% include elements/anchor.html name="Open Iconic" %}
<div class="content">
<p>
Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>.
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>Container class</th>
<th>Container size</th>
<th>Iconic class</th>
<th>Icon size</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>icon is-small</code>
</td>
<td>
<code>1rem x 1rem</code>
</td>
<td>
<code>oi [data-glyph=puzzle-piece]</code>
</td>
<td>
<code>1em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-small">
<span class="oi" data-glyph="puzzle-piece"></span>
</span>
</td>
</tr>
<tr>
<td>
<code>icon</code>
</td>
<td>
<code>1.5rem x 1.5rem</code>
</td>
<td>
<code>oi [data-glyph=puzzle-piece]</code>
</td>
<td>
<code>1em</code>
</td>
<td class="bd-icon-size">
<span class="icon">
<span class="oi" data-glyph="puzzle-piece"></span>
</span>
</td>
</tr>
<tr>
<td>
<code>icon is-medium</code>
</td>
<td>
<code>2rem x 2rem</code>
</td>
<td>
<code>oi [data-glyph=puzzle-piece]</code>
</td>
<td>
<code>1em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-medium">
<span class="oi" data-glyph="puzzle-piece"></span>
</span>
</td>
</tr>
<tr>
<td>
<code>icon is-large</code>
</td>
<td>
<code>3rem x 3rem</code>
</td>
<td>
<code>oi [data-glyph=puzzle-piece]</code>
</td>
<td>
<code>1em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-large">
<span class="oi" data-glyph="puzzle-piece"></span>
</span>
</td>
</tr>
</tbody>
</table>
{% include elements/anchor.html name="Ionicons" %}
<div class="content">

8
docs/documentation/elements/image.html
View File

@ -47,7 +47,7 @@ meta:
{% endcapture %}
<div class="content">
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
<p>Because images can take a few seconds to load (or not at all), use the <code>image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
</div>
{% include elements/snippet.html content=image %}
@ -73,7 +73,7 @@ meta:
{% include elements/anchor.html name="Rounded images" %}
<div class="content">
<p>You can also make rounded images, using <code>.is-rounded</code> class:</p>
<p>You can also make rounded images, using <code>is-rounded</code> class:</p>
</div>
{% include elements/snippet.html content=rounded_image %}
@ -178,7 +178,7 @@ meta:
</table>
<div class="content">
<p>The <code>.image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
<p>The <code>image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
<br>If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.</p>
</div>
@ -188,7 +188,7 @@ meta:
<div class="content">
<p>
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>.has-ratio</code> modifier to a resizable element.
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>has-ratio</code> modifier to a resizable element.
</p>
<p>
For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see how the ratio is maintained.

51
docs/documentation/elements/notification.html
View File

@ -34,6 +34,17 @@ meta:
{% endfor %}
{% endcapture %}
{% capture notification_light_colors %}
{% for color in site.data.colors.justColors %}
<div class="notification is-{{ color }} is-light">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% endfor %}
{% endcapture %}
{% capture notification_js_html %}
<div class="notification">
<button class="delete"></button>
@ -45,6 +56,7 @@ meta:
document.addEventListener('DOMContentLoaded', () => {
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
$notification = $delete.parentNode;
$delete.addEventListener('click', () => {
$notification.parentNode.removeChild($notification);
});
@ -52,31 +64,42 @@ document.addEventListener('DOMContentLoaded', () => {
});
{% endcapture %}
<div class="content">
<p>
The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the <code>delete</code> element.
</p>
</div>
{% include elements/snippet.html content=notification %}
{% include elements/anchor.html name="Colors" %}
{% include elements/snippet.html content=notification_colors %}
<div id="notificationJsExample" class="message is-info">
<h4 class="message-header">Javascript delete notification</h4>
<div class="message-body">
<div class="content">
<p>
The Bulma package <strong>does not come with any JavaScript</strong>.
<br>
Here is however an implementation example, which sets <code>click</code> handler for <code>delete</code> elements of all notifications on the page, in Vanilla Javascript.
The notification element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html content=notification_colors %}
{% include elements/anchor.html name="Light colors" %}
{% include elements/new-tag.html version="0.8.1" %}
Each color now comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to obtain the light version of the notification.
{% include elements/snippet.html content=notification_light_colors %}
{% include elements/anchor.html name="JavaScript example" %}
<div class="content">
<p>
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handler for Bulma <code>delete</code> all on the page, in vanilla JavaScript.
</p>
{% highlight html %}{{ notification_js_html }}{% endhighlight %}
{% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
<p>
Remember, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>.
</p>
</div>
</div>
</div>
{% include elements/variables.html type='element' %}

12
docs/documentation/elements/progress.html
View File

@ -41,10 +41,22 @@ meta:
<progress class="progress is-large is-info" max="100">60%</progress>
{% endcapture %}
<div class="content">
<p>
The Bulma progress bar is a simple CSS class that styles the native <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress" target="_blank"><code>&lt;progress&gt;</code> HTML element</a>.
</p>
</div>
{% include elements/snippet.html content=progress %}
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The progress bar element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html content=progress_colors %}
{% include elements/anchor.html name="Sizes" %}

7
docs/documentation/elements/table.html
View File

@ -315,10 +315,13 @@ meta:
{% endcapture %}
<div class="content">
<p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
<p>
You can create a <strong>Bulma table</strong> simply by attaching a single <code>table</code> CSS class on a <code>&lt;table&gt;</code> HTML element with the following structure:
</p>
<ul>
<li>
<code>table</code> the main <strong>container</strong>
<code>&lt;table class="table"&gt;</code> as the main <strong>container</strong>
<ul>
<li>
<code>thead</code> the optional <strong>top</strong> part of the table

66
docs/documentation/elements/tag.html
View File

@ -33,6 +33,15 @@ meta:
<span class="tag is-danger">Danger</span>
{% endcapture %}
{% capture tags_light_colors %}
<span class="tag is-primary is-light">Primary</span>
<span class="tag is-link is-light">Link</span>
<span class="tag is-info is-light">Info</span>
<span class="tag is-success is-light">Success</span>
<span class="tag is-warning is-light">Warning</span>
<span class="tag is-danger is-light">Danger</span>
{% endcapture %}
{% capture sizes %}
<span class="tag is-link is-normal">Normal</span>
<span class="tag is-primary is-medium">Medium</span>
@ -133,7 +142,7 @@ meta:
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">npm</span>
<span class="tag is-info">0.5.0</span>
<span class="tag is-info">{{ site.version }}</span>
</div>
</div>
@ -213,6 +222,12 @@ meta:
</div>
{% endcapture %}
<div class="content">
<p>
The Bulma <strong>tag</strong> is a small but versatile element. It's very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.
</p>
</div>
<div class="columns">
<div class="column is-4">
By default, a <strong>tag</strong> is a 1.5rem high label.
@ -288,6 +303,49 @@ meta:
</div>
</div>
{% include elements/new-tag.html version="0.8.0" %}
<div class="columns">
<div class="column is-4">
<p>
You can now choose the <strong>light version</strong> of a color.
</p>
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-primary is-light">
Primary
</span>
</p>
<p class="field">
<span class="tag is-link is-light">
Link
</span>
</p>
<p class="field">
<span class="tag is-info is-light">
Info
</span>
</p>
<p class="field">
<span class="tag is-success is-light">
Success
</span>
</p>
<p class="field">
<span class="tag is-warning is-light">
Warning
</span>
</p>
<span class="tag is-danger is-light">
Danger
</span>
</div>
<div class="column is-6">
{% highlight html %}{{ tags_light_colors }}{% endhighlight %}
</div>
</div>
{% include elements/anchor.html name="Sizes" %}
<div class="columns">
@ -406,7 +464,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
You can now create a <strong>list of tags</strong> with the <code>tags</code> container.
</p>
</div>
<div class="bd-example">
@ -438,7 +496,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
You can <strong>attach tags together</strong> with the <code>has-addons</code> modifier.
</p>
</div>
<div class="bd-example">
@ -470,7 +528,7 @@ meta:
<div class="column">
<div class="content">
<p>
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
If you want to attach <code>tags</code> containers <strong>together</strong>, simply use the <code>field</code> element with the <code>is-grouped</code> and <code>is-grouped-multiline</code> modifiers.
</p>
</div>
<div class="bd-example">

4
docs/documentation/elements/title.html
View File

@ -65,10 +65,10 @@ meta:
<p>There are <strong>2 types</strong> of heading:</p>
<ul>
<li>
<code>.title</code>
<code>title</code>
</li>
<li>
<code>.subtitle</code>
<code>subtitle</code>
</li>
</ul>
</div>

Some files were not shown because too many files have changed in this diff Show More