Fix #1207

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Bulma Changelog
 
+## 0.5.3
+
+### Issues closed
+
+* #1207 Fix `.breadcrumb` alignment
+
 ## 0.5.2
 
 ### New features

README.md

@@ -1,19 +1,19 @@
 # [Bulma](http://bulma.io)
 
+Bulma is a **modern CSS framework** based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
+
+<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/5pucRKHwhsqiAiYS1CdnS4SM/jgthms/bulma'>  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/5pucRKHwhsqiAiYS1CdnS4SM/jgthms/bulma.svg' /></a>
+
 [![npm](https://img.shields.io/npm/v/bulma.svg)](https://www.npmjs.com/package/bulma)
 [![npm](https://img.shields.io/npm/dm/bulma.svg)](https://www.npmjs.com/package/bulma)
 [![Join the chat at https://gitter.im/jgthms/bulma](https://badges.gitter.im/jgthms/bulma.svg)](https://gitter.im/jgthms/bulma)
 [![Build Status](https://travis-ci.org/jgthms/bulma.svg?branch=master)](https://travis-ci.org/jgthms/bulma)
 
-Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
-
-<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/5pucRKHwhsqiAiYS1CdnS4SM/jgthms/bulma'>  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/5pucRKHwhsqiAiYS1CdnS4SM/jgthms/bulma.svg' /></a>
-
 <a href="http://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600" height="315"></a>
 
 ## Quick install
 
-Bulma is in early but active development! Try it out now:
+Bulma is constantly in development! Try it out now:
 
 ### NPM
 
@@ -22,7 +22,7 @@ npm install bulma
 ```
 **or**
 
-### YARN
+### Yarn
 
 ```sh
 yarn add bulma

docs/css/bulma-docs.css

@@ -493,6 +493,64 @@ table th {
   }
 }
 
+.has-text-justified {
+  text-align: justify !important;
+}
+
+@media screen and (max-width: 768px) {
+  .has-text-justified-mobile {
+    text-align: justify !important;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .has-text-justified-tablet {
+    text-align: justify !important;
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1023px) {
+  .has-text-justified-tablet-only {
+    text-align: justify !important;
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  .has-text-justified-touch {
+    text-align: justify !important;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .has-text-justified-desktop {
+    text-align: justify !important;
+  }
+}
+
+@media screen and (min-width: 1024px) and (max-width: 1215px) {
+  .has-text-justified-desktop-only {
+    text-align: justify !important;
+  }
+}
+
+@media screen and (min-width: 1216px) {
+  .has-text-justified-widescreen {
+    text-align: justify !important;
+  }
+}
+
+@media screen and (min-width: 1216px) and (max-width: 1407px) {
+  .has-text-justified-widescreen-only {
+    text-align: justify !important;
+  }
+}
+
+@media screen and (min-width: 1408px) {
+  .has-text-justified-fullhd {
+    text-align: justify !important;
+  }
+}
+
 .has-text-left {
   text-align: left !important;
 }
@@ -4892,6 +4950,10 @@ a.tag:hover {
   color: #363636;
 }
 
+.breadcrumb a:first-child {
+  padding-left: 0;
+}
+
 .breadcrumb li {
   -webkit-box-align: center;
       -ms-flex-align: center;

sass/components/breadcrumb.sass

@@ -21,6 +21,8 @@ $breadcrumb-item-separator-color: $text !default
     padding: 0.5em 0.75em
     &:hover
       color: $breadcrumb-item-hover-color
+    &:first-child
+      padding-left: 0
   li
     align-items: center
     display: flex