Improve layout docs

Author: jgthms

docs/documentation/elements/tag.html

@@ -33,6 +33,15 @@
 <span class="tag is-danger">Danger</span>
 {% endcapture %}
 
+{% capture tags_light_colors %}
+<span class="tag is-primary is-light">Primary</span>
+<span class="tag is-link is-light">Link</span>
+<span class="tag is-info is-light">Info</span>
+<span class="tag is-success is-light">Success</span>
+<span class="tag is-warning is-light">Warning</span>
+<span class="tag is-danger is-light">Danger</span>
+{% endcapture %}
+
 {% capture sizes %}
 <span class="tag is-link is-normal">Normal</span>
 <span class="tag is-primary is-medium">Medium</span>
@@ -133,7 +142,7 @@
   <div class="control">
     <div class="tags has-addons">
       <span class="tag is-dark">npm</span>
-      <span class="tag is-info">0.5.0</span>
+      <span class="tag is-info">{{ site.version }}</span>
     </div>
   </div>
 
@@ -213,6 +222,12 @@
 </div>
 {% endcapture %}
 
+<div class="content">
+  <p>
+    The Bulma <strong>tag</strong> is a small but versatile element. It's very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.
+  </p>
+</div>
+
 <div class="columns">
   <div class="column is-4">
     By default, a <strong>tag</strong> is a 1.5rem high label.
@@ -288,6 +303,49 @@
   </div>
 </div>
 
+{% include elements/new-tag.html version="0.8.0" %}
+
+<div class="columns">
+  <div class="column is-4">
+    <p>
+      You can now choose the <strong>light version</strong> of a color.
+    </p>
+  </div>
+  <div class="column is-2">
+    <p class="field">
+      <span class="tag is-primary is-light">
+        Primary
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-link is-light">
+        Link
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-info is-light">
+        Info
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-success is-light">
+        Success
+      </span>
+    </p>
+    <p class="field">
+      <span class="tag is-warning is-light">
+        Warning
+      </span>
+    </p>
+    <span class="tag is-danger is-light">
+      Danger
+    </span>
+  </div>
+  <div class="column is-6">
+    {% highlight html %}{{ tags_light_colors }}{% endhighlight %}
+  </div>
+</div>
+
 {% include elements/anchor.html name="Sizes" %}
 
 <div class="columns">

docs/documentation/layout/container.html

@@ -45,12 +45,12 @@
 {% endcapture %}
 
 <div class="content">
-  <p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
+  <p>The <code>container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
   <ul>
-    <li><code>.navbar</code></li>
-    <li><code>.hero</code></li>
-    <li><code>.section</code></li>
-    <li><code>.footer</code></li>
+    <li><code>navbar</code></li>
+    <li><code>hero</code></li>
+    <li><code>section</code></li>
+    <li><code>footer</code></li>
   </ul>
   <p>
     The containers <strong>width</strong> for each <strong>breakpoint</strong> is the result
@@ -76,7 +76,8 @@
 
 {% highlight html %}{{ container_example }}{% endhighlight %}
 
-<h3 class="title is-4">Fluid container</h3>
+{% include elements/anchor.html name="Fluid container" %}
+
 <div class="content">
   <p>If you don't want to have a maximum width but want to keep the 32px margin on the left and
      right sides, add the <code>is-fluid</code> modifier:</p>
@@ -92,10 +93,11 @@ <h3 class="title is-4">Fluid container</h3>
 
 {% highlight html %}{{ container_fluid_example }}{% endhighlight %}
 
-<h3 class="title is-4">Breakpoint containers</h3>
+{% include elements/anchor.html name="Breakpoint containers" %}
+
 <div class="content">
   <p>
-    With the two modifiers <code>.is-widescreen</code> and <code>.is-fullhd</code>, you can have a <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
+    With the two modifiers <code>is-widescreen</code> and <code>is-fullhd</code>, you can have a <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
   </p>
 </div>
 

docs/documentation/layout/footer.html

@@ -22,6 +22,12 @@
 </footer>
 {% endcapture %}
 
+<div class="content">
+  <p>
+    The Bulma <strong>footer</strong> is a simple container, with lots of bottom padding, making it great as the last element of any webpage.
+  </p>
+</div>
+
 {% include elements/snippet.html content=footer_example horizontal=true more=true %}
 
 {% include elements/variables.html %}