In this guide, we will discuss 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%) |
Next Topic : Click Here
Pingback: Bulma - Overview | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Getting started with Bulma | Adglob Infosystem Pvt Ltd