Bulma：现代、开盒即用的
CSS 框架

Bulma 是一款自由、开源的 CSS 框架，其提供了可容易组合构建出的响应式 Web 界面的前端组件。

无需 CSS 知识。

npm install bulma

视频由 Vue Mastery 制作

Alejandro Barrera A. @ale_codes

Bulma CSS by @jgthms is just perfect. Simple, easily customizable and doesn't impose Javascript implementations.

After experimenting with @tailwindcss and finding that utility first css is just not my thing, Bulma felt like a breath of fresh air.

#webdevelopment #CSS

3:33 PM - 10 May 2019

Jamie @MyTopSecretName

Omg I've been fighting with bootstrap and foundation, trying to get them to work with my rails app, for days. After 5 minutes I have #bulmaio working. It's a miracle!!!! @jgthms

5:15 PM - 16 Dec 2020

Jesse Schoff @jesseschoff

Bulma, I think I'm in love. bulma.io via @jgthms

10:10 PM - 29 May 2017

Per Axbom (away) @axbom

I've spent a few hours now with the Bulma CSS framework and I have to say it's the most beautifully written framework I've ever had the pleasure of working with. Nice work @jgthms 👊 bulma.io #bulmaio

6:48 PM - 22 Feb 2018

Bruce Tate (sending love to 🇺🇦) @redrapids

One of the main contributors to our success at grox.io: the Bulma framework by @jgthms.

His work is brilliant. It’s very low JavaScript, and it plays very well with @elixirphoenix #liveview.

In short, Bulma provides its value and gets out of the way. Thanks!

4:11 PM - 25 Apr 2020

Infinity Search @InfinitySearch1

We're very happy that @jgthms created the Bulma CSS framework. It has saved us a ton of time and made our site responsive on all devices! pic.twitter.com/lvEM7uhcLn

6:41 PM - 18 Mar 2020

Bruh @bruhandle

Okay so with @jgthms’s Bulma, I was able to make each one of my pages on my website’s templates in one single day with no prior knowledge on how to use it, the docs are super easy to understand and it’s a great library. #css

6:30 AM - 18 Jun 2019

scottgallant 💙💛 @scottgallant

bulma.io is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.

💯 @jgthms.

1:51 PM - 26 Feb 2017

Alejandro Barrera A. @ale_codes

3:33 PM - 10 May 2019

Jamie @MyTopSecretName

Omg I've been fighting with bootstrap and foundation, trying to get them to work with my rails app, for days. After 5 minutes I have #bulmaio working. It's a miracle!!!! @jgthms

5:15 PM - 16 Dec 2020

Jesse Schoff @jesseschoff

Bulma, I think I'm in love. bulma.io via @jgthms

10:10 PM - 29 May 2017

Per Axbom (away) @axbom

6:48 PM - 22 Feb 2018

Bulma 感谢所有的用户和 GitHub 赞助商

他们的支持是 Bulma 和其他软件持续开发的巨大动力。

最简单的格栅系统

只需添加 columns，它们会自行调整

查看 columns 文档

Better on desktop

This interactive tool works better on larger screens! That's because Bulma columns are vertical by default. I recommend revisiting this page later when you're on desktop. 😉

添加 column 删除

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

Info

While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
If you want smaller divisions, you can always nest columns.

那么，学习也容易

设计起步仅需数分钟

查看 modifiers 语法

Francisco Cruz @atFranCruz

So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks @jgthms

3:01 PM - 28 May 2017

button

Button

button is-primary

Button

button is-primary is-large

Button

button is-primary is-large is-loading

Button

那么，也可快速定制

导入 Bulma 前可简化定制您自己的 Sass 变量

查看定制文档

Lars @LarsPeterke

Wanted a dark mode and discovered that in my build steps for @bulmaio inverting the values for $black, $white and greyscales and setting a bg-color for the html element is 90% of the work done. Relly great work by @jgthms to make stuff like this SO easy! #coding #webdev pic.twitter.com/nm84fBXcbU

