4.8 KiB
| title | layout | introduction | color | name | icon | featured | image | alt |
|---|---|---|---|---|---|---|---|---|
| Website redesign: clearer layout, easier navigation, better content, and much more! | post | A brand new look | expo | Website redesign | star | true | 9-OCsKoyQlk | Swimming pool |
The Bulma website has been widely redesigned! There's been a lot of work, to say the least:
Just see for yourself!
Before
After
{% include docs/elements/anchor.html name="Navbar" %}
The navbar has been updated with a lighter markup and cleaner design:
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!
{% include docs/elements/anchor.html name="Customize example" %}
On the homepage, there's a new customization section with a live example:
{% include docs/elements/anchor.html name="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:
- documentation
- documentation/modifiers
- documentation/columns
- documentation/layout
- documentation/form
- documentation/elements
- documentation/components
- more
{% include docs/elements/anchor.html name="Links" %}
These intermediate pages have new link boxes that help dive into each sub-category:
{% include docs/elements/anchor.html name="Previous/Next" %}
Next to the breadcrumb, you can easily navigate to the sibling pages with the previous and next links:
These links are also available at the bottom:
{% include docs/elements/anchor.html name="Categories" %}
There's a new sidebar including a navigation menu with all the categories and sub-categories:
{% include docs/elements/anchor.html name="Scroll spy" %}
On some pages below the categories, you'll find a new menu called "On this page" which is actually a scroll spy:
{% include docs/elements/anchor.html name="Footer" %}
The footer has been redesigned as well. Among other things, there's a sitemap available:
{% include docs/elements/anchor.html name="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.