pixelwright UI Development & Design

Bulma.io

07 Feb 2016

Bulma: a Flexbox CSS framework

Bulma is a new modern CSS framework by Jeremy Thomas based on Flexbox which seems incredibly straight forward.

Installation

Simply enter:

npm install bulma

Alternatively head over to their GitHub repository page

Features

Simple grid system

Just add columns, they will resize themselves:

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

Flexible Navbar

Include any type of element, they will remain vertically aligned:

<nav class="navbar">
  <!-- Left side -->
  <div class="navbar-left">
    <div class="navbar-item">
      <p class="subtitle is-5">
        <strong>123</strong> posts
      </p>
    </div>
    <div class="navbar-item">
      <p class="control is-grouped">
        <input class="input" type="text" placeholder="Find a post">
        <button class="button">
          Search
        </button>
      </p>
    </div>
  </div>

  <!-- Right side -->
  <div class="navbar-right">
    <p class="navbar-item"><strong>All</strong></p>
    <p class="navbar-item"><a href="#">Published</a></p>
    <p class="navbar-item"><a href="#">Drafts</a></p>
    <p class="navbar-item"><a href="#">Deleted</a></p>
    <p class="navbar-item"><a class="button is-success">New</a></p>
  </div>
</nav>

Versatile media object

A simple block with an image

<div class="card">
  <figure class="card-image is-4x3">
    <img src="http://placehold.it/300x225" alt="">
  </figure>
  <div class="card-content">
    <div class="media">
      <figure class="media-image is-40">
        <img src="http://placehold.it/40x40" alt="Image">
      </figure>
      <div class="media-content">
        <p class="title is-5">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>.
      <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <small>11:09 PM - 1 Jan 2016</small>
    </div>
  </div>
</div>

Easy vertical centering

Include any content you want, it’s easily centered

Compose your element with modifier classes

Add and combine is-* CSS classes to quickly alter styles

And much more

Check out the whole documentation over at bulma.io.

Questions?

Have a question about this post, a project or anything else?
Let's have a conversation on Twitter.

Related Posts