diff --git a/docs/_data/links.json b/docs/_data/links.json index 187dc34e..f7abf855 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -43,9 +43,54 @@ "button": { "name": "Button", "path": "/documentation/elements/button" + }, + "components": { + "name": "Components", + "path": "/documentation/components" + }, + "components-breadcrumb": { + "name": "Breadcrumb", + "path": "/documentation/components/breadcrumb" + }, + "components-card": { + "name": "Card", + "path": "/documentation/components/card" + }, + "components-dropdown": { + "name": "Dropdown", + "path": "/documentation/components/dropdown" + }, + "components-menu": { + "name": "Menu", + "path": "/documentation/components/menu" + }, + "components-message": { + "name": "Message", + "path": "/documentation/components/message" + }, + "components-modal": { + "name": "Modal", + "path": "/documentation/components/modal" + }, + "components-navbar": { + "name": "Navbar", + "path": "/documentation/components/navbar" + }, + "components-pagination": { + "name": "Pagination", + "path": "/documentation/components/pagination" + }, + "components-panel": { + "name": "Panel", + "path": "/documentation/components/panel" + }, + "components-tabs": { + "name": "Tabs", + "path": "/documentation/components/tabs" } }, "order": { - "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"] + "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], + "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] } } diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index bd4b64ec..a6e56f7a 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -1,12 +1,21 @@ --- title: Breadcrumb +subtitle: "A simple breadcrumb component to improve your navigation experience" layout: documentation doc-tab: components doc-subtab: breadcrumb +breadcrumb: +- home +- documentation +- components +- components-breadcrumb +meta: +- since: "0.4.3" +- variables: true +- colors: false +- sizes: true --- -{% include subnav/subnav-components.html %} - {% capture breadcrumb_example %} {% 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.

+

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

+
-

Breadcrumb

-

- A simple breadcrumb component to improve your navigation experience -

- {% - include meta.html - since="0.4.3" - variables=true - colors=false - sizes=true - %} +
+{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} -
+{% include anchor.html name="Alignment" %} -
-

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.

-

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

-
+
+

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

+
-
- {% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} - {% include anchor.html name="Alignment" %} +{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} -
-

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

-
+{% include anchor.html name="Icons" %} - {% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} +
+

You can use any of the Font Awesome icons.

+
- {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} - {% include anchor.html name="Icons" %} +{% include anchor.html name="Alternative separators" %} -
-

You can use any of the Font Awesome icons.

-
+
+

You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

+
- {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} - {% include anchor.html name="Alternative separators" %} +{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} -
-

You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

-
+{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} +{% include anchor.html name="Sizes" %} - {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} +
+

You can choose between 3 additional sizes: is-small is-medium and is-large.

+
- {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} - {% include anchor.html name="Sizes" %} +{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} -
-

You can choose between 3 additional sizes: is-small is-medium and is-large.

-
+{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} - - {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} - - {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index 466a12db..c74fb681 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -1,8 +1,18 @@ --- title: Card +subtile: "An all-around flexible and composable component" layout: documentation doc-tab: components doc-subtab: card +breadcrumb: +- home +- documentation +- components +- components-card +meta: +- variables: true +- colors: false +- sizes: false --- {% capture card_example %} @@ -89,102 +99,84 @@ doc-subtab: card {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Card

-

An all-around flexible and composable component

- {% - include meta.html - variables=true - colors=false - sizes=false - %} - -
- -
-

The card component comprises several elements that you can mix and match:

+
+

The card component comprises several elements that you can mix and match:

+
    +
  • + card: the main container
    • - card: the main container + card-header: a horizontal bar with a shadow
      • - card-header: a horizontal bar with a shadow -
          -
        • - card-header-title: a left-aligned bold text -
          • -
        • - card-header-icon: a placeholder for an icon -
          • -
        + card-header-title: a left-aligned bold text
      • - card-image: a fullwidth container for a responsive image + card-header-icon: a placeholder for an icon
        • +
      +
      • +
    • + card-image: a fullwidth container for a responsive image +
      • +
    • + card-content: a multi-purpose container for any other element +
      • +
    • + card-footer: a horizontal list of controls +
      • - card-content: a multi-purpose container for any other element -
        • -
      • - card-footer: a horizontal list of controls -
          -
        • - card-footer-item: a repeatable list item -
          • -
        + card-footer-item: a repeatable list item
    -
+ + +
-
- New - 0.5.3 -
+
+ New + 0.5.3 +
-
-

- You can center the card-header-title by appending the is-centered modifier. -

-
+
+

+ You can center the card-header-title by appending the is-centered modifier. +

+
-
- -
-
- {{card_example}} -
-
- {% highlight html %}{{card_example}}{% endhighlight %} -
-
- -
- -
-
- {{card_header_example}} -
-
- {% highlight html %}{{card_header_example}}{% endhighlight %} -
-
- -
- -
-
- {{card_title_example}} -
-
- {% highlight html %}{{card_title_example}}{% endhighlight %} -
-
- - {% include variables.html type='component' %} +
+
+
+ {{card_example}}
-
+
+ {% highlight html %}{{card_example}}{% endhighlight %} +
+ + +
+ +
+
+ {{card_header_example}} +
+
+ {% highlight html %}{{card_header_example}}{% endhighlight %} +
+
+ +
+ +
+
+ {{card_title_example}} +
+
+ {% highlight html %}{{card_title_example}}{% endhighlight %} +
+
+ +{% include variables.html type='component' %} diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index f470f487..07f60058 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -1,8 +1,18 @@ --- title: Dropdown +subtitle: "An interactive dropdown menu for discoverable content" layout: documentation doc-tab: components doc-subtab: dropdown +breadcrumb: +- home +- documentation +- components +- components-dropdown +meta: +- colors: false +- sizes: false +- variables: true --- {% capture dropdown_example %} @@ -188,161 +198,138 @@ doc-subtab: dropdown {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
- -

Dropdown

-

- An interactive dropdown menu for discoverable content -

- {% - include meta.html - new=true - since="0.4.4" - colors=false - sizes=false - variables=true - %} - -
- -
-

- The dropdown component is a container for a dropdown button and a dropdown menu. -

+
+

+ The dropdown component is a container for a dropdown button and a dropdown menu. +

+
    +
  • + dropdown the main container
    • - dropdown the main container + dropdown-trigger the container for a button +
      • +
    • + dropdown-menu the toggable menu, hidden by default
      • - dropdown-trigger the container for a button -
        • -
      • - dropdown-menu the toggable menu, hidden by default + dropdown-content the dropdown box, with a white background and a shadow
        • - dropdown-content the dropdown box, with a white background and a shadow -
            -
          • - dropdown-item each single item of the dropdown, which can either be a a or a div -
            • -
          • - dropdown-divider a horizontal line to separate dropdown items -
            • -
          + dropdown-item each single item of the dropdown, which can either be a a or a div +
          • +
        • + dropdown-divider a horizontal line to separate dropdown items
    -
+ + +
-
-
- {{dropdown_example}} -
-
- {% highlight html %}{{dropdown_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_example}} +
+
+ {% highlight html %}{{dropdown_example}}{% endhighlight %} +
+
- {% include anchor.html name="Dropdown content" %} +{% include anchor.html name="Dropdown content" %} -
-

- While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content. -

-
+
+

+ While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content. +

+
-
-
- {{dropdown_content_example}} -
-
- {% highlight html %}{{dropdown_content_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_content_example}} +
+
+ {% highlight html %}{{dropdown_content_example}}{% endhighlight %} +
+
- {% include anchor.html name="Hoverable or Toggable" %} +{% include anchor.html name="Hoverable or Toggable" %} -
-

- The dropdown component has 2 additional modifiers -

-
    -
  • - is-hoverable: the dropdown will show up when hovering the dropdown-trigger -
    • -
  • - is-active: the dropdown will show up all the time -
    • -
-
+
+

+ The dropdown component has 2 additional modifiers +

+
    +
  • + is-hoverable: the dropdown will show up when hovering the dropdown-trigger +
    • +
  • + is-active: the dropdown will show up all the time +
    • +
+
-
-

- While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. -

-
+
+

+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. +

+
-
-
- {{dropdown_click_example}}{{dropdown_info_example}} -
-
- {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_click_example}}{{dropdown_info_example}} +
+
+ {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %} +
+
- {% include anchor.html name="Right aligned" %} +{% include anchor.html name="Right aligned" %} -
-

- You can add the is-right modifier to have a right-aligned dropdown. -

-
+
+

+ You can add the is-right modifier to have a right-aligned dropdown. +

+
-
-
-
-
-
- {{dropdown_left_example}} -
-
-
-
- {{dropdown_right_example}} -
-
+
+
+
+
+
+ {{dropdown_left_example}}
-
- {% highlight html %}{{dropdown_right_example}}{% endhighlight %} +
+
+ {{dropdown_right_example}} +
- - {% include anchor.html name="Dropup" %} - -
-

- You can add the is-up modifier to have a dropdown menu that appears above the dropdown button. -

-
- -
-
- {{ dropdown_up_example }} -
-
- {% highlight html %}{{dropdown_up_example}}{% endhighlight %} -
-
- - {% include variables.html type='component' %} -
-
+
+ {% highlight html %}{{dropdown_right_example}}{% endhighlight %} +
+ + +{% include anchor.html name="Dropup" %} + +
+

+ You can add the is-up modifier to have a dropdown menu that appears above the dropdown button. +

+
+ +
+
+ {{ dropdown_up_example }} +
+
+ {% highlight html %}{{dropdown_up_example}}{% endhighlight %} +
+
+ +{% include variables.html type='component' %} diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index def25cf2..34a83c08 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -1,8 +1,18 @@ --- title: Menu +subtitle: "A simple menu, for any type of vertical navigation" layout: documentation doc-tab: components doc-subtab: menu +breadcrumb: +- home +- documentation +- components +- components-menu +meta: +- colors: false +- sizes: false +- variables: true --- {% capture menu_example %} @@ -42,24 +52,6 @@ doc-subtab: menu {% endcapture %} -{% include subnav/subnav-components.html %} +{% include snippet.html content=menu_example size="one-third" %} -
-
-

Menu

-

A simple menu, for any type of vertical navigation

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- - {% include snippet.html content=menu_example size="one-third" %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index 9e320ed7..c9ef7440 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -1,8 +1,18 @@ --- title: Message +subtitle: "Colored message blocks, to emphasize part of your page" layout: documentation doc-tab: components doc-subtab: message +meta: +- colors: true +- sizes: true +- variables: true +breadcrumb: +- home +- documentation +- components +- components-message --- {% capture message_example %} @@ -108,48 +118,28 @@ doc-subtab: message {% endfor %} {% endcapture %} -{% include subnav/subnav-components.html %} +{% include snippet.html content=message_example %} -
-
-

Messages

-

- Colored message blocks, to emphasize part of your page -

- {% - include meta.html - colors=true - sizes=true - variables=true - %} +{% include anchor.html name="Colors" %} -
+{% include snippet.html content=message_colors_example %} - {% include snippet.html content=message_example %} +{% include anchor.html name="Message body only" %} - {% include anchor.html name="Colors" %} +
+

You can omit the message header:

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

You can omit the message header:

-
+{% include snippet.html content=message_small %} - {% include snippet.html content=message_body_example %} +{% include snippet.html content=message_normal %} - {% include anchor.html name="Sizes" %} +{% include snippet.html content=message_medium %} - {% include snippet.html content=message_small %} +{% include snippet.html content=message_large %} - {% include snippet.html content=message_normal %} - - {% include snippet.html content=message_medium %} - - {% include snippet.html content=message_large %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index 30cd3e1a..c044eb6e 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -1,8 +1,18 @@ --- title: Modal +subtitle: "A classic modal overlay, in which you can include any content you want" layout: documentation doc-tab: components doc-subtab: modal +meta: +- colors: false +- sizes: false +- variables: true +breadcrumb: +- home +- documentation +- components +- components-modal --- {% capture modal %} @@ -46,91 +56,73 @@ doc-subtab: modal {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Modal

-

A classic modal overlay, in which you can include any content you want

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- -
-

The modal structure is very simple:

+
+

The modal structure is very simple:

+
    +
  • + modal: the main container
    • - modal: the main container -
        -
      • - modal-background: a transparent overlay that can act as a click target to close the modal -
        • -
      • - modal-content: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include any content -
        • -
      • - modal-close: a simple cross located in the top right corner -
        • -
      + modal-background: a transparent overlay that can act as a click target to close the modal +
      • +
    • + modal-content: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include any content +
      • +
    • + modal-close: a simple cross located in the top right corner
    -

    - -

    -
+ + +

+ +

+
- {% highlight html %}{{ modal }}{% endhighlight %} +{% highlight html %}{{ modal }}{% endhighlight %} -
-

To activate the modal, just add the is-active modifier on the .modal container

-
- -
-
- No JavaScript -
-
- Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself. -
-
- -
- -

Image modal

- -
-

Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:

-

- Launch image modal -

-
- - {% highlight html %}{{ image_modal }}{% endhighlight %} - -
- -

Modal card

- -
-

If you want a more classic modal, with a head, a body and a foot, use the modal-card.

-

- -

-
- -
- {% highlight html %}{{ modal_card }}{% endhighlight %} -
- - {% include variables.html type='component' %} +
+

To activate the modal, just add the is-active modifier on the .modal container

+
+
+
+ No JavaScript
-
+
+ Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself. +
+ + +
+ +

Image modal

+ +
+

Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:

+

+ Launch image modal +

+
+ +{% highlight html %}{{ image_modal }}{% endhighlight %} + +
+ +

Modal card

+ +
+

If you want a more classic modal, with a head, a body and a foot, use the modal-card.

+

+ +

+
+ +
+ {% highlight html %}{{ modal_card }}{% endhighlight %} +
+ +{% include variables.html type='component' %} + +{% include anchor.html name="Navbar start and navbar end" %} + +
+

+ The navbar-start and navbar-end are the two direct and only children of the navbar-menu. +

+

+ On desktop {% include bp/desktop.html %}: +

+ +

+ Each of them can contain any number of navbar-item. +

+
+ +{% highlight html %}{{navbar_start_end_example}}{% endhighlight %} + +{% include anchor.html name="Navbar item" %} + +
+

+ A navbar-item is a repeatable element that can be: +

+ +

+ It can either be an anchor tag <a> or a <div>, as a direct child of either: +

+ +

+ You can add the modifier class is-expanded to turn it into a full-width element. +

+
+ +{% include anchor.html name="Transparent navbar" %} + +
+

+ To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifier on the navbar component. This will remove any hover or active background from the navbar items. +

+
+ +{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %} + +{% include anchor.html name="Fixed navbar" %} + +{% include elements/new-tag.html version="0.6.1" %} + +
+

+ You can now fix the navbar to either the top or bottom of the page. This is a 2-step process: +

+ +
+ +

Try it out!

+ + + +{% include anchor.html name="Dropdown menu" %} + +
+

+ To create a dropdown menu, you will need 4 elements: +

+ +
+ +
+
+
+ {{ navbar_dropdown_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %} +
+
+ +

+ Show/hide the dropdown with either CSS or JavaScript +

+ +
+

+ The navbar-dropdown is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. How the dropdown is displayed on desktop depends on the parent's class. +

+

+ The navbar-item with the has-dropdown modifier, has 2 additional modifiers +

+ +
+ +
+

+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. +

+
+ +{% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %} + +
+
+
+ {{ navbar_dropdown_hover_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %} +
+
+ +{% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %} + +
+
+
+ {{ navbar_dropdown_active_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %} +
+
+ +

+ Right dropdown +

+ +
+

+ If your parent navbar-item is on the right side, you can position the dropdown to start from the right with the is-right modifier. +

+
+ +{% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %} + +
+
+
+ {{ navbar_dropdown_right_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %} +
+
+ +

+ Dropup +

+ +{% include elements/new-tag.html version="0.6.1" %} + +
+

+ If you're using a navbar at the bottom, like the fixed bottom navbar, you might want to use a dropup menu. Simply add the has-dropdown and has-dropdown-up modifiers to the parent navbar-item. +

+
+ +{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %} + +
+
+
+ {{ navbar_dropup_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropup_example }}{% endhighlight %} +
+
+ +

+ Styles for the dropdown menu +

+ +
+

+ By default, the navbar-dropdown has: +

+ +
+ +
+
+
+ {{ navbar_dropdown_default_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %} +
+
+ +
+

+ When having a transparent navbar, it is preferable to use the boxed version of the dropdown, by using the is-boxed modifier. +

+ +
+ +
+
+
+ {{ navbar_dropdown_boxed_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %} +
+
+ +

+ Active dropdown navbar item +

+ +
+
+
+ {{ navbar_dropdown_item_active_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %} +
+
+ +

+ Dropdown divider +

+ +
+

+ You can add a navbar-divider to display a horizontal rule in a navbar-dropdown. +

+
+ +{% highlight html %}{{ navbar_divider_example }}{% endhighlight %} + +{% include anchor.html name="Colors" %} + +
+ New! + 0.5.2 +
+ +
+

+ You can change the background color of the navbar by using one of the 9 color modifiers: +

+ +
+ +{% highlight html %}{{ navbar_color_markup }}{% endhighlight %} + +
+ {% include examples/navbar-color.html color="primary" %} +
+ +
+ {% include examples/navbar-color.html color="link" %} +
+ +
+ {% include examples/navbar-color.html color="info" %} +
+ +
+ {% include examples/navbar-color.html color="success" %} +
+ +
+ {% include examples/navbar-color.html color="warning" light=true %} +
+ +
+ {% include examples/navbar-color.html color="danger" %} +
+ +
+ {% include examples/navbar-color.html color="black" %} +
+ +
+ {% include examples/navbar-color.html color="dark" %} +
+ +
+ {% include examples/navbar-color.html color="light" light=true %} +
+ +
+ {% include examples/navbar-color.html color="white" light=true %} +
+ +{% include variables.html type='component' %} + diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index fb17d828..b3052e29 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -1,8 +1,18 @@ --- title: Pagination +subtitle: "A responsive, usable, and flexible pagination" layout: documentation doc-tab: components doc-subtab: pagination +breadcrumb: +- home +- documentation +- components +- components-pagination +meta: +- colors: false +- sizes: true +- variables: true --- {% capture pagination_example %} @@ -149,90 +159,72 @@ doc-subtab: pagination {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Pagination

-

A responsive, usable, and flexible pagination

- {% - include meta.html - colors=false - sizes=true - variables=true - %} - -
- -
-

- The pagination component consists of several elements: -

+
+

+ The pagination component consists of several elements: +

+
    +
  • + pagination-previous and pagination-next for incremental navigation +
    • +
  • + pagination-list which displays page items:
    • - pagination-previous and pagination-next for incremental navigation + pagination-link for the page numbers
    • - pagination-list which displays page items: -
        -
      • - pagination-link for the page numbers -
        • -
      • - pagination-ellipsis for range separators -
        • -
      + pagination-ellipsis for range separators
    -

    - All elements are optional so you can compose your pagination as you wish. -

    -
+ + +

+ All elements are optional so you can compose your pagination as you wish. +

+
- {% include snippet.html content=pagination_example horizontal=true more=true %} +{% include snippet.html content=pagination_example horizontal=true more=true %} -
-

- You can disable some links if they are not active, or change the amount of page numbers available. -

-
+
+

+ You can disable some links if they are not active, or change the amount of page numbers available. +

+
- {% include snippet.html content=pagination_options_example horizontal=true more=true %} +{% include snippet.html content=pagination_options_example horizontal=true more=true %} -
-

- By default on tablet, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers. -

-
+
+

+ By default on tablet, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers. +

+
- {% include snippet.html content=pagination_centered_example horizontal=true more=true %} +{% include snippet.html content=pagination_centered_example horizontal=true more=true %} - {% include snippet.html content=pagination_right_example horizontal=true more=true %} +{% include snippet.html content=pagination_right_example horizontal=true more=true %} - {% include anchor.html name="Styles" %} +{% include anchor.html name="Styles" %} - {% include elements/new-tag.html version="0.6.2" %} +{% include elements/new-tag.html version="0.6.2" %} -

- Add the is-rounded modifier to have rounded pagination items. -

+

+ Add the is-rounded modifier to have rounded pagination items. +

- {% include snippet.html content=pagination_rounded_example horizontal=true more=true %} +{% include snippet.html content=pagination_rounded_example horizontal=true more=true %} - {% include anchor.html name="Sizes" %} +{% include anchor.html name="Sizes" %} -

- The pagination comes in 3 additional sizes.
- You only need to append the modifier is-small, is-medium, or is-large to the pagination component. -

+

+ The pagination comes in 3 additional sizes.
+ You only need to append the modifier is-small, is-medium, or is-large to the pagination component. +

- {% include snippet.html content=pagination_small_example horizontal=true more=true %} +{% include snippet.html content=pagination_small_example horizontal=true more=true %} - {% include snippet.html content=pagination_medium_example horizontal=true more=true %} +{% include snippet.html content=pagination_medium_example horizontal=true more=true %} - {% include snippet.html content=pagination_large_example horizontal=true more=true %} +{% include snippet.html content=pagination_large_example horizontal=true more=true %} - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index 93658565..0a169ce7 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -1,8 +1,18 @@ --- title: Panel +subtitle: "A composable panel, for compact controls" layout: documentation doc-tab: components doc-subtab: panel +breadcrumb: +- home +- documentation +- components +- components-panel +meta: +- colors: false +- sizes: false +- variables: true --- {% capture panel_example %} @@ -73,50 +83,32 @@ doc-subtab: panel {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Panel

-

A composable panel, for compact controls

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- -
-

- The panel is container for several types: -

+
+

+ The panel is container for several types: +

+
    +
  • + panel-heading as the first child +
    • +
  • + panel-tabs for navigation +
    • +
  • + panel-block which can contain other elements, like:
      -
    • - panel-heading as the first child -
      • -
    • - panel-tabs for navigation -
      • -
    • - panel-block which can contain other elements, like: -
        -
      • control
        • -
      • input
        • -
      • button
        • -
      • panel-icon
        • -
      -
      • +
    • control
      • +
    • input
      • +
    • button
      • +
    • panel-icon
    -

    - The panel-block can be an anchor tag <a> or a label <label> with a checkbox inside. -

    -
+ + +

+ The panel-block can be an anchor tag <a> or a label <label> with a checkbox inside. +

+
- {% include snippet.html content=panel_example size="one-third" %} +{% include snippet.html content=panel_example size="one-third" %} - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index 2e7998d5..fdf60c26 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -1,8 +1,18 @@ --- title: Tabs +subtitle: "Simple responsive horizontal navigation tabs, with different styles" layout: documentation doc-tab: components doc-subtab: tabs +breadcrumb: +- home +- documentation +- components +- components-tabs +meta: +- colors: false +- sizes: true +- variables: true --- {% capture tabs_example %} @@ -344,107 +354,88 @@ doc-subtab: tabs {% endcapture %} -{% include subnav/subnav-components.html %} +
+

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

+
-
-
-

Tabs

-

Simple responsive horizontal navigation tabs, with different styles

- {% - include meta.html - since="0.4.4" - colors=false - sizes=true - variables=true - %} +{% include snippet.html content=tabs_example horizontal=true %} -
+{% include snippet.html content=tabs_example horizontal=true more=true %} -
-

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

-
+{% include anchor.html name="Alignment" %} - {% include snippet.html content=tabs_example horizontal=true %} +
+

+ To align the tabs list, use the is-centered or is-right modifier on the .tabs container: +

+
- {% include snippet.html content=tabs_example horizontal=true more=true %} +{% include snippet.html content=tabs_centered_example horizontal=true more=true %} - {% include anchor.html name="Alignment" %} +{% include snippet.html content=tabs_right_example horizontal=true more=true %} -
-

- To align the tabs list, use the is-centered or is-right modifier on the .tabs container: -

-
+{% include anchor.html name="Icons" %} - {% include snippet.html content=tabs_centered_example horizontal=true more=true %} +
+

You can use any of the Font Awesome icons.

+
- {% include snippet.html content=tabs_right_example horizontal=true more=true %} +{% include snippet.html content=tabs_icons_example horizontal=true more=true %} - {% include anchor.html name="Icons" %} +{% include snippet.html content=tabs_icons_example horizontal=true more=true %} -
-

You can use any of the Font Awesome icons.

-
+{% include anchor.html name="Sizes" %} +
+

You can choose between 3 additional sizes: is-small is-medium and is-large.

+
- {% include snippet.html content=tabs_icons_example horizontal=true more=true %} +{% include snippet.html content=tabs_small_example horizontal=true more=true %} - {% include snippet.html content=tabs_icons_example horizontal=true more=true %} +{% include snippet.html content=tabs_medium_example horizontal=true more=true %} - {% include anchor.html name="Sizes" %} -
-

You can choose between 3 additional sizes: is-small is-medium and is-large.

-
+{% include snippet.html content=tabs_large_example horizontal=true more=true %} - {% include snippet.html content=tabs_small_example horizontal=true more=true %} +{% include anchor.html name="Styles" %} - {% include snippet.html content=tabs_medium_example horizontal=true more=true %} +
+ If you want a more classic style with borders, just append the is-boxed modifier. +
- {% include snippet.html content=tabs_large_example horizontal=true more=true %} +{% include snippet.html content=tabs_boxed_example horizontal=true more=true %} - {% include anchor.html name="Styles" %} +

+ If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier. +

-
- If you want a more classic style with borders, just append the is-boxed modifier. -
+{% include snippet.html content=tabs_toggle_example horizontal=true more=true %} - {% include snippet.html content=tabs_boxed_example horizontal=true more=true %} +{% include elements/new-tag.html version="0.6.2" %} -

- If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier. -

+

+ If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded. +

- {% include snippet.html content=tabs_toggle_example horizontal=true more=true %} +{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} - {% include elements/new-tag.html version="0.6.2" %} +

+ If you want the tabs to take up the whole width available, use is-fullwidth. +

-

- If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded. -

+{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %} - {% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} +{% include anchor.html name="Combining" %} -

- If you want the tabs to take up the whole width available, use is-fullwidth. -

+
+

You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

+
- {% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %} +{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} - {% include anchor.html name="Combining" %} +{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} -
-

You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

-
+{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %} - {% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} +{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} - {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} - - {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %} - - {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %}