Add spaced title

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">

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;
 }
 

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 %}

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>

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>

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