Bulma中文文档: a modern CSS framework based on Flexbox

Bulma supports Font Awesome 5

Thu, 18 Jan 2018 00:00:00 +0000

Bulma is icon library agnostic: this means that you can use any icon font library (like Font Awesome 4 or 5, Material Design Icons, Open Iconic, Ionicons…) with Bulma’s icon class.

As a result, Bulma already supports Font Awesome 5! 😃

Since the icon element is simply a container for any icon font *allowing the layout to reserve a spot for the icon while it loads), it supports any size of Font Awesome 4 and 5.

For the sake of being in sync with Bulma users, I’ve recently updated the website to actually use Font Awesome 5! The process of migrating from Font Awesome 4 to 5 is straightforward. You simply need to:

include Font Awesome 5 instead, using the script tag
replace fa classes with their fas and fab equivalents

That’s it!

Check out the icon documentation.

Bulma is on Patreon!

Tue, 14 Nov 2017 00:00:00 +0000

Bulma has now its own Patreon page:

This will allow people to easily support Bulma, and ensure its future development.

New feature: fixed navbar

Wed, 01 Nov 2017 00:00:00 +0000

You can now fix a navbar to the top or the bottom:

Check it out!

As a added bonus, the bottom navbar required a new dropup feature which has also been implemented!

New feature: list of buttons

Sun, 22 Oct 2017 00:00:00 +0000

Similarly to the list of tags launched a few months ago, the button has its own list of buttons:

Although you could already group buttons by using from groups, this new buttons class makes everything easier.

Roses are red – Links are blue

Mon, 09 Oct 2017 00:00:00 +0000

By default, a browser will display links in blue. Bulma has up until now used the $primary color as the $link color:

// Old styles
$link: $primary !default

But the primary color is mostly used as the brand color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices:

the $link color defaults to $blue
$info is using the new $cyan color
$link has been added to the $colors map as well

// New styles
$link: $blue !default
$info: $cyan !default

Deprecation warning

Because the modifier is-link for buttons already existed, it has been renamed to is-text.

As such, the following components are now blue:

All Bulma elements and components that support color modifiers now support the .is-link color:

<div class="notification is-link">
  Link notification.
</div>

<div class="notification is-info">
  Info notification.
</div>

<button class="button is-link">
  Link button
</button>

<button class="button is-info">
  Info button
</button>

Link notification.

Info notification.

If you want to use the $primary color for your links, just customize your Bulma setup by including these rules:

$link: $primary !default
$link-invert: $primary-invert !default
$link-focus-border: $primary !default

New feature: list of tags

Thu, 03 Aug 2017 00:00:00 +0000

The tag is a small but useful element that can be used in many contexts, to enhance the meaning of the text it’s attached to.

A tag rarely comes on its own though, so Bulma now supports list of tags. The same way you can group controls, you can now group tags together to form a list that can span multiple lines.

As a bonus, there is also a delete tag available!

Bulma / Bootstrap comparison

Tue, 01 Aug 2017 00:00:00 +0000

Bulma has always been a Bootstrap fan, inspired by its goal and purpose.

Some users ask why they should use Bulma over Bootstrap, and there is no definite answer, because while both CSS frameworks share similarities, they also differ in many ways.

The new page "Alternative to Bootstrap" draws a feature comparison to help undecided users choose the right tool for their web design needs, which can be either Bulma or Bootstrap.

Access previous Bulma versions

Mon, 24 Jul 2017 00:00:00 +0000

It is now possible to access previous versions of Bulma. Just head towards: http://versions.bulma.io/

While only version 0.4.4 is accessible now, each new release will remain available forever.

New field element (for better controls)

Fri, 10 Mar 2017 00:00:00 +0000

TL;DR: there’s a new .field container, and .control has been re-purposed.

Since the beginning, the .control has been a very versatile element that allowed:

to space controls vertically
to include an icon alongside inputs, buttons, textareas…
to append a loading spinner
to create horizontal forms
to create control addons
to create control groups

The problem

The .control element acted as both a block container (for spacing, for other controls in a horizontal form), but also an inline container (for adding an icon, a loader, an addon, and grouping). It led to issues where you couldn’t:

add a help text horizontally
add multiple icons or loaders in a group of controls
add a different icon on addons

The solution

The new .field element becomes the block container for .control elements. As a result, it inherits the .has-addons, .is-grouped, and .is-horizontal modifiers.

Furthermore .control element can only contain a .button, .input, .select, or .textarea, and eventually a .icon. It can no longer contain a .help element or other .control.

But it allows more elaborate designs.

// Before
.control
  .has-addons
  .has-icon
  .is-grouped
  .is-horizontal
  .is-loading

// After
.control
  .has-icon
  .is-loading
.field
  .has-addons
  .is-grouped
  .is-horizontal
.field-label
.field-body

<!-- Before -->
<label class="label">Username</label>
<p class="control has-icon has-icon-right">
  <input class="input is-success" type="text" placeholder="Text input" value="bulma">
  <span class="icon is-small">
    <i class="fas fa-check"></i>
  </span>
  <span class="help is-success">This username is available</span>
</p>

<!-- After -->
<div class="field">
  <label class="label">Username</label>
  <p class="control has-icon has-icon-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
  </p>
  <p class="help is-success">This username is available</p>
</div>

Examples

Addons with multiple icons or states.

Horizontal form with help text

From

This email is correct

Metro UI CSS grid with Bulma tiles

Mon, 11 Apr 2016 00:00:00 +0000

Have you ever wanted to build a Metro-UI-like grid in CSS? Thanks to Flexbox and the new Bulma tiles, you now can! And it only requires 1 HTML element: the tile element.

Check out the documentation!