3:13 PM - 5 Dec 2018

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;

// Update some of Bulma's component variables
$control-border-width: 2px;
$input-background-color: $beige-lighter;
$input-border-color: transparent;
$input-shadow: none;

// Import the rest of Bulma
@import "../path/to/bulma";

之前

Bulma

现代 CSS 框架基于 Flexbox

Primary Link

之后

Bulma

现代 CSS 框架基于 Flexbox

Primary Link

不需要 JavaScript

只有 CSS，所以可与任何 JS 环境集成

查看安装文档

Robert Stuttaford @RobStuttaford

bulma.io -- a CSS framework by @jgthms -- is lovely! No JS included, which means no JS opinions included!

5:53 PM - 6 May 2017

人人皆可美化

看一看 Bulma 开发者的才艺展示

查看展览

社区的挚爱

看一看 Bulma 粉丝的 tweeting

查看更多的爱

chris sev @chris__sev

Want a change of pace from Bootstrap? Try Bulma. It's my BFF right now #bestframeworkforever scotch.io/bar-talk/get-t…

10:00 PM - 21 Sep 2017

KwesForms @kwesforms

Rebuilt our entire frontend in Bulma! Loved every minute of it. Our dashboard is next 😁. @jgthms

#javascript #CSS #Bulma #100DaysOfCode #DEVCommunity #html

11:55 PM - 5 Oct 2020

Luca Crea @Luca_Crea

Just dropped for my next project PureCSS – which I love – to try #Bulma by @jgthms 🤝 I'm already 100% in 💚 with it.
So many classes. Super cool #UI elements. A complete documentation. #Opensource
I mean, if you didn't try Bulma #css yet, check it out 👉 bulma.io

10:29 PM - 26 Nov 2018

Thomas Dubosc @Repraze

I've been working on some @reactjs layouts components along with some #CSS extensions to #bulmaio from @jgthms - Featuring side panels, collapsible/flexible boxes and popout window that stay in sync through react portals! I can create desktop like web apps now 👍 pic.twitter.com/G7OqZD7XSn

7:25 PM - 15 Mar 2019

Prance (She/They)🔜MFF @pranceTheDeer

Building a new site right now that I can't wait to show off soon. @jgthms makes it easy thanks to bulma.io

Loving working with it on this project.

12:53 AM - 9 Jul 2019

db4you @db4you2

Bloody hell.... To think that I was using my own simple framework for all of the #Frontend #webdevelopment. Here is a my old login page vs #bulmaio framework... Me so dumb. Why reinvent the wheel? Amazing job @jgthms #CSS pic.twitter.com/X5NnKZxyQq

12:29 AM - 14 Aug 2019

Bruce Tate (sending love to 🇺🇦) @redrapids

4:11 PM - 25 Apr 2020

Martin Verbic @martin_verbic

The Bulma (@jgthms) and @Ghost for building a blog is so remarkable. Bulma takes care of the design and Ghost of writing. And both can be/are minimalistic - exactly what you need for simple blogging without design restrictions. #Bulma #blog

martinverbic.com

3:08 PM - 25 Sep 2019

scottgallant 💙💛 @scottgallant

bulma.io is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.

💯 @jgthms.

1:51 PM - 26 Feb 2017

ninan kara @ninankara

thanks Bulma for saving my day.
@jgthms

when-a-developer-is-asked-to-design-a-website pic.twitter.com/i44O1nDMNd

9:26 AM - 28 Sep 2020

Amir Azimi @azimidev

Still like #bulma, more than #bootstrap. Even the syntax is cleaner. @jgthms

4:45 PM - 1 Sep 2017

Jeroen Coussement @coussej

Spent months comparing frontend frameworks for both #css and #javascript. Settled on @jgthms's #bulmaio for CSS and @Rich_Harris's @sveltejs for Javascript. Works great, there is a clear separation of look and function, and the resulting code is super clean. Perfect combo ! 🚀

5:35 PM - 24 Oct 2017