From: Jeremy Thomas Date: Sun, 13 Oct 2019 18:20:44 +0000 (+0100) Subject: Improve components documentation X-Git-Tag: 0.8.0~7 X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=e5390369a9bf5156c859d1b10d34255058c3f350;p=thirdparty%2Fbulma.git Improve components documentation --- diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index 42b4d7596..ccb24783b 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -164,8 +164,9 @@ meta: {% endcapture %}
-

The breadcrumb component only requires a .breadcrumb container and a ul list.

-

The dividers are automatically created in the content of the ::before pseudo-element of li tags.

+

+ The Bulma breadcrumb is a simple navigation component that only requires a breadcrumb container and a ul list. The dividers are automatically created in the content of the ::before pseudo-element of li tags. +

You can inform the current page using the is-active modifier in a li tag. It will disable the navigation of inner links.

@@ -175,7 +176,7 @@ meta: {% include elements/anchor.html name="Alignment" %}
-

For alternative alignments, use the is-centered and is-right modifiers on the .breadcrumb container.

+

For alternative alignments, use the is-centered and is-right modifiers on the breadcrumb container.

{% 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 c5d3c1ce5..f59e21059 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -51,6 +51,23 @@ meta: {% endcapture %} +
+

+ The Bulma menu is a vertical navigation component that comprises: +

+ +
+ {% 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 b595b33db..db1f52b6b 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -117,22 +117,53 @@ meta: {% endfor %} {% endcapture %} +
+

+ The Bulma message is a multi-part component: +

+ +
+ {% include elements/snippet.html content=message_example %} {% include elements/anchor.html name="Colors" %} +
+

+ The message component is available in all the different colors defined by the $colors Sass map. +

+
+ {% include elements/snippet.html content=message_colors_example %} {% include elements/anchor.html name="Message body only" %}
-

You can omit the message header:

+

+ You can remove the message-header if you don't need it, which will add a left border to the message-body: +

{% include elements/snippet.html content=message_body_example %} {% include elements/anchor.html name="Sizes" %} +
+

+ You can add one of 3 size modifiers to the message component: +

+
+ {% 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 299641e84..a637d2388 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -354,8 +354,26 @@ meta: {% endcapture %}
-

Tabs only require a tabs container and a <ul> list.
- The default tabs style has a single border at the bottom.

+

+ The Bulma tabs are a straightforward navigation component that come in a variety of versions. They only require the following structure: +

+ +

+ The default tabs style has a single border at the bottom. +

{% include elements/snippet.html content=tabs_example horizontal=true %} diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html index 2368ed41b..729f5d2c4 100644 --- a/docs/documentation/elements/box.html +++ b/docs/documentation/elements/box.html @@ -56,7 +56,7 @@ meta:

- The .box element is simply a container with a shadow, a border, a radius, and some padding. + The box element is simply a container with a shadow, a border, a radius, and some padding.
For example, you can include a media object:

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 9a7e5515a..90f7b989d 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -512,7 +512,7 @@ meta:

- The .button class can be used on: + The button class can be used on:

  • @@ -585,7 +585,7 @@ meta:

    - You can change the size of multiple buttons at once by wrapping them in a .buttons parent, and applying one of 3 modifiers: + You can change the size of multiple buttons at once by wrapping them in a buttons parent, and applying one of 3 modifiers:

    • @@ -674,13 +674,13 @@ meta:

      • - :hover and .is-hovered + :hover and is-hovered
      • - :focus and .is-focused + :focus and is-focused
      • - :active and .is-active + :active and is-active

      @@ -708,7 +708,7 @@ meta:

      - You can very easily turn a button into its loading version by appending the .is-loading modifier. You don't even need to remove the inner text, which allows the button to maintain its original size between its default and loading states. + You can very easily turn a button into its loading version by appending the is-loading modifier. You don't even need to remove the inner text, which allows the button to maintain its original size between its default and loading states.

      @@ -828,7 +828,7 @@ meta:

      - You can create a list of buttons by using the .buttons container. + You can create a list of buttons by using the buttons container.

      @@ -860,7 +860,7 @@ meta:

      - You can attach buttons together with the .has-addons modifier. + You can attach buttons together with the has-addons modifier.

      diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html index 14a49b28d..da65273b8 100644 --- a/docs/documentation/elements/delete.html +++ b/docs/documentation/elements/delete.html @@ -51,7 +51,7 @@ meta:

      - The .delete element is a stand-alone element that can be used in different contexts. + The delete element is a stand-alone element that can be used in different contexts.

      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 71b739d0a..7f2354673 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -94,7 +94,8 @@ meta:

      - By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

      + By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size. +

      {% include elements/anchor.html name="Colors" %} diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html index ddb44d840..008560ff7 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -47,7 +47,7 @@ meta: {% endcapture %}
      -

      Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

      +

      Because images can take a few seconds to load (or not at all), use the image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

      {% include elements/snippet.html content=image %} @@ -73,7 +73,7 @@ meta: {% include elements/anchor.html name="Rounded images" %}
      -

      You can also make rounded images, using .is-rounded class:

      +

      You can also make rounded images, using is-rounded class:

      {% include elements/snippet.html content=rounded_image %} @@ -178,7 +178,7 @@ meta:
      -

      The .image container will usually take up the whole width while maintaining the perfect ratio. +

      The image container will usually take up the whole width while maintaining the perfect ratio.
      If it doesn't, you can force it by appending the is-fullwidth modifier.

      @@ -188,7 +188,7 @@ meta:

      - You can apply a specific ratio on any element other than an img, simply by applying the .has-ratio modifier to a resizable element. + You can apply a specific ratio on any element other than an img, simply by applying the has-ratio modifier to a resizable element.

      For example, you can apply a 16by9 ratio on an iframe. 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 7ded58e26..c84de158f 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -54,7 +54,7 @@ document.addEventListener('DOMContentLoaded', () => {

      - 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 .delete 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 delete element.

      diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 6fe088954..266e39200 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -315,10 +315,13 @@ meta: {% endcapture %}
      -

      You simply need to attach a single .table CSS class on a <table> with the following structure:

      +

      + You can create a Bulma table simply by attaching a single table CSS class on a <table> HTML element with the following structure: +

      +
      • - table the main container + <table class="table"> as the main container
        • thead the optional top part of the table diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index 530eb5ea0..592142aa7 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -406,7 +406,7 @@ meta:

          - You can now create a list of tags with the .tags container. + You can now create a list of tags with the tags container.

          @@ -438,7 +438,7 @@ meta:

          - You can attach tags together with the .has-addons modifier. + You can attach tags together with the has-addons modifier.

          @@ -470,7 +470,7 @@ meta:

          - If you want to attach .tags containers together, simply use the .field element with the .is-grouped and .is-grouped-multiline modifiers. + If you want to attach tags containers together, simply use the field element with the is-grouped and is-grouped-multiline modifiers.

          diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html index 55614e8ec..d3f151edd 100644 --- a/docs/documentation/elements/title.html +++ b/docs/documentation/elements/title.html @@ -65,10 +65,10 @@ meta:

          There are 2 types of heading:

          • - .title + title
          • - .subtitle + subtitle