Bulma Changelog
0.9.3
New features
- New
is-underlinedclass for underlined text and links - New
autovalue for margin and padding helper classes
Improvements
- New
$section-padding-desktopSass variable - New
$hero-body-padding-tabletSass variable - New
$shadowSass variable (used for.box,.card,.dropdownand.panel) - Add
is-normalsize modifiers to.fileand.content - New
%resetplaceholder
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-ghostbutton that behaves / looks like a regular link - New
icon-textcomponent, to combine an icon with text on its side
Bug fixes
- #3005 Fix
columnoffsets 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: unsetfor narrow columns - #3208 Fix #3163 Do not override is-rounded with button-small
- #3216 Removed duplicate
mixinsimports, created a singleextendsfile - #3216 Removed all references to the
.sassfile extension have been removed, since they’re unnecessary when there’s no ambiguity between a.sassfile or a.scssfile
Improvements
- Fix #3012 Add
$media-*variables, set to!default - Fix #2797 Import dependencies individually for each component
- Remove list style from pagination list
0.9.1
New features
- #3047 Flexbox helpers
- #3085 Add
is-clickablehelper - #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-colorsand$hero-colors
Improvements
- #2630 Fixes #2598 -> Add
$card-radiusvariable - Add
$card-overflowvariable - #2540 Fixes #2539 -> Fix indeterminate progress styling in IE11
- #3057 Make the default text color of
$codelistings more accessible - #3088 Adds not allowed cursor to missing inputs
- #3101 Add
$modal-breakpointvariable for modal breakpoint - #3107 Add
optgrouptogeneric.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 officially 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:
-
*tfor top -
*rfor right -
*bfor bottom -
*lfor left -
*xhorizontally for both left and right -
*yvertically 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-leftandmargin-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-toggletag
0.8.2
Bug fixes
- Fix #2885 -> Revert
$input-color: $text-strong
0.8.1
Improvements
- #2709 Add light colors to the
notificationelement - #2740 Fixes #2739 -> Add variables size for layout
hero - Fix #2741 -> Create
bulmaRgba()function to supportinheritvalue - #2756 Add
$button-text-decorationvariable
Bug fixes
- #2664 Fixes #2671 -> Add
$panel-colorsvariable
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 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.
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 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.
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: autoon HTMLaudioelement breaks height of element - Fix #706 -> Derive
-invertvariables usingfindColorInvert() - #1608 Fix #1552 ->
.container.is-fluidmargins
New features
- #2563
.imagehas a new.is-fullwidthmodifier
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-relativehelper - #2321 Make
.navbarfocus behave like hover for the navigation - #2290 Fix #1186 -> Reset the offset on columns
- #2231 Add
.has-text-weight-mediumhelper - #2224 Add customizable border radius to progress bar
- #2480 Add
$footer-colorvariable
Improvements
- #2396 Update docs with webpack 4 example
- #2381 Make centered buttons have equal margin
- Fix #2297 -> Remove
.containerfixed width values, useflex-grow - #2478 Move form.sass into its own folder
Bug fixes
- #2420 Fix #2414 -> Fix
alignattribute intd/thbeing ignored - #2463 Remove duplicate
.has-addonsintag.sass - #2253 Fix
$gapvariable default value - #2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox
- #2175 Proper aligning for
.tabswithin.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
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
0.7.3
New features
- #2145 Fix #372 -> New indeterminate progress bars
- #2206 Fix #2046 -> New variables
$table-head-background-color,$table-body-background-colorand$table-foot-background-colorfor the.tableelement - #592 -> Give arbitrary elements access to the image/ratio classes
- #1682 Fix #1681 -> Adds disabled styles for
<fieldset disabled> - #2201 Fix #1875 ->
.buttonsand.tagsgroup sizing (.are-small,.are-medium,.are-large)
Improvements
- #1978 Fix #1696 -> Force
box-sizing: border-boxondetailselement - #2167 Fix #1878 -> New
$footer-paddingvariable - #2168 -> New
$input-placeholder-colorand$input-disabled-placeholder-colorvariables
Bug fixes
- #2157 Fix #1656 -> Allow border radius if only one
.controlin.field - #2091 Fix #2091 -> Remove CSS rule which causes
.tag.has-addonsto not work correctly - #2186 Fix #1130 -> Prevent
.dropdownlinks underlining in.messagecomponent - Fix #2154 -> Move
.hero.is-fullheight-with-navbartonavbar.sassfile
Deprecation
.control.has-icondeprecated in favor of.control.has-icons
0.7.2
New features
- #1884 New
$navbar-burger-colorvariable - #1679 Add breakpoint based column gaps
- #1905 Fix
modalfor IE11 #1902 - #1919 New
is-arrowlessclass for navbar items - #1949 New
is-fullheight-with-navbarclass for heros - #1764 New
.is-sr-onlyhelper - #2109 Add and use
$navbar-breakpointvariable - New variables
$control-height,$control-line-height,$pagination-min-width,$input-height - #1720 Add list element feature
- #2123 Add
.content oltypes:.is-lower-roman,.is-upper-roman,.is-lower-alpha,.is-upper-alpha, and support for thetype=HTML attribute
Improvements
- #1964 Allow
.notificationto have a.dropdown-item - #1999 Change
$borderto$grey-lighterin mixins - #2085
.media-contentwill allow scrolling horizontally if the content is too wide - #1744 Fix #1710 by using
$table-striped-row-even-hover-background-coloronly for even rows - #2074 Allow
<button>as.dropdown-item
Bug fixes
- #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)
0.7.1
Improvements
- #1789 Add all shades to
has-background-*helpers
Bug fixes
- #1796 #1806 Remove navbar
box-shadowby default
0.7.0
New features
- New variables
$widescreen-enabledand$fullhd-enabled: you can set them tofalseto disable each breakpoint - New variables
$control-border-widthand$button-border-width - 🎉 #1624 Add some common photography aspect ratios and portrait ratios
- 🎉 #1747 New
$custom-colorsand$custom-shadesvariable for adding your own colors and shades to Bulma’s$colorsand$shadesmaps respectively
Improvements
- #1619 Add
$card-header-background-color,$card-content-background-colorand$card-footer-background-colorto allow different background customization for card elements - #1669 Add
.is-expandedmodifier to.buttons.has-addons - #1628 Add
.has-backgroundhelpers for block background colors, like.has-text - #1767 Added minified bundle with cleancss
Bug fixes
- #1778 Fix
is-text-rightprecedence 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
.contentby default - #1428 Fix
media-contentoverflow
Variable changes
Updated default values
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
|
New variables
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
|
Removed variables
| File | Removed | Replaced with |
|---|---|---|
sass/components/message.sass
|
$message-body-border
|
$message-body-border-color
$message-body-border-width
|
0.6.2
New features
- 🎉 Rounded buttons, inputs, pagination and toggle tabs
Improvements
- #1343 Add
subandsuptitle sizes - #1452 New
.is-italichelper
Bug fixes
- #935 Bug dropdown in
hero(primary) menu items not visible - #1456 Fix customize documentation
- #1190 Add
$variable-columnsto disable--columnGap - #1518 Fix spacing of the delete button in notification element
- #1569 Fix missing use of
$pagination-colorvariable
0.6.1
New features
- 🎉 List of buttons
- 🎉 #1235 Support for five column grid:
.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths - 🎉 #1287 New
.is-invisiblehelper - 🎉 #1255 New
.is-expandedmodifier fornavbar-item - 🎉 #1384 New
.is-centeredand.is-rightmodifiers fortags - 🎉 #1383 New
.is-emptymodifier forfile - 🎉 #1380 Allow
.is-selectedclass on<td>and<th>tags
Improvements
- #987 Improve
tag > iconspacing - Improve
hamburgeralignment
Bug fixes
- #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-selectedandis-hoverablestyling issue - #963 Fix Delete Button Bug in iOS Safari
0.6.0
Breaking changes
- The new
$linkcolor is part of the$colorsmap. As a result,.button.is-linkis a colored button now. Use.button.is-textif you want the underlined button. - The deprecated
variables.sassfile has been removed. - The deprecated
nav.sassfile has been removed.
New features
- #1236
.tablehover effect is opt-in, by using the.is-hoverablemodifier class - #1254
.dropdownnow supports.is-upmodifier
Improvements
- #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 |
Issues closed
- #708 Import variables in mixins
0.5.3
New features
- #1101
.card-header-titlecan be centered with.is-centered - #1189
.inputreadonly and.is-static - #1189
.textareareadonly
Issues closed
- #1177 Fix
.message .tagcombination - #1167 Fix
pre code - #1207 Fix
.breadcrumbalignment
0.5.2
New features
- #842
navbarcolor modifiers - #331 Support for third party icons
- Added
$button-focus-box-shadow-sizeand$button-focus-box-shadow-colorfor customization - Added
$input-focus-box-shadow-sizeand$input-focus-box-shadow-colorfor customization - Navbar tabs
Issues closed
- #1168 Undefined variable:
$navbar-item - #930 Remove
vertical-align: topfor 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
paginationdocs - #1063
$family-primarycustomization
0.5.1
New features
- 🎉 #280 File upload element
$container-offsetvariable to determine the.containerbreakpoints- #1001 Text case helpers
Issues closed
- #1030 Add
!importantto non responsive display helpers - #1020 Customizing
.navbar-item imgmax height - #998
.navbar-dropdownwith right alignment - #877
.paginationisn’t using$pagination-background - #989
navbar-brandoverflowing on mobile - #975 Variable
$table-head-colorisn’t used - #964 Tabs sass file throwing error with
!important - #949
.is-size-7helper is missing
0.5.0
New features
- 🎉 List of tags
- New variable naming system:
component-subcomponent-state-property - Improved customization thanks to new set of variables
- #934 New
.is-shadowlesshelper
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 |
Improved documentation
- Starter template
- Colors page
- Typography helpers
- Meta information for all elements and components
- Variables information for most elements and components
Issues closed
- #909
.dropdownwrapping - #938
.is-fullwidthremoved from docs - #900 Variable
.navbar-itemfor hover+active background/color - #902
.navbar-itemcolor overrides
0.4.4
New features
- New dropdown button!
- The breakpoints and
.containergap can be customized with the new$gapvariable - The
.containerhas 2 new modifiers:.is-widescreenand.is-fullhd
Issues closed
- Fix #26
.textareaelement will honors[rows]attribute - Fix #887
bodyscrollbar - Fix #715
.helpclass behavior in horizontal formis-groupedfield - Fix #842 Adding modifiers in
navbar - Fix #841
.containeras direct child of.navbarmoves.navbar-menubelow.navbar-brand - Fix #861 Box in hero as text and background white
- Fix #852 charset and version number
- Fix #856 JavaScript
.nav-burgerexample - Fix #821 Notification strong color
0.4.3
New features
- 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
Issues closed
- 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: autofrom 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
0.4.2
- 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
0.4.1
- 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
+centermixin - Fix #565
dlstyles - Fix #389
premargin-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
0.4.0
- Default font-size is 16px
- New
.fieldelement ;.controlrepurposed - New
.paginationsizes -
New
$fullhdbreakpoint (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-spacedmodifier for titles and subtitles - Fix #487
- Fix #489
- Fix #502
- Fix #514
- Fix #524
- Fix #536
0.3.2
- Fix #478
0.3.1
- Fix #441
- Fix #443
0.3.0
- Use
remandem(!) - Fix Font Awesome icons in buttons (!)
-
Fix message colors (!)
- Move variables to their own file
- Remove small tag
- Add
:focusstate - Fix table
- Remove table
.is-iconand.is-link - Add
.contenttable - Fix inputs with icons
- Input icons require the
.iconcontainer - Deprecate
.media-number - Fix
.level-itemheight - Fix
.menuspacing - Deprecate
.menu-nav - Add invert outlined buttons
- Fix
.nav - Fix
.pagination - Fix
.tabs - Fix
.panel - Fix
.delete - Add mixins documentation
- Add functions documentation
0.2.2
- Fix: remove multiple imports
0.2.1
- Fix: container flex
- Fix: nav-item flex
- Fix: media-number flex
- Fix: new brand colors
0.2.0
- Added: new branding
- Added: modularity
- Added: grid folder
- Added: .github folder
0.1.1
- Remove
flex: 1shorthand
0.1.0
- Fix #227
- Fix #232
- Fix #242
- Fix #243
- Fix #228
- Fix #245
- Fix #246
0.0.28
- BREAKING:
.control.is-groupednow uses.controlelements as direct children - Fix #220
- Fix #214
- Fix #210
- Fix #206
- Fix #122
0.0.27
- Fix: #217
- Fix: #213
- Fix: #209
- Fix: #205
- Fix: #204
- Fix: #81
0.0.26
- Added:
.modal-card - Added: display responsive utilities
- Added:
.nav-center - Added:
.tabs ulleft center right - Changed:
.navbarrenamed to.level - Changed:
.headerrenamed to.nav - Deprecated:
.header - Deprecated:
.navbar - Fixed:
.herolayout
0.0.25
- Added:
utilities/controls.sassandelements/form.sass - Added: new responsive classes
- Added: white/black and light/dark colors
- Changed:
.tabsneed.iconnow - Changed: cdnjs link doesn’t include version
0.0.24
Added
is-mobilefor the navbar
Removed
- removed border between sections. Use
<hr class="is-marginless">now
Updated
- restructured files
- added back
inline-flexfor controls and tags
Removed
- test tiles
0.0.23
BREAKING
bulmafolder renamed tosassto avoid the redundantbulma/bulmapathvariables.sassmoved to/utilities- almost everything is singular now
- elements only have one class
- components have at least one sub-class
.contentmoved to elements.tablemoved to elements.messagemoved to components.table-icon,.table-link,.table-narroware now called.is-icon,.is-link,.is-narrow
Added
- all variables are now
!defaultso you can set your custom variables before importing Bulma
0.0.22
Fixed
- links in hero subtitle
0.0.21
Added
.column.is-narrowto make a columnflex: none
0.0.20
Added
.has-iconsupport for different.inputsizes
0.0.19
NEW!!!
.tile
BREAKING
.is-thirdrenamed to.is-one-third.is-quarterrenamed to.is-one-quarter
Added
.is-two-thirds.is-three-quarters
Changed
.deletein.taghas no red
0.0.18
BREAKING
.is-text-*renamed to.has-text-*- removed
.is-fullwidthhelper
Added
- small tag:
.tag.is-small - 12th column classes
*-fullcolumn classes$family-code
Fixed
- disabled input with element
.tablelast row withth.cardcolor in.hero.columns.is-gapless
Removed
- removed
box-shadowfrom.tag - custom checkboxes and radio buttons
Updated
.tagusesdisplay: inline-flexnow
0.0.17
Added
- pagination:
.pagination - horizontal forms:
.control.is-horizontal - help text for form controls:
.help - progress bars:
.progress
Updated
.buttonusesdisplay: inline-flexnow.buttonneeds an.iconnow.control.is-groupedrenamed to.control.has-addons.control.is-inlinerenamed to.control.is-grouped
Removed
- helpers
.is-inlineand.is-block