Bulma: framework CSS dựa trên Flexbox
/bulma
Bulma là một framework CSS thuần, cung cấp các class dựng lưới, form và component dựa trên Flexbox mà không kèm theo bất kỳ dòng JavaScript nào. Nên dùng nếu bạn muốn có sẵn các class kiểu Bootstrap nhưng tự code phần tương tác (dropdown, modal) bằng Vue, React hay JS thuần của riêng mình. Nên bỏ qua nếu bạn cần widget tương tác dựng sẵn ngay từ đầu, vì Bulma để toàn bộ phần logic đó cho bạn tự làm.
Bulma là gì?
Bulma là một framework CSS mã nguồn mở được xây dựng hoàn toàn trên Flexbox, phân phối dưới dạng một file CSS đã biên dịch sẵn hoặc dưới dạng mã nguồn Sass để bạn tùy biến. Nó cung cấp sẵn class cho form, button, card, navbar và hệ lưới để dàn trang, nhưng không kèm JavaScript, nên mọi hành vi tương tác (mở modal, bật dropdown) là phần code bạn tự viết.
Tính năng chính của Bulma
- ✓Hệ lưới (grid) và columns dựa trên Flexbox giúp dàn trang responsive mà không phải tự viết media query CSS thủ công
- ✓File Sass nguồn cho phép override biến (màu sắc, khoảng cách, breakpoint) trước khi build ra bản CSS riêng của bạn
- ✓Không kèm JavaScript — Bulma thuần là lớp style, nên dropdown, modal, tab cần bạn tự viết JS hoặc dùng thêm thư viện UI
- ✓Autoprefixer tự động xử lý vendor prefix cho trình duyệt cũ trong quá trình build
- ✓Chỉ cần một file bulma.css đã biên dịch sẵn, có thể nhúng qua CDN mà không cần bước build nào
- ✓Các class component bao phủ button, card, navbar, form, table và modal ngay khi cài đặt
- ✓Hỗ trợ một phần Internet Explorer 10+ bên cạnh hỗ trợ đầy đủ Chrome, Firefox, Safari, Edge và Opera bản mới
Cách cài đặt Bulma
Cài qua npm bằng `npm install bulma`, qua Yarn bằng `yarn add bulma`, hoặc qua Bower bằng `bower install bulma`. Sau khi cài, import file CSS vào project bằng `@import 'bulma/css/bulma.css'`. Nếu muốn setup không cần build, có thể load thẳng từ CDN qua trang gói bulma trên jsDelivr thay vì cài cục bộ.
Sử dụng Bulma trong dự án
Sau khi đã nhúng file CSS, bạn viết HTML thuần và gắn các class của Bulma — `button`, `card`, `navbar`, `columns` — giống hệt cách dùng class của Bootstrap. Chỉ vậy thôi. Để tùy biến thay vì dùng file CSS build sẵn, tải mã nguồn Sass về, override biến của nó (màu, spacing) rồi tự build ra file bulma.css riêng, vì đây là cách duy nhất để đổi màu hay khoảng cách khi không có API theming chạy runtime. Việc gắn toggle menu mobile hay xử lý trạng thái đóng/mở modal hoàn toàn do bạn tự làm, vì không có JavaScript nào đi kèm.
Vì sao developer chọn Bulma
- ✓Không có JavaScript để phải audit hay quản lý version — output chỉ là một file CSS, nên không xung đột với stack JS riêng của bạn
- ✓Biến Sass cho phép tùy biến thật sự (màu, breakpoint, spacing) thay vì phải hack override sau khi build
- ✓Hệ lưới Flexbox tránh được các hack dựa trên float mà những framework CSS đời cũ vẫn còn giữ
- ✓Trung lập với framework: dùng được như nhau dù phần còn lại của trang là React, Vue, HTML thuần hay view của Rails
Hạn chế của Bulma
- △Không có JavaScript nghĩa là không có sẵn hành vi modal, dropdown hay tab — bạn phải tự viết hoặc import logic đó
- △Internet Explorer chỉ được hỗ trợ một phần (10+), nên môi trường doanh nghiệp dùng trình duyệt cũ có thể gặp lỗi layout
- △Tùy biến ngoài phạm vi biến nghĩa là phải sửa mã nguồn Sass và build lại, không chỉ đổi một config flag
- △Tài liệu chính thức trỏ sang các package wrapper bên thứ ba (Buefy, Bloomer, react-bulma-components) cho phần component tương tác, nghĩa là bạn phải cân nhắc thêm một dependency nữa
Bulma so với Bootstrap và Tailwind
Câu hỏi thường gặp
Có, Bulma phát hành theo giấy phép MIT, nên bạn dùng được trong dự án thương mại mà không phải trả phí hay ghi công. Jeremy Thomas giữ bản quyền, nhưng MIT cho phép dùng, sửa đổi và phân phối lại vì mục đích thương mại.
Không, Bulma không kèm bất kỳ dòng JavaScript nào — đây là framework CSS thuần. Hành vi tương tác như mở dropdown hay bật menu mobile phải tự viết script hoặc dùng thư viện component như Buefy hay Bloomer.
Tải mã nguồn Sass của Bulma thay vì dùng file CSS build sẵn, override biến của nó (màu, spacing, breakpoint) trong file Sass riêng, rồi build ra file CSS cuối. Bulma không có theming runtime — mọi tùy biến diễn ra ở bước build.
Bulma hỗ trợ đầy đủ các bản mới của Chrome, Edge, Firefox, Opera và Safari, nhờ autoprefixer tự vá vendor prefix cho Flexbox. Internet Explorer từ bản 10 trở lên chỉ được hỗ trợ một phần, nên có thể gặp lỗi layout.
Bulma chỉ là CSS, xây trên Flexbox, còn Bootstrap kèm sẵn JavaScript riêng cho các component như modal hay dropdown. Chọn Bulma nếu muốn một lớp style nhẹ để ghép với JS của riêng bạn; chọn Bootstrap nếu muốn component tương tác chạy ngay.
Có — các class CSS thuần của Bulma dùng được trong bất kỳ framework nào vì chúng chỉ là tên class HTML. React có thể dùng Bloomer hoặc rbx, còn Vue có thể dùng Buefy, tất cả đều xây trên nền style của Bulma.
Vấn đề mà Bulma giải quyết
Tự dựng layout responsive từ đầu nghĩa là bạn phải tự viết hệ lưới Flexbox, media query cho từng breakpoint, và style cho từng component (button, card, form) mỗi khi bắt đầu một dự án mới. Bulma đóng gói sẵn lớp đó thành các class dùng ngay được, giúp bạn không phải viết lại cùng một đoạn CSS, đồng thời cố tình không kèm JavaScript để không xung đột với framework hay JS thuần mà bạn đang dùng.
Các trường hợp sử dụng tốt nhất
- •Dựng nhanh một dashboard admin hay trang marketing responsive bằng class dựng sẵn thay vì tự viết CSS từ đầu
- •Thêm một lớp CSS nhất quán vào dự án React, Vue hay JS thuần mà không phải kéo theo một UI kit nặng JS
- •Xây site tĩnh hoặc server-rendered (Rails, Django, Laravel) nơi một package wrapper lo phần asset pipeline
- •Dạy hoặc học pattern layout Flexbox qua một hệ class thực tế
Nên dùng — và nên bỏ qua khi nào
Dùng Bulma nếu bạn thoải mái tự viết JavaScript (hoặc đã có sẵn framework như React hay Vue lo phần tương tác) và muốn một lớp CSS không can thiệp vào logic của bạn. Bỏ qua nếu bạn cần component tương tác chạy được ngay mà không phải tự gắn thêm gì — Bootstrap hoặc một thư viện component dựa trên Bulma như Buefy sẽ nhanh hơn.
Repo liên quan
bulma có đáng để bạn bỏ thời gian?
ChatGPT, Claude và Perplexity đều đọc được trang này. Hỏi thử xem họ nghĩ gì về bulma.