pixelwright UI Development & Design


Bulma: a Flexbox CSS framework

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


Simply enter:

npm install bulma

Alternatively head over to their GitHub repository page


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>

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
    <div class="navbar-item">
      <p class="control is-grouped">
        <input class="input" type="text" placeholder="Find a post">
        <button class="button">

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

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="">
  <div class="card-content">
    <div class="media">
      <figure class="media-image is-40">
        <img src="http://placehold.it/40x40" alt="Image">
      <div class="media-content">
        <p class="title is-5">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
    <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>
      <small>11:09 PM - 1 Jan 2016</small>

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.


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