Bulma - Responsiveness and Colors



Description

Responsive design specifies that website should look good from widescreen monitors to mobile phones. Bulma is a mobile friendly development, which can be combined with large, small, and medium devices. Therefore, it is known as mobile-first framework.

By default, Bulma specifies vertical reading on mobile and includes the below points −

  • The columns will arrange in a vertical format.

  • The children of the level component will be arranged vertically.

  • The nav menu will not be visible.

Breakpoints

Bulma contains five breakpoints −

S.No. Device Breakpoint
1 mobile up to 768px
2 tablet starts from 769px
3 desktop starts from 1024px
4 widescreen starts from 1216px
5 fullhd starts from 1408px

Bulma contains 9 responsive mixins −

S.No. Mixin Breakpoint
1 =mobile up to 768px
2 =tablet from 769px
3 =tablet-only from 769px to 1023px
4 =touch up to 1023px
5 =desktop from 1024px
6 =desktop-only from 1024px to 1215px
7 =widescreen from 1216px
8 =widescreen-only from 1216px to 1407px
9 =fullhd from 1408px

You can disable $widescreen and $fullhd breakpoints by setting them to false value.

//Disabling the widescreen breakpoint
$widescreen-enabled: false

//Disabling the fullhd breakpoint
$fullhd-enabled: false

Colors

Bulma elements and components contain different types of color variants with syntax .is-$color(for instance: is-info, is-success etc).

The below table shows different types of colors and their inverted values −

S.No. Color Variable Value Computed value Invert value Computed invert value
1 White $white $white hsl(0, 0%, 100%) $black hsl(0, 0%, 4%)
2 Black $black $black hsl(0, 0%, 4%) $white hsl(0, 0%, 100%)
3 Light $light $white-ter hsl(0, 0%, 96%) $grey-darker hsl(0, 0%, 21%)
4 Dark $dark $grey-darker hsl(0, 0%, 21%) $white-ter hsl(0, 0%, 96%)
5 Primary $primary $turquoise hsl(171, 100%, 41%) #fff #fff
6 Link $link $blue hsl(217, 71%, 53%) #fff #fff
7 Info $info $cyan hsl(204, 86%, 53%) #fff #fff
8 Success $success $green hsl(141, 71%, 48%) #fff #fff
9 Warning $warning $yellow hsl(48, 100%, 67%) rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7)
10 Danger $danger $red hsl(348, 100%, 61%) #fff #fff

Bulma provides grey shade between black and white for the elements as shown below −

S.No. Color Variable Value
1 Black bis $black-bis hsl(0, 0%, 7%)
2 Black ter $black-ter hsl(0, 0%, 14%)
3 Grey darker $grey-darker hsl(0, 0%, 21%)
4 Grey dark $grey-dark hsl(0, 0%, 29%)
5 Grey light $grey-light hsl(0, 0%, 71%)
6 Grey lighter $grey-lighter hsl(0, 0%, 86%)
7 White ter $white-ter hsl(0, 0%, 96%)
8 White bis $white-bis hsl(0, 0%, 98%)
bulma_overview.htm
Advertisements