Improve components documentation

diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html
index 42b4d75964a75f89daf3dcf68e22a21e982b9de3..ccb24783bc36f3a57a9ed20044ba8d7522ef2e28 100644 (file)
--- a/docs/documentation/components/breadcrumb.html
+++ b/docs/documentation/components/breadcrumb.html
@@ -164,8 +164,9 @@ meta:
 {% endcapture %}
 
 <div class="content">
-  <p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
-  <p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
+  <p>
+    The Bulma <strong>breadcrumb</strong> is a simple navigation component that only requires a <code>breadcrumb</code> container and a <code>ul</code> list. The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.
+  </p>
   <p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
 </div>
 
@@ -175,7 +176,7 @@ meta:
 {% include elements/anchor.html name="Alignment" %}
 
 <div class="content">
-  <p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
+  <p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>breadcrumb</code> container.</p>
 </div>
 
 {% include elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}

diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html
index c5d3c1ce5001503388af52c38a5ead5e866e25c4..f59e21059daa809b92141f327d92e6f26fb06a0c 100644 (file)
--- a/docs/documentation/components/menu.html
+++ b/docs/documentation/components/menu.html
@@ -51,6 +51,23 @@ meta:
 </aside>
 {% endcapture %}
 
+<div class="content">
+  <p>
+    The Bulma <code>menu</code> is a vertical navigation component that comprises:
+  </p>
+  <ul>
+    <li>
+      the <code>menu</code> container
+    </li>
+    <li>
+      informative <code>menu-label</code> labels
+    </li>
+    <li>
+      interactive <code>menu-list</code> lists that can be nested up to 2 levels
+    </li>
+  </ul>
+</div>
+
 {% include elements/snippet.html content=menu_example size="one-third" %}
 
 {% include elements/variables.html type='component' %}

diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html
index b595b33db9f7891c08e57dd4017d29764ac02a9c..db1f52b6b4ad2d905f73fe99bcb5a084e2f7a483 100644 (file)
--- a/docs/documentation/components/message.html
+++ b/docs/documentation/components/message.html
@@ -117,22 +117,53 @@ meta:
 {% endfor %}
 {% endcapture %}
 
+<div class="content">
+  <p>
+    The Bulma <code>message</code> is a multi-part component:
+  </p>
+  <ul>
+    <li>
+      the <code>message</code> container
+    </li>
+    <li>
+      the optional <code>message-header</code> that can hold a title and a <code>delete</code> element
+    </li>
+    <li>
+      the <code>message-body</code> for the longer body of the message
+    </li>
+  </ul>
+</div>
+
 {% include elements/snippet.html content=message_example %}
 
 {% include elements/anchor.html name="Colors" %}
 
+<div class="content">
+  <p>
+    The message component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
+  </p>
+</div>
+
 {% include elements/snippet.html content=message_colors_example %}
 
 {% include elements/anchor.html name="Message body only" %}
 
 <div class="content">
-  <p>You can <strong>omit</strong> the message header:</p>
+  <p>
+    You can remove the <code>message-header</code> if you don't need it, which will add a left border to the <code>message-body</code>:
+  </p>
 </div>
 
 {% include elements/snippet.html content=message_body_example %}
 
 {% include elements/anchor.html name="Sizes" %}
 
+<div class="content">
+  <p>
+    You can add one of <strong>3 size modifiers</strong> to the <code>message</code> component:
+  </p>
+</div>
+
 {% include elements/snippet.html content=message_small %}
 
 {% include elements/snippet.html content=message_normal %}

diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
index 299641e84c4fa5f2707a13e5ed95e20651d3f626..a637d2388bc8663b105a26882ea72806fab9cd6c 100644 (file)
--- a/docs/documentation/components/tabs.html
+++ b/docs/documentation/components/tabs.html
@@ -354,8 +354,26 @@ meta:
 {% endcapture %}
 
 <div class="content">
