mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
141 lines
4.4 KiB
Markdown
141 lines
4.4 KiB
Markdown
---
|
|
title: "Website redesign: clearer layout, easier navigation, better content, and much more!"
|
|
layout: post
|
|
introduction: "A brand new look"
|
|
color: "star"
|
|
name: "Website redesign"
|
|
icon: "star"
|
|
---
|
|
|
|
The Bulma website has been widely redesigned! There's been a lot of work, to say the least:
|
|
|
|
<figure>
|
|
<img src="/images/blog/v7/files.png" alt="files" width="312" height="37">
|
|
<br>
|
|
<img src="/images/blog/v7/diff.png" alt="diff" width="167" height="38">
|
|
</figure>
|
|
|
|
Just see for yourself!
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<p class="has-text-centered has-text-grey-light">Before</p>
|
|
<a href="/images/blog/v7/before.png">
|
|
<img src="/images/blog/v7/before.png" alt="v7 website" width="1400" height="1200">
|
|
</a>
|
|
</div>
|
|
<div class="column">
|
|
<p class="has-text-centered has-text-grey-light">After</p>
|
|
<a href="/images/blog/v7/after.png">
|
|
<img src="/images/blog/v7/after.png" alt="v7 website" width="1400" height="1200">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% include elements/anchor.html name="Navbar" %}
|
|
|
|
The **navbar** has been updated with a lighter markup and cleaner design:
|
|
|
|
<figure>
|
|
<a href="/images/blog/v7/navbar.png">
|
|
<img src="/images/blog/v7/navbar.png" alt="navbar" width="1080" height="84">
|
|
</a>
|
|
</figure>
|
|
|
|
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 elements/anchor.html name="Customize example" %}
|
|
|
|
On the homepage, there's a new [**customization** section with a live example](/#customize):
|
|
|
|
<figure>
|
|
<a href="/#customize">
|
|
<img src="/images/blog/v7/customize.png" alt="customize" width="492" height="582">
|
|
</a>
|
|
</figure>
|
|
|
|
{% include elements/anchor.html name="Breadcrumb" %}
|
|
|
|
<figure>
|
|
<a href="/images/blog/v7/breadcrumb.png">
|
|
<img src="/images/blog/v7/breadcrumb.png" alt="breadcrumb" width="422" height="24">
|
|
</a>
|
|
</figure>
|
|
|
|
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)
|
|
* [documentation/modifiers](/documentation/modifiers)
|
|
* [documentation/columns](/documentation/columns)
|
|
* [documentation/layout](/documentation/layout)
|
|
* [documentation/form](/documentation/form)
|
|
* [documentation/elements](/documentation/elements)
|
|
* [documentation/components](/documentation/components)
|
|
* [more](/more)
|
|
|
|
{% include elements/anchor.html name="Links" %}
|
|
|
|
These intermediate pages have new **link boxes** that help dive into each sub-category:
|
|
|
|
<figure>
|
|
<a href="/images/blog/v7/links.png">
|
|
<img src="/images/blog/v7/links.png" alt="footer links" width="664" height="468">
|
|
</a>
|
|
</figure>
|
|
|
|
{% include elements/anchor.html name="Previous/Next" %}
|
|
|
|
Next to the breadcrumb, you can easily navigate to the **sibling** pages with the **previous** and **next** links:
|
|
|
|
<figure>
|
|
<a href="/images/blog/v7/prevnext.png">
|
|
<img src="/images/blog/v7/prevnext.png" alt="prevnext buttons" width="48" height="24">
|
|
</a>
|
|
</figure>
|
|
|
|
These links are also available at the bottom:
|
|
|
|
<figure>
|
|
<a href="/images/blog/v7/prevnextbis.png">
|
|
<img src="/images/blog/v7/prevnextbis.png" alt="prevnextbis buttons" width="664" height="58">
|
|
</a>
|
|
</figure>
|
|
|
|
{% include elements/anchor.html name="Categories" %}
|
|
|
|
There's a new **sidebar** including a navigation menu with all the categories and sub-categories:
|
|
|
|
<figure>
|
|
<a href="/images/blog/v7/categories.png">
|
|
<img src="/images/blog/v7/categories.png" alt="categories menu" width="256" height="397">
|
|
</a>
|
|
</figure>
|
|
|
|
{% include 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**:
|
|
|
|
<figure>
|
|
<a href="/images/blog/v7/scrollspy.png">
|
|
<img src="/images/blog/v7/scrollspy.png" alt="scrollspy menu" width="199" height="341">
|
|
</a>
|
|
</figure>
|
|
|
|
{% include elements/anchor.html name="Footer" %}
|
|
|
|
The footer has been redesigned as well. Among other things, there's a **sitemap** available:
|
|
|
|
<figure>
|
|
<a href="/images/blog/v7/footer.png">
|
|
<img src="/images/blog/v7/footer.png" alt="footer links" width="984" height="302">
|
|
</a>
|
|
</figure>
|
|
|
|
{% include 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 well help further updates to be easier.
|