Releases: jgthms/bulma
1.0.0
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.
What remains the same
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 [email protected]/css/bulma.min.css
with [email protected]/css/bulma.min.css
and everything will work. Things will look slightly different, but they will still work.
What changes
- 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.
What's new (i.e. did not exist before)
- 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
0.9.4
New features
- 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
Improvements
- 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)
Bugfix
0.9.3
New features
- New
is-underlined
class for underlined text and links - New
auto
value for margin and padding helper classes
Improvements
- 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
Bugfix
- #3362 Fix slash divide
0.9.2
Breaking change
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.
New features
- 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
Bug fixes
- #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
Improvements
0.9.1
New features
- #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
Improvements
- #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
0.9.0
Deprecation warning
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 officialy supported as it was too similar to panel
component. Use that one instead.
RTL support
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.
Spacing helpers
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 direciton 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
Improvements
- #2925 Center table cell content vertically with
is-vcentered
Bug fixes
- #2955 Fix issue when there's only one
is-toggle
tag
0.8.2
0.8.1
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:
$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 colorfindDarkolor()
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:
$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:
$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 HTMLaudio
element breaks height of element - Fix #706 -> Derive
-invert
variables usingfindColorInvert()
- #1608 Fix #1552 ->
.container.is-fluid
margins
New features
- #2563
.image
has a new.is-fullwidth
modifier
0.7.5
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 before. 😃
New features
Support for overriding the 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;
- #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
Improvements
- #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
Bug fixes
- #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 colour on hero
Fix #1979 -> Correct loading spinner color when a button is:
- outlined and hovered/focused
- outlined, inverted and hovered/focused
New variables
Initial variables
$block-spacing
Base
$body-font-size
$small-font-size
$pre-font-size
$pre-padding
$pre-code-font-size
Components
$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
Elements
$container-offset
Grid
$tile-spacing