-  <p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code>&lt;ul&gt;</code> list.<br>
-    The <strong>default</strong> tabs style has a single border at the bottom.</p>
+  <p>
+    The Bulma <code>tabs</code> are a straightforward navigation component that come in a variety of versions. They only require the following structure:
+  </p>
+  <ul>
+    <li>
+      a <code>tabs</code> container
+    </li>
+    <li>
+      a <code>&lt;ul&gt;</code> HTML element
+    </li>
+    <li>
+      a list of <code>&lt;li&gt;</code> HTML element
+    </li>
+    <li>
+      <code>&lt;a&gt;</code> HTML anchor elements for each link
+    </li>
+  </ul>
+  <p>
+    The <strong>default</strong> tabs style has a single border at the bottom.
+  </p>
 </div>
 
 {% include elements/snippet.html content=tabs_example horizontal=true %}

diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html
index 2368ed41bed9e74da4def4169fecb56b0bed098c..729f5d2c40190f5a654cfdeea5c57964fe135e3d 100644 (file)
--- a/docs/documentation/elements/box.html
+++ b/docs/documentation/elements/box.html
@@ -56,7 +56,7 @@ meta:
 
 <div class="content">
   <p>
-    The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
+    The <code>box</code> element is simply a container with a shadow, a border, a radius, and some padding.
     <br>
     For example, you can include a media object:
   </p>

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index 9a7e5515a791c80b2a32507f50c5d8790320d869..90f7b989dfa592fc0bd55aa6d202ac5da69be4b8 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -512,7 +512,7 @@ meta:
 
 <div class="content">
   <p>
-    The <code>.button</code> class can be used on:
+    The <code>button</code> class can be used on:
   </p>
   <ul>
     <li>
@@ -585,7 +585,7 @@ meta:
 
 <div class="content">
   <p>
-    You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>.buttons</code> parent, and applying one of 3 modifiers:
+    You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>buttons</code> parent, and applying one of 3 modifiers:
   </p>
   <ul>
     <li>
@@ -674,13 +674,13 @@ meta:
   </p>
   <ul>
     <li>
-      <code>:hover</code> and <code>.is-hovered</code>
+      <code>:hover</code> and <code>is-hovered</code>
     </li>
     <li>
-      <code>:focus</code> and <code>.is-focused</code>
+      <code>:focus</code> and <code>is-focused</code>
     </li>
     <li>
-      <code>:active</code> and <code>.is-active</code>
+      <code>:active</code> and <code>is-active</code>
     </li>
   </ul>
   <p>
@@ -708,7 +708,7 @@ meta:
 
 <div class="content">
   <p>
-    You can very easily turn a button into its <strong>loading</strong> version by appending the <code>.is-loading</code> modifier. You don't even need to remove the inner text, which allows the button to maintain its <strong>original size</strong> between its default and loading states.
+    You can very easily turn a button into its <strong>loading</strong> version by appending the <code>is-loading</code> modifier. You don't even need to remove the inner text, which allows the button to maintain its <strong>original size</strong> between its default and loading states.
   </p>
 </div>
 
@@ -828,7 +828,7 @@ meta:
   <div class="column">
     <div class="content">
       <p>
-        You can create a <strong>list of buttons</strong> by using the <code>.buttons</code> container.
+        You can create a <strong>list of buttons</strong> by using the <code>buttons</code> container.
       </p>
     </div>
     <div class="bd-example">
@@ -860,7 +860,7 @@ meta:
   <div class="column">
     <div class="content">
       <p>
-        You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
+        You can <strong>attach buttons together</strong> with the <code>has-addons</code> modifier.
       </p>
     </div>
     <div class="bd-example">

diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html
index 14a49b28d23566506712f52500fffd674618d2f2..da65273b805d82b948b611b17ffc569ee7fc71ae 100644 (file)
--- a/docs/documentation/elements/delete.html
+++ b/docs/documentation/elements/delete.html
@@ -51,7 +51,7 @@ meta:
 
 <div class="content">
   <p>
-    The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
+    The <code>delete</code> element is a stand-alone element that can be used in different contexts.
   </p>
   <p>
     On its own, it's a simple circle with a cross:

diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index 71b739d0a9beab4fd3a008ae409d44cb969fe2f6..7f2354673cc873ef4f72a9970ee08915537c6970 100644 (file)
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -94,7 +94,8 @@ meta:
 
 <div class="content">
   <p>
-    By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
+    By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.
+  </p>
 </div>
 
 {% include elements/anchor.html name="Colors" %}

diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html
index ddb44d840a915bb71713c664524d0dadab0ab016..008560ff796ea96425a5f4586ff6d0347e11bc56 100644 (file)
--- a/docs/documentation/elements/image.html
+++ b/docs/documentation/elements/image.html
@@ -47,7 +47,7 @@ meta:
 {% endcapture %}
 
 <div class="content">
-  <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
+  <p>Because images can take a few seconds to load (or not at all), use the <code>image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
 </div>
 
 {% include elements/snippet.html content=image %}
@@ -73,7 +73,7 @@ meta:
 {% include elements/anchor.html name="Rounded images" %}
 
 <div class="content">
-  <p>You can also make rounded images, using <code>.is-rounded</code> class:</p>
+  <p>You can also make rounded images, using <code>is-rounded</code> class:</p>
 </div>
 
 {% include elements/snippet.html content=rounded_image %}
@@ -178,7 +178,7 @@ meta:
 </table>
 
 <div class="content">
-  <p>The <code>.image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
+  <p>The <code>image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
   <br>If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.</p>
 </div>
 
@@ -188,7 +188,7 @@ meta:
 
 <div class="content">
   <p>
-    You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>.has-ratio</code> modifier to a resizable element.
+    You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>has-ratio</code> modifier to a resizable element.
   </p>
   <p>
     For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see how the ratio is maintained.

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index 7ded58e26bce54ac2db738a3bd808930e4675046..c84de158fe3934ee766d515bf8547feda0e93025 100644 (file)
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -54,7 +54,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 <div class="content">
   <p>
-    The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the <code>.delete</code> element.
+    The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the <code>delete</code> element.
   </p>
 </div>
 

diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html
index 6fe088954021335fe2ef2bacfe583919f6764a44..266e3920072959ba7e9728fe3156b631720f337d 100644 (file)
--- a/docs/documentation/elements/table.html
+++ b/docs/documentation/elements/table.html
@@ -315,10 +315,13 @@ meta:
 {% endcapture %}
 
 <div class="content">
-  <p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
+  <p>
+    You can create a <strong>Bulma table</strong> simply by attaching a single <code>table</code> CSS class on a <code>&lt;table&gt;</code> HTML element with the following structure:
+  </p>
+
   <ul>
     <li>
-      <code>table</code> the main <strong>container</strong>
+      <code>&lt;table class="table"&gt;</code> as the main <strong>container</strong>
       <ul>
         <li>
           <code>thead</code> the optional <strong>top</strong> part of the table

diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html
index 530eb5ea0757082ff0ba717a46dc30c8ee463cd5..592142aa72ef2ca3368dedf697409d0b153a06cf 100644 (file)
--- a/docs/documentation/elements/tag.html
+++ b/docs/documentation/elements/tag.html
@@ -406,7 +406,7 @@ meta:
   <div class="column">
     <div class="content">
       <p>
-        You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
+        You can now create a <strong>list of tags</strong> with the <code>tags</code> container.
       </p>
     </div>
     <div class="bd-example">
@@ -438,7 +438,7 @@ meta:
   <div class="column">
     <div class="content">
       <p>
-        You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
+        You can <strong>attach tags together</strong> with the <code>has-addons</code> modifier.
       </p>
     </div>
     <div class="bd-example">
@@ -470,7 +470,7 @@ meta:
   <div class="column">
     <div class="content">
       <p>
-        If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
+        If you want to attach <code>tags</code> containers <strong>together</strong>, simply use the <code>field</code> element with the <code>is-grouped</code> and <code>is-grouped-multiline</code> modifiers.
       </p>
     </div>
     <div class="bd-example">

diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html
index 55614e8ecdfcafd4cd0e1500a5bd4087ed059ee6..d3f151edd69a4f9f441073717be6f5897126c292 100644 (file)
--- a/docs/documentation/elements/title.html
+++ b/docs/documentation/elements/title.html
@@ -65,10 +65,10 @@ meta:
       <p>There are <strong>2 types</strong> of heading:</p>
       <ul>
         <li>
-          <code>.title</code>
+          <code>title</code>
         </li>
         <li>
-          <code>.subtitle</code>
+          <code>subtitle</code>
         </li>
       </ul>
     </div>