mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add website redesign post
This commit is contained in:
Jeremy Thomas
parent
93e12309e6
commit
8baac6ec5a
@ -1,6 +1,6 @@
|
||||
{% assign customize_link = site.data.links.by_id['overview-customize'] %}
|
||||
|
||||
<section class="bd-easy section is-medium">
|
||||
<section id="customize" class="bd-easy section is-medium">
|
||||
<div class="container">
|
||||
<header class="bd-index-header">
|
||||
<h3 class="title is-3">
|
||||
|
||||
132
docs/_posts/2018-04-13-new-website.md
Normal file
132
docs/_posts/2018-04-13-new-website.md
Normal file
@ -0,0 +1,132 @@
|
||||
---
|
||||
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!
|
||||
|
||||
<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 ligther 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 not 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.
|
||||
@ -30,7 +30,7 @@ $carbon-poweredby-height: 20px
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: $carbon-width
|
||||
min-height: $carbon-height
|
||||
min-height: $carbon-height + $carbon-poweredby-height
|
||||
min-width: 280px
|
||||
|
||||
#carbon
|
||||
@ -55,11 +55,14 @@ $carbon-poweredby-height: 20px
|
||||
position: relative
|
||||
&:hover
|
||||
.carbon-img::after
|
||||
+overlay
|
||||
background-color: rgba(#000, 0.05)
|
||||
content: ""
|
||||
display: block
|
||||
height: $carbon-height
|
||||
left: 0
|
||||
position: absolute
|
||||
right: $carbon-spacing
|
||||
top: 0
|
||||
.carbon-img
|
||||
bottom: 0
|
||||
float: left
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .bd-patreon-button:hover::after, #carbonads .carbon-wrap:hover .carbon-img::after, .bd-focus-item::before, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
|
||||
.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .bd-patreon-button:hover::after, .bd-focus-item::before, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
|
||||
.bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -10201,7 +10201,7 @@ svg {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 300px;
|
||||
min-height: 100px;
|
||||
min-height: 120px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
@ -10242,7 +10242,11 @@ svg {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#carbonads .carbon-img {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user