- Fix #3842: restore use of
$easing
,$radius-rounded
and$speed
Sass variables - Fix #3920: migrate code to avoid Sass 1.80 deprecation warning of global built-in functions
- Fix #3904, #3884: fix website horizontal overflow
- Fix #3849: fix Light Mode color swatches in Dark Mode
- Fix #3918: broken placeholder images
- Fix #3926: broken documentation hero
- Smart Grid
is-col-min
now goes up to32
(Fixes #3829) - Remove need for
is-variable
modifier for Column gaps - You can have a list of radio buttons or checkboxes with the
radios
andcheckboxes
classes respectively - Add
is-max-tablet
modifier to the Container element - Add
currentColor
andinherit
as possible values for the color and background helpers - The Section can now have a minimum height of
100vh
with theis-fullheight
modifier - Add more SCSS variables:
$input-border-style
$input-border-width
$label-spacing
$field-block-spacing
- Add more CSS variables:
--bulma-input-border-style
--bulma-input-border-width
--bulma-label-color
--bulma-label-spacing
--bulma-label-weight
--bulma-help-size
--bulma-field-block-spacing
- Fix #3824: ability to override
$scheme-h
,$scheme-s
,$dark-l
and$light-l
Sass variables - Fix #3830: add remaining logical properties
- Fix #3743: make sure 12 columns system take up whole width
- Fix #3799: restore variable columns
- Fix #3846: restore
--bulma-column-gap
CSS variable - Fix #3775:
has-background
helpers should only affect element it's applied to - Fix #3856: Sass nested rule deprecation warning
- Fix #3757: restore use of
$navbar-burger-color
- Fix #3755:
.select
colors - Fix #3736: include helpers in "No Dark Mode" version
- Fix #3744: build non-minified versions
- Fix #3747: ability to nest fixed grids
- Fix #3759: remove unused
.skeleton
class - Fix #3786: fix horizontal padding of rounded buttons
- Fix #3725
- Fix #3720
- Update online documentation link in README
- Update
migrating-to-v1.html
- Fix #3735
- Fix #3729: explain how to use Bulma in a modular way
- Fix #3785: make use of the
@prefers-reduced-motion
setting - Fix #3758: broken links for
0.9.4
version - Fix #3760: fix form controls typo
- Fix #3737: Move
sass
todevDependencies
Bulma v1 is a full rewrite of the framework using Dart Sass, which is the the primary implementation of Sass. While this affects a few development details, everything has been done to make the transition as easy as possible.
All HTML snippets are the same. This means you don't need to update your markup. This is important because it means, if you're using Bulma straight "out of the box", you don't need to change anything.
You can just swap bulma@0.9.4/css/bulma.min.css
with bulma@1.0.0/css/bulma.min.css
and everything will work. Things will look slightly different, but they will still work.
- Dart Sass is used to build Bulma
- if you use the
sass
npm package, you're already using Dart Sass
- if you use the
- CSS Variables are used instead of literals:
color: var(--bulma-primary);
instead ofcolor: hsl(171deg, 100%, 41%);
, which means you can customize Bulma with CSS only (without using Sass) - Customization by setting your own value for Sass variables works differently. See how to customize Bulma with Sass.
- The notion of Themes is introduced: a theme is a collection of CSS variables within a context, and is the best approach to customize Bulma
- As a result, a Theme for Dark Mode is included
- Color Palettes are created for each of the 7 primary colors
- Skeleton loaders exist as standalone components but also as variants of other components
- You can add a prefix to all your Bulma classes so that
.button
becomes.my-prefix-button
- a pre-built prefixed version exists as one of the alternative versions
- Responsive buttons: the size of a button will change for each breakpoint (Fix #1572)
@mixin between
: takes 2 breakpoint values, outputs a media query for the range between these 2 values$breakpoints
Sass map: a map of named breakpoints and their type (from
,until
or both)@mixin breakpoint
: uses the new$breakpoints
Sass map to output a media query
- Add missing variables for content customization
- Fix #683 Modal - example javascript toggle
- Fix #3461 Bulma logo with wordmark in SVG
- Fix #3383 'Variables' sections on docs page (#3513)
- Fixes #3510 The navbar overlaps with sidebars in "Fullheight hero with navbar" (#3516)
- Setup Cypress testing (#3436)
- Replace disabled attr on pagination anchor elements with is-disabled
- #3500 Fix hidden disabled buttons on iOS 15.4 (#3521)
- #3076 Fix Table headers centered aligned in Safari
- New
is-underlined
class for underlined text and links - New
auto
value for margin and padding helper classes
- New
$section-padding-desktop
Sass variable - New
$hero-body-padding-tablet
Sass variable - New
$shadow
Sass variable (used for.box
,.card
,.dropdown
and.panel
) - Add
is-normal
size modifiers to.file
and.content
- New
%reset
placeholder
- #3362 Fix slash divide
To fix duplicate imports, all Sass placeholders have moved from the utilities/mixins
file to its own utilities/extends
file.
The Sass placeholders are:
%control
%unselectable
%arrow
%block
%delete
%loader
%overlay
If you were importing them directly from utilities/mixins
, you'll need to import utilities/extends
instead.
If you were importing utilities/_all
or even bulma.sass
directly, no change is required.
- Fix #1583 New
is-ghost
button that behaves / looks like a regular link - New
icon-text
component, to combine an icon with text on its side
- #3005 Fix
column
offsets in RTL - Fix #3145 Dropdown content is bounded by a parent card
- Fix #3089 Sub columns of a variable columns have weird gap
- Fix #2937 Add
width: unset
for narrow columns - #3208 Fix #3163 Do not override is-rounded with button-small
- #3216 Removed duplicate
mixins
imports, created a singleextends
file - #3216 Removed all references to the
.sass
file extension have been removed, since they're unnecessary when there's no ambiguity between a.sass
file or a.scss
file
- Fix #3012 Add
$media-*
variables, set to!default
- Fix #2797 Import dependencies individually for each component
- Remove list style from pagination list
- #3047 Flexbox helpers
- #3085 Add
is-clickable
helper - #3086 Allow each component to have its own colors and default to global ones
- New variables
$navbar-colors
,$button-colors
,$notification-colors
,$progress-colors
,$table-colors
,$tag-colors
,$file-colors
,$textarea-colors
,$select-colors
,$form-colors
,$label-colors
and$hero-colors
- #2630 Fixes #2598 -> Add
$card-radius
variable - Add
$card-overflow
variable - #2540 Fixes #2539 -> Fix indeterminate progress styling in IE11
- #3057 Make the default text color of
$code
listings more accessible - #3088 Adds not allowed cursor to missing inputs
- #3101 Add
$modal-breakpoint
variable for modal breakpoint - #3107 Add
optgroup
togeneric.sass
The base/helpers.sass
file is deprecated. It has moved into its own /helpers
folder. If you were importing base/helpers.sass
or base/_all.sass
, please import sass/helpers/_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 before.
The list
component is also deprecated: the components/list.sass
file has been deleted. It was never officially supported as it was too similar to panel
component. Use that one instead.
Bulma now has RTL support.
By setting the Sass flag $rtl
to true
, you can create an RTL version of Bulma, thanks to 4 new Sass mixins:
=ltr
=rtl
=ltr-property($property, $spacing, $right: true)
=ltr-position($spacing, $right: true)
The Bulma package now also comes with a bulma-rtl.css
and bulma-rtl.min.css
file to be used straight away.
Bulma now has spacing helpers: https://bulma.io/documentation/helpers/spacing-helpers/
Bulma provides margin m*
and padding p*
helpers in all directions:
-
*t
for top -
*r
for right -
*b
for bottom -
*l
for left -
*x
horizontally for both left and right -
*y
vertically for both top and bottom
You need to combine a margin/padding prefix with a direction suffix. For example:
- for a
margin-top
, usemt-*
- for a
padding-bottom
, usepb-*
- for both
margin-left
andmargin-right
, usemx-*
Each of these property-direction
combinations needs to be appended with one of 6 value suffixes
This release also includes the following helpers:
- light and dark color helpers
- light and dark background color helpers
- #2925 Center table cell content vertically with
is-vcentered
- #2955 Fix issue when there's only one
is-toggle
tag
- Fix #2885 -> Revert
$input-color: $text-strong
- #2709 Add light colors to the
notification
element - #2740 Fixes #2739 -> Add variables size for layout
hero
- Fix #2741 -> Create
bulmaRgba()
function to supportinherit
value - #2756 Add
$button-text-decoration
variable
- #2664 Fixes #2671 -> Add
$panel-colors
variable
Controls and buttons are now 2.5em
high. You can revert this resizing by setting these previous values:
$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
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 colorfindDarkColor()
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.
The panel
component is now available in all the different colors.
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:
$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.
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
occurrences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:
$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.
$green: hsl(141, 53%, 53%)
$cyan: hsl(204, 71%, 53%)
$red: hsl(348, 86%, 61%)
-
$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
$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
- Fix #2647 -> Missing meta tags in snippet
- Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
- Fix #2060 ->
height: auto
on HTMLaudio
element breaks height of element - Fix #706 -> Derive
-invert
variables usingfindColorInvert()
- #1608 Fix #1552 ->
.container.is-fluid
margins
- #2563
.image
has a new.is-fullwidth
modifier
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 before.
You can now specify a different font-family
for the .title
, .subtitle
and .button
by using the variables $title-family
, $subtitle-family
and $button-family
respectively.
Simply set a value when importing Bulma:
$title-family: 'Georgia', serif;
- #2375 Add
.is-relative
helper - #2321 Make
.navbar
focus behave like hover for the navigation - #2290 Fix #1186 -> Reset the offset on columns
- #2231 Add
.has-text-weight-medium
helper - #2224 Add customizable border radius to progress bar
- #2480 Add
$footer-color
variable
- #2396 Update docs with webpack 4 example
- #2381 Make centered buttons have equal margin
- Fix #2297 -> Remove
.container
fixed width values, useflex-grow
- #2478 Move form.sass into its own folder
- #2420 Fix #2414 -> Fix
align
attribute intd/th
being ignored - #2463 Remove duplicate
.has-addons
intag.sass
- #2253 Fix
$gap
variable default value - #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox
- #2175 Proper aligning for
.tabs
within.content
- #2476 Fix #2441 -> Correct active pagination link text color on hero
Fix #1979 -> Correct loading spinner color when a button is:
- outlined and hovered/focused
- outlined, inverted and hovered/focused
$block-spacing
$body-font-size
$small-font-size
$pre-font-size
$pre-padding
$pre-code-font-size
$card-header-padding
$card-content-padding
$card-media-margin
$dropdown-menu-min-width
$dropdown-content-padding-bottom
$dropdown-content-padding-top
$level-item-spacing
$menu-list-line-height
$menu-list-link-padding
$menu-nested-list-margin
$menu-nested-list-padding-left
$menu-label-font-size
$menu-label-letter-spacing
$menu-label-spacing
$pagination-item-font-size
$pagination-item-margin
$pagination-item-padding-left
$pagination-item-padding-right
$panel-margin
$panel-tabs-font-size
$container-offset
$tile-spacing
- #2145 Fix #372 -> New indeterminate progress bars
- #2206 Fix #2046 -> New variables
$table-head-background-color
,$table-body-background-color
and$table-foot-background-color
for the.table
element - #592 -> Give arbitrary elements access to the image/ratio classes
- #1682 Fix #1681 -> Adds disabled styles for
<fieldset disabled>
- #2201 Fix #1875 ->
.buttons
and.tags
group sizing (.are-small
,.are-medium
,.are-large
)
- #1978 Fix #1696 -> Force
box-sizing: border-box
ondetails
element - #2167 Fix #1878 -> New
$footer-padding
variable - #2168 -> New
$input-placeholder-color
and$input-disabled-placeholder-color
variables
- #2157 Fix #1656 -> Allow border radius if only one
.control
in.field
- #2091 Fix #2091 -> Remove CSS rule which causes
.tag.has-addons
to not work correctly - #2186 Fix #1130 -> Prevent
.dropdown
links underlining in.message
component - Fix #2154 -> Move
.hero.is-fullheight-with-navbar
tonavbar.sass
file
.control.has-icon
deprecated in favor of.control.has-icons
- #1884 New
$navbar-burger-color
variable - #1679 Add breakpoint based column gaps
- #1905 Fix
modal
for IE11 #1902 - #1919 New
is-arrowless
class for navbar items - #1949 New
is-fullheight-with-navbar
class for heros - #1764 New
.is-sr-only
helper - #2109 Add and use
$navbar-breakpoint
variable - New variables
$control-height
,$control-line-height
,$pagination-min-width
,$input-height
- #1720 Add list element feature
- #2123 Add
.content ol
types:.is-lower-roman
,.is-upper-roman
,.is-lower-alpha
,.is-upper-alpha
, and support for thetype=
HTML attribute
- #1964 Allow
.notification
to have a.dropdown-item
- #1999 Change
$border
to$grey-lighter
in mixins - #2085
.media-content
will allow scrolling horizontally if the content is too wide - #1744 Fix #1710 by using
$table-striped-row-even-hover-background-color
only for even rows - #2074 Allow
<button>
as.dropdown-item
- #1749 Fix icons floating out of input area
- #1993 Fixes #1992 Prevent disabled form elements hover state from overlapping, if control has add-ons elements
- #1909 Fix Modal card in IE11
- #1908 Fix IE11 when textarea doesn't listen to
size=""
- Fix #1991 The last button in list of full-width buttons has longer width
- #1982 Fix navbar-burger color when color modifier is used
- #1819 Fix #1137 error message for required file
- Fix #1904 and #1969: hide native file input in Chrome
- #2059 Remove unnecessary right margin from last level-item (level.is-mobile)
- #1789 Add all shades to
has-background-*
helpers
- #1796 #1806 Remove navbar
box-shadow
by default
- New variables
$widescreen-enabled
and$fullhd-enabled
: you can set them tofalse
to disable each breakpoint - New variables
$control-border-width
and$button-border-width
- 🎉 #1624 Add some common photography aspect ratios and portrait ratios
- 🎉 #1747 New
$custom-colors
and$custom-shades
variable for adding your own colors and shades to Bulma's$colors
and$shades
maps respectively
- #1619 Add
$card-header-background-color
,$card-content-background-color
and$card-footer-background-color
to allow different background customization for card elements - #1669 Add
.is-expanded
modifier to.buttons.has-addons
- #1628 Add
.has-background
helpers for block background colors, like.has-text
- #1767 Added minified bundle with cleancss
- #1778 Fix
is-text-right
precedence overis-text-left-mobile
- #1571 Fix position of delete button on
.tag
- #1549 Implementing a simple version of the native sass percentage function
- #1707 Disable table hover in
.content
by default - #1428 Fix
media-content
overflow
File
sass/utilities/initial-variables.sass
|
||
---|---|---|
Variable | From | To |
$gap
|
32px
|
64px
|
$radius
|
3px
|
4px
|
$radius-large
|
5px
|
6px
|
File
sass/base/generic.sass
|
||
---|---|---|
Variable | From | To |
$hr-background-color
|
$border
|
$background
|
$hr-height
|
1px
|
2px
|
File
sass/elements/content.sass
|
||
---|---|---|
Variable | From | To |
$content-heading-weight
|
$weight-normal
|
$weight-semibold
|
File
sass/components/message.sass
|
||
---|---|---|
Variable | From | To |
$message-header-padding
|
0.5em 0.75em
|
0.75em 1em
|
$message-body-padding
|
1em 1.25em
|
1.25em 1.5em
|
File
sass/components/navbar.sass
|
||
---|---|---|
Variable | From | To |
$navbar-item-hover-background-color
|
$background
|
$white-bis
|
$navbar-dropdown-border-top
|
1px solid $border
|
2px solid $border
|
$navbar-divider-background-color
|
$border
|
$background
|
File
sass/layout/footer.sass
|
||
---|---|---|
Variable | From | To |
$footer-background-color
|
$background
|
$white-bis
|
File
sass/components/breadcrumb.sass
|
|
---|---|
Name | Value |
$breadcrumb-item-padding-vertical
|
0
|
$breadcrumb-item-padding-horizontal
|
0.75em
|
File
sass/components/message.sass
|
|
---|---|
Name | Value |
$message-body-border-color
|
$border
|
$message-body-border-width
|
0 0 0 4px
|
$message-header-weight
|
$weight-bold
|
$message-header-body-border-width
|
0
|
File
sass/components/navbar.sass
|
|
---|---|
Name | Value |
$navbar-box-shadow-size
|
0 2px 0 0
|
$navbar-box-shadow-color
|
$background
|
$navbar-padding-vertical
|
1rem
|
$navbar-padding-horizontal
|
2rem
|
$navbar-z
|
30
|
File
sass/elements/title.sass
|
|
---|---|
Name | Value |
$title-line-height
|
1.125
|
$subtitle-line-height
|
1.25
|
$subtitle-negative-margin
|
-1.25rem
|
File | Removed | Replaced with |
---|---|---|
sass/components/message.sass
|
$message-body-border
|
$message-body-border-color
$message-body-border-width
|
- 🎉 Rounded buttons, inputs, pagination and toggle tabs
- #1343 Add
sub
andsup
title sizes - #1452 New
.is-italic
helper
- #935 Bug dropdown in
hero
(primary) menu items not visible - #1456 Fix customize documentation
- #1190 Add
$variable-columns
to disable--columnGap
- #1518 Fix spacing of the delete button in notification element
- #1569 Fix missing use of
$pagination-color
variable
- 🎉 List of buttons
- 🎉 #1235 Support for five column grid:
.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths
- 🎉 #1287 New
.is-invisible
helper - 🎉 #1255 New
.is-expanded
modifier fornavbar-item
- 🎉 #1384 New
.is-centered
and.is-right
modifiers fortags
- 🎉 #1383 New
.is-empty
modifier forfile
- 🎉 #1380 Allow
.is-selected
class on<td>
and<th>
tags
- #987 Improve
tag > icon
spacing - Improve
hamburger
alignment
- #1358 Fix indentation bug for .is-one-fifth
- #1356 SASS 3.5+ variable parsing compatibility allows only #{}
- #1342 Remove black line from progress bar in IE
- #1334 Fix progress bar colors in IE
- #1313 Fix Table
is-selected
andis-hoverable
styling issue - #963 Fix Delete Button Bug in iOS Safari
- The new
$link
color is part of the$colors
map. As a result,.button.is-link
is a colored button now. Use.button.is-text
if you want the underlined button. - The deprecated
variables.sass
file has been removed. - The deprecated
nav.sass
file has been removed.
- #1236
.table
hover effect is opt-in, by using the.is-hoverable
modifier class - #1254
.dropdown
now supports.is-up
modifier
- #1257 Include placeholder mixin in
=input
The $link
color is used instead of $primary
in the following components:
Variable | Old value | New value |
---|---|---|
$dropdown-item-active-color |
$primary-invert |
$link-invert |
$dropdown-item-active-background-color |
$primary |
$link |
$navbar-tab-hover-border-bottom-color |
$primary |
$link |
$navbar-tab-active-color |
$primary |
$link |
$navbar-tab-active-border-bottom-color |
$primary |
$link |
$navbar-dropdown-item-active-color |
$primary |
$link |
$tabs-link-active-border-bottom-color |
$primary |
$link |
$tabs-link-active-color |
$primary |
$link |
$tabs-toggle-link-active-background-color |
$primary |
$link |
$tabs-toggle-link-active-border-color |
$primary |
$link |
$tabs-toggle-link-active-color |
$primary-invert |
$link-invert |
- #708 Import variables in mixins
- #1101
.card-header-title
can be centered with.is-centered
- #1189
.input
readonly and.is-static
- #1189
.textarea
readonly
- #1177 Fix
.message .tag
combination - #1167 Fix
pre code
- #1207 Fix
.breadcrumb
alignment
- #842
navbar
color modifiers - #331 Support for third party icons
- Added
$button-focus-box-shadow-size
and$button-focus-box-shadow-color
for customization - Added
$input-focus-box-shadow-size
and$input-focus-box-shadow-color
for customization - Navbar tabs
- #1168 Undefined variable:
$navbar-item
- #930 Remove
vertical-align: top
for icons - #735 Font awesome custom
font-size
- #395 Font awesome stacked icons
- #1152 Level-items not centered horizontally on mobile
- #1147 Add
text-size-adjust: 100%
tohtml
- #1106
pagination
docs - #1063
$family-primary
customization
- 🎉 #280 File upload element
$container-offset
variable to determine the.container
breakpoints- #1001 Text case helpers
- #1030 Add
!important
to non responsive display helpers - #1020 Customizing
.navbar-item img
max height - #998
.navbar-dropdown
with right alignment - #877
.pagination
isn't using$pagination-background
- #989
navbar-brand
overflowing on mobile - #975 Variable
$table-head-color
isn't used - #964 Tabs sass file throwing error with
!important
- #949
.is-size-7
helper is missing
- 🎉 List of tags
- New variable naming system:
component
-subcomponent
-state
-property
- Improved customization thanks to new set of variables
- #934 New
.is-shadowless
helper
Variable name changes (mostly appending -color
):
From | To |
---|---|
$card | $card-color |
$card-background | $card-background-color |
$card-header | $card-header-color |
$dropdown-item | $dropdown-item-color |
$dropdown-content-background | $dropdown-content-background-color |
$dropdown-item-hover-background | $dropdown-item-hover-background-color |
$dropdown-item-hover | $dropdown-item-hover-color |
$dropdown-item-active-background | $dropdown-item-active-background-color |
$dropdown-item-active | $dropdown-item-active-color |
$dropdown-divider-background | $dropdown-divider-background-color |
$menu-item | $menu-item-color |
$menu-item-hover | $menu-item-hover-color |
$menu-item-hover-background | $menu-item-hover-background-color |
$menu-item-active | $menu-item-active-color |
$menu-item-active-background | $menu-item-active-background-color |
$menu-label | $menu-label-color |
$message-background | $message-background-color |
$message-header-background | $message-header-background-color |
$navbar-background | $navbar-background-color |
$navbar-item | $navbar-item-color |
$navbar-item-hover | $navbar-item-hover-color |
$navbar-item-hover-background | $navbar-item-hover-background-color |
$navbar-item-active | $navbar-item-active-color |
$navbar-item-active-background | $navbar-item-active-background-color |
$navbar-tab-hover-background | $navbar-tab-hover-background-color |
$navbar-tab-hover-border-bottom | $navbar-tab-hover-border-bottom-color |
$navbar-tab-active | $navbar-tab-active-color |
$navbar-tab-active-background | $navbar-tab-active-background-color |
$navbar-divider-background | $navbar-divider-background-color |
$navbar-dropdown-item-hover | $navbar-dropdown-item-hover-color |
$navbar-dropdown-item-hover-background | $navbar-dropdown-item-hover-background-color |
$navbar-dropdown-item-active | $navbar-dropdown-item-active-color |
$navbar-dropdown-item-active-background | $navbar-dropdown-item-active-background-color |
$pagination | $pagination-color |
$pagination-hover | $pagination-hover-color |
$pagination-hover-border | $pagination-hover-border-color |
$pagination-focus | $pagination-focus-color |
$pagination-focus-border | $pagination-focus-border-color |
$pagination-active | $pagination-active-color |
$pagination-active-border | $pagination-active-border-color |
$pagination-disabled | $pagination-disabled-color |
$pagination-disabled-background | $pagination-disabled-background-color |
$pagination-disabled-border | $pagination-disabled-border-color |
$pagination-current | $pagination-current-color |
$pagination-current-background | $pagination-current-background-color |
$pagination-current-border | $pagination-current-border-color |
$pagination-ellipsis | $pagination-ellipsis-color |
$box | $box-color |
$box-background | $box-background-color |
$button | $button-color |
$button-background | $button-background-color |
$button-border | $button-border-color |
$button-link | $button-link-color |
$button-link-hover-background | $button-link-hover-background-color |
$button-link-hover | $button-link-hover-color |
$button-disabled-background | $button-disabled-background-color |
$button-disabled-border | $button-disabled-border-color |
$button-static | $button-static-color |
$button-static-background | $button-static-background-color |
$button-static-border | $button-static-border-color |
$input | $input-color |
$input-background | $input-background-color |
$input-border | $input-border-color |
$input-hover | $input-hover-color |
$input-hover-border | $input-hover-border-color |
$input-focus | $input-focus-color |
$input-focus-border | $input-focus-border-color |
$input-disabled | $input-disabled-color |
$input-disabled-background | $input-disabled-background-color |
$input-disabled-border | $input-disabled-border-color |
$input-icon | $input-icon-color |
$input-icon-active | $input-icon-active-color |
$title | $title-color |
$subtitle | $subtitle-color |
$card-footer-border | $card-footer-border-top |
$menu-list-border | $menu-list-border-left |
$navbar-tab-hover-border | $navbar-tab-hover-border-bottom-color |
$navbar-tab-active-border | $navbar-tab-active-border-bottom |
$table-border | $table-cell-border |
$table-row-even-background | $table-striped-row-even-background-color |
$table-row-even-hover-background | $table-striped-row-even-hover-background-color |
- Starter template
- Colors page
- Typography helpers
- Meta information for all elements and components
- Variables information for most elements and components
- #909
.dropdown
wrapping - #938
.is-fullwidth
removed from docs - #900 Variable
.navbar-item
for hover+active background/color - #902
.navbar-item
color overrides
- New dropdown button!
- The breakpoints and
.container
gap can be customized with the new$gap
variable - The
.container
has 2 new modifiers:.is-widescreen
and.is-fullhd
- Fix #26
.textarea
element will honors[rows]
attribute - Fix #887
body
scrollbar - Fix #715
.help
class behavior in horizontal formis-grouped
field - Fix #842 Adding modifiers in
navbar
- Fix #841
.container
as direct child of.navbar
moves.navbar-menu
below.navbar-brand
- Fix #861 Box in hero as text and background white
- Fix #852 charset and version number
- Fix #856 JavaScript
.nav-burger
example - Fix #821 Notification strong color
- New navbar with dropdown support
- Add new feature: Breadcrumb component (#632) @vinialbano
- Add Bloomer to README.md (#787) @AlgusDark
- Add responsive is-*-touch tags for .column sizes (#780) @tom-rb
- Adding 'is-hidden' to helpers in docs (#798) @aheuermann
- Add figure/figcaption as content element (#807) @werthen
- Add and support to content (#808) @werthen
- Add re-bulma and react-bulma (#809) @kulakowka
- Add is-halfheight to hero (#783) @felipeas
- Added a related project with Golang backend (#784) @Caiyeon
- Fix #827 Breadcrumb and Navbar in docs
- Fix #824 Code examples broken because of
text-align: center
- Fix #820 Loading spinner resizes with controls
- Fix #819 Remove
height: auto
from media elements - Fix #790 Documentation typo
- Fix #814 Make use of +fullhd mixin for columns @Saboteur777
- Fix #781 Add min/max height/width to delete class size modifiers @ZackWard
- Fix #391 Section docs update
- Fix #728 selected row on striped table
- Fix #747 remove flex-shrink for is-expanded
- Fix #702 add icons support for select dropdown
- Fix #712 delete button as flexbox item
- Fix #759 static button
- Fix #568 max-width container
- Fix #589 notification delete
- Fix #272 nav-right without nav-menu
- Fix #616 hero and notification buttons
- Fix #607 has-addons z-index
- Feature #586 select color modifiers
- Fix #537 -ms-expand
- Fix #578 better
+center
mixin - Fix #565
dl
styles - Fix #389
pre
margin-bottom
- Fix #484 icon alignment
- Fix #506 bold nav menu
- Fix #581 nav container
- Fix #512 nav grouped buttons
- Fix #605 container example
- Fix #458 select expanded
- Fix #403 separate animations
- Fix #637 customize Bulma
- Fix #584 loading select
- Fix #571 control height
- Fix #634 is-grouped control
- Fix #676 checkbox/radio wrapping
- Feature #479 has-icons placement
- Fix #442 selected table row
- Fix #187 add customize page
- Fix #449 columns negative horizontal margin
- Fix #399 pagination wrapping
- Fix #227 color keys as strings
-
Default font-size is 16px
-
New
.field
element ;.control
repurposed -
New
.pagination
sizes -
New
$fullhd
breakpoint (1344px) -
Remove monospace named fonts
-
Remove icon spacing logic
-
Split icon container dimensions and icon size
-
Fix delete button by using pixels instead of (r)em
-
Fix level on mobile
-
Add new
.is-spaced
modifier for titles and subtitles -
Fix #487
-
Fix #489
-
Fix #502
-
Fix #514
-
Fix #524
-
Fix #536
- Fix #478
- Fix #441
- Fix #443
-
Use
rem
andem
(!) -
Fix Font Awesome icons in buttons (!)
-
Fix message colors (!)
-
Use
{% capture %}
to ensure same display as code snippet (!) -
Move variables to their own file
-
Remove small tag
-
Add
:focus
state -
Fix table
-
Remove table
.is-icon
and.is-link
-
Add
.content
table -
Fix inputs with icons
-
Input icons require the
.icon
container -
Deprecate
.media-number
-
Fix
.level-item
height -
Fix
.menu
spacing -
Deprecate
.menu-nav
-
Add invert outlined buttons
-
Fix
.nav
-
Fix
.pagination
-
Fix
.tabs
-
Fix
.panel
-
Fix
.delete
-
Add mixins documentation
-
Add functions documentation
- Fix: remove multiple imports
- Fix: container flex
- Fix: nav-item flex
- Fix: media-number flex
- Fix: new brand colors
- Added: new branding
- Added: modularity
- Added: grid folder
- Added: .github folder
- Remove
flex: 1
shorthand
- Fix #227
- Fix #232
- Fix #242
- Fix #243
- Fix #228
- Fix #245
- Fix #246
- BREAKING:
.control.is-grouped
now uses.control
elements as direct children - Fix #220
- Fix #214
- Fix #210
- Fix #206
- Fix #122
- Fix: #217
- Fix: #213
- Fix: #209
- Fix: #205
- Fix: #204
- Fix: #81
- Added:
.modal-card
- Added: display responsive utilities
- Added:
.nav-center
- Added:
.tabs ul
left center right - Changed:
.navbar
renamed to.level
- Changed:
.header
renamed to.nav
- Deprecated:
.header
- Deprecated:
.navbar
- Fixed:
.hero
layout
- Added:
utilities/controls.sass
andelements/form.sass
- Added: new responsive classes
- Added: white/black and light/dark colors
- Changed:
.tabs
need.icon
now - Changed: cdnjs link doesn't include version
is-mobile
for the navbar
- removed border between sections. Use
<hr class="is-marginless">
now
- restructured files
- added back
inline-flex
for controls and tags
- test tiles
bulma
folder renamed tosass
to avoid the redundantbulma/bulma
pathvariables.sass
moved to/utilities
- almost everything is singular now
- elements only have one class
- components have at least one sub-class
.content
moved to elements.table
moved to elements.message
moved to components.table-icon
,.table-link
,.table-narrow
are now called.is-icon
,.is-link
,.is-narrow
- all variables are now
!default
so you can set your custom variables before importing Bulma
- links in hero subtitle
.column.is-narrow
to make a columnflex: none
.has-icon
support for different.input
sizes
.tile
.is-third
renamed to.is-one-third
.is-quarter
renamed to.is-one-quarter
.is-two-thirds
.is-three-quarters
.delete
in.tag
has no red
.is-text-*
renamed to.has-text-*
- removed
.is-fullwidth
helper
- small tag:
.tag.is-small
- 12th column classes
*-full
column classes$family-code
- disabled input with element
.table
last row withth
.card
color in.hero
.columns.is-gapless
- removed
box-shadow
from.tag
- custom checkboxes and radio buttons
.tag
usesdisplay: inline-flex
now
- pagination:
.pagination
- horizontal forms:
.control.is-horizontal
- help text for form controls:
.help
- progress bars:
.progress
.button
usesdisplay: inline-flex
now.button
needs an.icon
now.control.is-grouped
renamed to.control.has-addons
.control.is-inline
renamed to.control.is-grouped
- helpers
.is-inline
and.is-block