bulma
Advanced tools
Changelog
0.9.4
@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 queryChangelog
0.9.3
is-underlined
class for underlined text and linksauto
value for margin and padding helper classes$section-padding-desktop
Sass variable$hero-body-padding-tablet
Sass variable$shadow
Sass variable (used for .box
, .card
, .dropdown
and .panel
)is-normal
size modifiers to .file
and .content
%reset
placeholderChangelog
0.9.2
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.
is-ghost
button that behaves / looks like a regular linkicon-text
component, to combine an icon with text on its sidecolumn
offsets in RTLwidth: unset
for narrow columnsmixins
imports, created a single extends
file.sass
file extension have been removed, since they're unnecessary when there's no ambiguity between a .sass
file or a .scss
file$media-*
variables, set to !default
Changelog
0.9.1
is-clickable
helper$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
$card-radius
variable$card-overflow
variable$code
listings more accessible$modal-breakpoint
variable for modal breakpointoptgroup
to generic.sass
Changelog
0.9.0
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/
<p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p> <ul> <li> <code>*t</code> for <strong>top</strong> </li> <li> <code>*r</code> for <strong>right</strong> </li> <li> <code>*b</code> for <strong>bottom</strong> </li> <li> <code>*l</code> for <strong>left</strong> </li> <li> <code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong> </li> <li> <code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong> </li> </ul> <p> You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example: </p> <ul> <li>for a <code>margin-top</code>, use <code>mt-*</code></li> <li>for a <code>padding-bottom</code>, use <code>pb-*</code></li> <li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li> </ul> <p> Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong> </p>This release also includes the following helpers:
is-vcentered
is-toggle
tagChangelog
0.8.1
notification
elementhero
bulmaRgba()
function to support inherit
value$button-text-decoration
variable$panel-colors
variableChangelog
0.8.0
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 colorThe 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
height: auto
on HTML audio
element breaks height of element-invert
variables using findColorInvert()
.container.is-fluid
margins.image
has a new .is-fullwidth
modifierChangelog
0.7.5
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.
font-family
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;
.is-relative
helper.navbar
focus behave like hover for the navigation.has-text-weight-medium
helper$footer-color
variable.container
fixed width values, use flex-grow
align
attribute in td/th
being ignored.has-addons
in tag.sass
$gap
variable default value.tabs
within .content
Fix #1979 -> Correct loading spinner color when a button is:
$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