Add spaced title

diff --git a/docs/_includes/bsa.html b/docs/_includes/bsa.html
index 4c8794d6a814b2acccf0264008b035fd5536f653..313eecf47dee2e662b1de62ff7e2279bb0a25b4f 100644 (file)
--- a/docs/_includes/bsa.html
+++ b/docs/_includes/bsa.html
@@ -5,7 +5,7 @@
     <div class="columns is-vcentered">
       <div class="column is-4">
         <p class="title">Bulma <strong>Partners</strong></p>
-        <p class="subtitle">Keeping the project alive!</p>
+        <p class="subtitle">Check out their products!</p>
       </div>
 
       <div class="column is-8">

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 2f29f5717104d9fd7c017061f1279393a43327b9..582b2108da1180fe579afd353ab685e93edef9b2 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2540,8 +2540,8 @@ input[type="submit"].button {
   margin-top: -0.75rem;
 }
 
-.title + .subtitle {
-  margin-top: -1.25rem;
+.title:not(.is-spaced) + .subtitle {
+  margin-top: -1.5rem;
 }
 
 .title.is-1 {
@@ -2579,7 +2579,7 @@ input[type="submit"].button {
   color: #363636;
 }
 
-.subtitle + .title {
+.subtitle:not(.is-spaced) + .title {
   margin-top: -1.5rem;
 }
 

diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index bd07d2cea006ac65a54f19746549a560659cbfbf..a39c159666d684cd0a90fd9180301cb4e3da16d6 100644 (file)
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -27,7 +27,8 @@ doc-subtab: form
         <li><code>.button</code></li>
         <li><code>.help</code></li>
       </ul>
-      <p>When combining several controls in a <strong>form</strong>, use the <code>.control</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
+      <p>Each of them should be wrapped in a <code>.control</code> container.<br>
+      When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
     </div>
 
 {% capture form_example %}

diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html
index 18dbd3f7b9650ae35b9113c7a058d30e64d74bf2..ec40a9a3e4775f77a6edaec38dd129e2d4eda98e 100644 (file)
--- a/docs/documentation/elements/title.html
+++ b/docs/documentation/elements/title.html
@@ -12,7 +12,9 @@ doc-subtab: title
     <h2 class="subtitle">
       Simple <strong>headings</strong> to add depth to your page
     </h2>
+
     <hr>
+
     <div class="columns">
       <div class="column">
         <p>There are <strong>2 types</strong> of heading:</p>
@@ -28,7 +30,9 @@ doc-subtab: title
 {% endhighlight %}
       </div>
     </div>
+
     <hr>
+
     <div class="columns">
       <div class="column">
         <p>There are <strong>6 sizes</strong> available:</p>
@@ -52,6 +56,7 @@ doc-subtab: title
 {% endhighlight %}
       </div>
     </div>
+
     <div class="columns">
       <div class="column"></div>
       <div class="column">
@@ -73,7 +78,9 @@ doc-subtab: title
 {% endhighlight %}
       </div>
     </div>
+
     <hr>
+
     <div class="columns">
       <div class="column">
         <div class="content">
@@ -105,6 +112,45 @@ doc-subtab: title
 
 <p class="title is-3">Title 3</p>
 <p class="subtitle is-5">Subtitle 5</p>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            <span class="tag is-success">New!</span>
+          </p>
+          <p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="block">
+          <p class="title is-1 is-spaced">Title 1</p>
+          <p class="subtitle is-3">Subtitle 3</p>
+        </div>
+        <div class="block">
+          <p class="title is-2 is-spaced">Title 2</p>
+          <p class="subtitle is-4">Subtitle 4</p>
+        </div>
+        <div class="block">
+          <p class="title is-3 is-spaced">Title 3</p>
+          <p class="subtitle is-5">Subtitle 5</p>
+        </div>
+      </div>
+      <div class="column">
+{% highlight html %}
+<p class="title is-1 is-spaced">Title 1</p>
+<p class="subtitle is-3">Subtitle 3</p>
+
+<p class="title is-2 is-spaced">Title 2</p>
+<p class="subtitle is-4">Subtitle 4</p>
+
+<p class="title is-3 is-spaced">Title 3</p>
+<p class="subtitle is-5">Subtitle 5</p>
 {% endhighlight %}
       </div>
     </div>

diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html
index 82e3b8eb14daa008f40013dfae1f1c80cd7d2f69..0440570c839f8a965187039e6040d4a1e65df11d 100644 (file)
--- a/docs/documentation/overview/responsiveness.html
+++ b/docs/documentation/overview/responsiveness.html
@@ -36,7 +36,7 @@ doc-subtab: responsiveness
         <li><code>tablet</code>: from <code>769px</code></li>
         <li><code>desktop</code>: from <code>1000px</code></li>
         <li><code>widescreen</code>: from <code>1192px</code></li>
-        <li><code>fullhd</code>: from <code>1384px</code></li>
+        <li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1384px</code></li>
       </ul>
       <p>Bulma uses 9 responsive mixins:</p>
       <ul>
@@ -73,6 +73,7 @@ doc-subtab: responsiveness
           from <code>1192px</code> and until <code>1383px</code>
         </li>
         <li>
+          <span class="tag is-success">New!</span>
           <code>=fullhd</code><br>
           from <code>1384px</code>
         </li>

diff --git a/sass/elements/title.sass b/sass/elements/title.sass
index 7414a6b731060050009c33fb9babf3975aa787f0..52c051ef10530f9df9fba78a299d58256f726bca 100644 (file)
--- a/sass/elements/title.sass
+++ b/sass/elements/title.sass
@@ -29,8 +29,8 @@ $subtitle-weight:   $weight-light !default
     color: inherit
   & + .highlight
     margin-top: -0.75rem
-  & + .subtitle
-    margin-top: -1.25rem
+  &:not(.is-spaced) + .subtitle
+    margin-top: -1.5rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
@@ -44,7 +44,7 @@ $subtitle-weight:   $weight-light !default
   line-height: 1.25
   strong
     color: $subtitle-strong
-  & + .title
+  &:not(.is-spaced) + .title
     margin-top: -1.5rem
   // Colors
   @each $size in $sizes