Modern CSS framework based on Flexbox
Same as 0.7.3
but with the CSS files attached.
$table-head-background-color
, $table-body-background-color
and $table-foot-background-color
for the .table
element<fieldset disabled>
.buttons
and .tags
group sizing (.are-small
, .are-medium
, .are-large
)box-sizing: border-box
on details
element$footer-padding
variable$input-placeholder-color
and $input-disabled-placeholder-color
variables.control
in .field
.tag.has-addons
to not work correctly.dropdown
links underlining in .message
component.hero.is-fullheight-with-navbar
to navbar.sass
file.control.has-icon
deprecated in favor of .control.has-icons
$navbar-burger-color
variablemodal
for IE11 #1902is-arrowless
class for navbar itemsis-fullheight-with-navbar
class for heros.is-sr-only
helper$navbar-breakpoint
variable$control-height
, $control-line-height
, $pagination-min-width
, $input-height
.content ol
types: .is-lower-roman
, .is-upper-roman
, .is-lower-alpha
, .is-upper-alpha
, and support for the type=
HTML attribute.notification
to have a .dropdown-item
$border
to $grey-lighter
in mixins.media-content
will allow scrolling horizontally if the content is too wide$table-striped-row-even-hover-background-color
only for even rows<button>
as .dropdown-item
size=""
$widescreen-enabled
and $fullhd-enabled
: you can set them to false
to disable each breakpoint$control-border-width
and $button-border-width
$custom-colors
and $custom-shades
variable for adding your own colors and shades to Bulma's $colors
and $shades
maps respectively.is-expanded
modifier to .buttons.has-addons
.has-background
helpers for block background colors, like .has-text
is-text-right
precedence over is-text-left-mobile
.tag
.content
by defaultmedia-content
overflow
File
sass/utilities/initial-variables.sass
|
||
---|---|---|
Variable | From | To |
File
sass/base/generic.sass
|
||
---|---|---|
Variable | From | To |
File
sass/elements/content.sass
|
||
---|---|---|
Variable | From | To |
File
sass/components/message.sass
|
||
---|---|---|
Variable | From | To |
File
sass/components/navbar.sass
|
||
---|---|---|
Variable | From | To |
File
sass/layout/footer.sass
|
||
---|---|---|
Variable | From | To |
File
sass/components/breadcrumb.sass
|
|
---|---|
Name | Value |
File
sass/components/message.sass
|
|
---|---|
Name | Value |
File
sass/components/navbar.sass
|
|
---|---|
Name | Value |
File
sass/elements/title.sass
|
|
---|---|
Name | Value |
File | Removed | Replaced with |
---|
sub
and sup
title sizes.is-italic
helperhero
(primary) menu items not visible$variable-columns
to disable --columnGap
$pagination-color
variable.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths
.is-invisible
helper.is-expanded
modifier for navbar-item
.is-centered
and .is-right
modifiers for tags
.is-empty
modifier for file
.is-selected
class on <td>
and <th>
tagstag > icon
spacinghamburger
alignmentis-selected
and is-hoverable
styling issue$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.variables.sass
file has been removed.nav.sass
file has been removed..table
hover effect is opt-in, by using the .is-hoverable
modifier class.dropdown
now supports .is-up
modifier=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 |