Giới thiệu

Bulma là một css framework, được viết bằng sass dựa vào flexbox, sử dụng css-grid for reponsive và được thiết kế cho mobile first. Nó là một modular css fw, có nghĩa bạn có thể sử dụng đơn lẻ các chức năng của nó như columns, button, form…

Tổng quan

Cài đặt

npm

npm install bulma

or CDN

https://cdnjs.com/libraries/bulma

Modularity

• Bulma chứa 39 file .sass, chúng ta có thể add trực tiếp cái nào cần.

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

Responsiveness

Vertical by default

Tất cả element trong Bulma là mobile first và được tối ưu hóa cho việc đọc theo chiều dọc.

• columns are stacked vertically
• the level component will show its children stacked vertically
• the nav menu will be hidden

Breakpoints

Bulma có 5 breakpoint:

Breakpoint là các giá trị mà Bulma dựa vào để detect cho responsive

• mobile: up to 768px
• tablet: from 769px
• desktop: from 1024px
• widescreen: from 1216px
• fullhd: from 1408px

Và có 9 reponsive mixins:

Những giá trị mà chúng ta có thể check ví dụ như:

• touch nằm trong vùng từ mobile tới table
• hay table only, desktop-only…

Variables

Có 2 file chứa variables là initial và derived và chia thành 4 loại

• initial chứa các giá trị trực tiếp chia thành 4 loại:

  • colors: $blue: hsl(217, 71%, 53%)
  • font sizes: $size-1: 3rem
  • dimensions: $gap: 32px
  • other values: $easing: ease-out or $radius-large: 5px

• derived sử dụng những giá trị từ initial:

  • $primary: $turquoise
  • $link: $blue
  • $info: $cyan
  • $success: $green

Xem thêm: https://bulma.io/documentation/overview/variables/

Colors

https://bulma.io/documentation/overview/colors/

Bulma hỗ trợ danh sách các màu mặc định, được sử dụng hiện tại cho các elements và components. Chúng ta có thể sử dụng với format như sau .is-$color như là is-primary, is-dark, is-success…

Chúng ta có thể sửa các biến global $color như sau:

// Import danh sách biến khởi tạo mặc định
@import "../node_modules/bulma/sass/utilities/initial-variables";

// Định nghĩa màu xanh
$blue: #72d0eb;

// Update lại color của primary
$primary: $pink;

Functions

https://bulma.io/documentation/overview/functions/

Bulma sử dụng 3 functions để xác định giá trị và tính toán màu sắc động colors dynamically.

• powerNumber($number, $exp): calculates the value of a number exposed to another one. Returns a number.
• colorLuminance($color): defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.
• findColorInvert($color): returns either 70% transparent black or 100% opaque white depending on the luminance of the color.

1 Cái đầu mình ko biết nó để làm gì.

2 Xác định màu là sáng hay tối.

3 Trả về một màu đối lập, thường dùng để set màu chữ cho button. Giả sử button màu đỏ => nằm vế phía darkness hơn => ra màu trằng.

Modifiers - tính sửa đổi

https://bulma.io/documentation/modifiers/

Syntax

Khá là thân thiện để đọc hiểu. Nó thường được bắt đầu bằng is- hoặc -has

<a class="button is-primary">Button</a>
<a class="button is-link">Button</a>
<a class="button is-small">Button</a>
<a class="button is-info is-loading">Button</a>

Helpers

Áp dụng cho hầu hết element để thay đổi style của tụi nó.

Show

Sử dụng các thuộc tính của display:

• block
• flex
• inline
• inline-block
• inline-flex

format là is-$dislay => is-block, is-flex

Ngoài ra có một số class để show/hide một element theo reponsive như là: is-hidden-mobile, is-hidden-tablet-only, is-flex-mobile…

Colors helper

https://bulma.io/documentation/modifiers/color-helpers/ Có 9 màu và 9 shades của grey để bạn set cho element của mình, thuộc 2 section là text-color và background-color

Format: has-text-white, has-text-grey-dark… và has-background-white, has-background-success…

Typography helpers

https://bulma.io/documentation/modifiers/typography-helpers/

Size

Có 7 size để chọn:

Khi làm việc với reponsive cùng size is-size-1-mobile, is-size-2-tablet…

Alignment (căn chỉnh)

Class	Alignment
has-text-centered	Makes the text centered
has-text-justified	Makes the text justified
has-text-left	Makes the text aligned to the left
has-text-right	Makes the text aligned to the right

Khi làm việc với reponsive cùng Alignment has-text-left-mobile, has-text-left-tablet-only…

Text transformation

Hỗ trợ 4 options:

Class	Transformation
is-capitalized	Transforms the first character of each word to uppercase
is-lowercase	Transforms all characters to lowercase
is-uppercase	Transforms all characters to uppercase
is-italic	Transforms all characters to italic

Text weight

Cũng hỗ trợ 4 kiểu luôn:

Class	Weight
has-text-weight-light	Transforms text weight to light
has-text-weight-normal	Transforms text weight to normal
has-text-weight-semibold	Transforms text weight to semi-bold
has-text-weight-bold	Transforms text weight to bold

Columns

https://bulma.io/documentation/columns/

Lấy trích dẫn từ trang chủ:

The power of Flexbox in a simple interface.

Có lẻ đây cũng là phần hấp dẫn nhất của framework Bulma này.

Basic

Add container với class=columns và các element với class=column. Dựa vào số element Bulma sẽ tự phân chia.

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

Column sizes

Có kiểu:

Dựa theo size

Nó sẽ chia theo phần trăm ví dụ:

• bốn phần năm ⁴⁄₅ => column is-four-fifths

<div class="columns">
  <div class="column is-four-fifths">is-four-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

• hai phần ba ²⁄₃ => column is-three-quarters

<div class="columns">
  <div class="column is-two-thirds">is-two-thirds</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

Tương tự như vậy cho các trường hợp khác.

12 columns system

Giống bootstrap là sẽ chia thàn 12 colums và dựa đó để chia layout.

Format: is-$num => is-2 is-3 is-4… is-12

Còn tiếp…

Thanks đã xem

Back to posts

bulma scss css