Release notes of bulma

Modern CSS framework based on Flexbox

https://bulma.io

jgthms/bulma

0.7.2
added
  • #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

improved
  • #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

fixed
  • #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
improved
  • #1789 Add all shades to has-background-* helpers

fixed
  • #1796 #1806 Remove navbar box-shadow by default

0.7.0
added
  • 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

changed
  • 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
improved
  • #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

fixed
  • #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

0.6.2
added
  • 🎉 Rounded buttons, inputs, pagination and toggle tabs

improved
  • #1343 Add sub and sup title sizes

  • #1452 New .is-italic helper

fixed
  • #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
added
  • 🎉 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

improved
  • #987 Improve tag > icon spacing

  • Improve hamburger alignment

fixed
  • #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
added
  • #1236 .table hover effect is opt-in, by using the .is-hoverable modifier class

  • #1254 .dropdown now supports .is-up modifier

changed
  • 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.

  • #708 Import variables in mixins

improved
  • #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
0.5.3
added
  • #1101 .card-header-title can be centered with .is-centered

  • #1189 .input readonly and .is-static

  • #1189 .textarea readonly

changed
  • #1177 Fix .message .tag combination

  • #1167 Fix pre code

  • #1207 Fix .breadcrumb alignment

0.5.2
added
  • #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

changed
  • #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
added
  • 🎉 #280 File upload element

  • $container-offset variable to determine the .container breakpoints

  • #1001 Text case helpers

changed
  • #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
added
  • 🎉 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):

    FromTo
    $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
changed
  • 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

0.4.4
added
  • 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

fixed
  • 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
added
  • 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

fixed
  • 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 utilites
  • 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

  • test tiles

changed
  • restructured files

  • added back inline-flex for controls and tags

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

changed
  • 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

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
added
  • .tile

  • .is-two-thirds

  • .is-three-quarters

changed
  • .is-third renamed to .is-one-third

  • .is-quarter renamed to .is-one-quarter

  • .delete in .tag has no red

0.0.18
added
  • small tag: .tag.is-small

  • 12th column classes

  • *-full column classes

  • $family-code

removed
  • removed box-shadow from .tag

  • custom checkboxes and radio buttons

changed
  • .is-text-* renamed to .has-text-*

  • removed .is-fullwidth helper

  • .tag uses display: inline-flex now

fixed
  • disabled input with element

  • .table last row with th

  • .card color in .hero

  • .columns.is-gapless

0.0.17
added
  • pagination: .pagination

  • horizontal forms: .control.is-horizontal

  • help text for form controls: .help

  • progress bars: .progress

removed
  • helpers .is-inline and .is-block

changed
  • .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