Bulma Changelog

Upcoming release

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.

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, use flex-grow
#2478 Move form.sass into its own folder

Bug fixes

#2420 Fix #2414 -> Fix align attribute in td/th being ignored
#2463 Remove duplicate .has-addons in tag.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

0.7.3

New features

#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)

Improvements

#1978 Fix #1696 -> Force box-sizing: border-box on details element
#2167 Fix #1878 -> New $footer-padding variable
#2168 -> New $input-placeholder-color and $input-disabled-placeholder-color variables

Bug fixes

#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 to navbar.sass file

Deprecation

.control.has-icon deprecated in favor of .control.has-icons

0.7.2

New features

#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 the type= HTML attribute

Improvements

#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

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-shadow by default

0.7.0

New features

New variables $widescreen-enabled and $fullhd-enabled: you can set them to false 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

Improvements

#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

Bug fixes

#1778 Fix is-text-right precedence over is-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

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 sub and sup title sizes
#1452 New .is-italic helper

Bug fixes

#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

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-invisible helper
🎉 #1255 New .is-expanded modifier for navbar-item
🎉 #1384 New .is-centered and .is-right modifiers for tags
🎉 #1383 New .is-empty modifier for file
🎉 #1380 Allow .is-selected class on <td> and <th> tags

Improvements

#987 Improve tag > icon spacing
Improve hamburger alignment

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-selected and is-hoverable styling issue
#963 Fix Delete Button Bug in iOS Safari

0.6.0

Breaking changes

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.

New features

#1236 .table hover effect is opt-in, by using the .is-hoverable modifier class
#1254 .dropdown now supports .is-up modifier

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-title can be centered with .is-centered
#1189 .input readonly and .is-static
#1189 .textarea readonly

Issues closed

#1177 Fix .message .tag combination
#1167 Fix pre code
#1207 Fix .breadcrumb alignment

0.5.2

New features

#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

Issues closed

#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% to html
#1106 pagination docs
#1063 $family-primary customization

0.5.1

New features

🎉 #280 File upload element
$container-offset variable to determine the .container breakpoints
#1001 Text case helpers

Issues closed

#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

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-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`

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 .dropdown wrapping
#938 .is-fullwidth removed from docs
#900 Variable .navbar-item for hover+active background/color
#902 .navbar-item color overrides

0.4.4

New features

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

Issues closed

Fix #26 .textarea element will honors [rows] attribute
Fix #887 body scrollbar
Fix #715 .help class behaviour in horizontal form is-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

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: 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

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 +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

0.4.0

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

0.3.2

Fix #478

0.3.1

Fix #441
Fix #443

0.3.0

Use rem and em (!)
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

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: 1 shorthand

0.1.0

Fix #227
Fix #232
Fix #242
Fix #243
Fix #228
Fix #245
Fix #246

0.0.28

BREAKING: .control.is-grouped now uses .control elements 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 ul left center right
Changed: .navbar renamed to .level
Changed: .header renamed to .nav
Deprecated: .header
Deprecated: .navbar
Fixed: .hero layout

0.0.25

Added: utilities/controls.sass and elements/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

0.0.24

Added

is-mobile for the navbar

Removed

removed border between sections. Use <hr class="is-marginless"> now

Updated

restructured files
added back inline-flex for controls and tags

Removed

test tiles

0.0.23

BREAKING

bulma folder renamed to sass to avoid the redundant bulma/bulma path
variables.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

Added

all variables are now !default so you can set your custom variables before importing Bulma

0.0.22

Fixed

links in hero subtitle

0.0.21

Added

.column.is-narrow to make a column flex: none

0.0.20

Added

.has-icon support for different .input sizes

0.0.19

NEW!!!

.tile

BREAKING

.is-third renamed to .is-one-third
.is-quarter renamed to .is-one-quarter

Added

.is-two-thirds
.is-three-quarters

Changed

.delete in .tag has no red

0.0.18

BREAKING

.is-text-* renamed to .has-text-*
removed .is-fullwidth helper

Added

small tag: .tag.is-small
12th column classes
*-full column classes
$family-code

Fixed

disabled input with element
.table last row with th
.card color in .hero
.columns.is-gapless

Removed

removed box-shadow from .tag
custom checkboxes and radio buttons

Updated

.tag uses display: inline-flex now

0.0.17

Added

pagination: .pagination
horizontal forms: .control.is-horizontal
help text for form controls: .help
progress bars: .progress

Updated

.button uses display: inline-flex now
.button needs an .icon now
.control.is-grouped renamed to .control.has-addons
.control.is-inline renamed to .control.is-grouped

Removed

helpers .is-inline and .is-block

CHANGELOG.md 35 KB Historie Surový

Bulma Changelog

Upcoming release

Deprecation warning

New features

Support for overriding the font-family

Improvements

Bug fixes

New variables

Initial variables

Base

Components

Elements

Grid

0.7.3

New features

Improvements

Bug fixes

Deprecation

0.7.2

New features

Improvements

Bug fixes

0.7.1

Improvements

Bug fixes

0.7.0

New features

Improvements

Bug fixes

Variable changes

Updated default values

New variables

Removed variables

0.6.2

New features

Improvements

Bug fixes

0.6.1

New features

Improvements

Bug fixes

0.6.0

Breaking changes

New features

Improvements

Issues closed

0.5.3

New features

Issues closed

0.5.2

New features

Issues closed

0.5.1

New features

Issues closed

0.5.0

New features

Improved documentation

Issues closed

0.4.4

New features

Issues closed

0.4.3

New features

Issues closed

0.4.2

0.4.1

0.4.0

0.3.2

0.3.1

0.3.0

0.2.2

0.2.1

0.2.0

0.1.1

0.1.0

0.0.28

0.0.27

0.0.26

CHANGELOG.md 35 KB

Historie Surový

Support for overriding the `font-family`