Website redesign: clearer layout, easier navigation, better content, and much more!

13 Apr 2018

The Bulma website has been widely redesigned! There’s been a lot of work, to say the least:

files
diff

Just see for yourself!

Before

v7 website

After

v7 website

The navbar has been updated with a lighter markup and cleaner design:

navbar

This doesn’t affect the current navbars. There’s actually a new modifier called is-spaced that was created for this new navbar. Documentation coming soon!


Customize example #

On the homepage, there’s a new customization section with a live example:

customize

breadcrumb

A breadcrumb is now visible at the top of each page, to easily navigate up and down the hierarchy.

This has led to the creation of new intermediate pages:


These intermediate pages have new link boxes that help dive into each sub-category:

footer links

Previous/Next #

Next to the breadcrumb, you can easily navigate to the sibling pages with the previous and next links:

prevnext buttons

These links are also available at the bottom:

prevnextbis buttons

Categories #

There’s a new sidebar including a navigation menu with all the categories and sub-categories:

categories menu

Scroll spy #

On some pages below the categories, you’ll find a new menu called “On this page” which is actually a scroll spy:

scrollspy menu

The footer has been redesigned as well. Among other things, there’s a sitemap available:

footer links

Code #

The Bulma website is built with Jekyll. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well.

This will help further updates to be easier.

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!