DINH DUONG

Những ghi chú khi làm việc thử với Bulma (1)

May 22, 2018 - 5 minutes read

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

bulma

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

mixins

Variables

Có 2 file chứa variables là initialderived 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 elementscomponents. 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;

bulma color

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.

bulma color

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ó.

bulma modifiers helpers

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/9 màu9 shades của grey để bạn set cho element của mình, thuộc 2 section là text-colorbackground-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:

bulma size

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.

bulma colums basic

<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 45 => 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>

4/5

  • hai phần ba 23 => 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>

2/3

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-4is-12

colums system

Còn tiếp…

Thanks đã xem

Back to posts

bulma scss css
github twitter codfee email