diff --git a/docs/_includes/meta.html b/docs/_includes/meta.html index 328ffbda..9b31fa7c 100644 --- a/docs/_includes/meta.html +++ b/docs/_includes/meta.html @@ -1,5 +1,13 @@
+ {% if include.new %} +
+
+ New! +
+
+ {% endif %} + {% if include.since %}
diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index 2265dbbc..38a47e39 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -139,28 +139,17 @@ variables:
-
-
-

Breadcrumb

-

- A simple breadcrumb component to improve your navigation experience -

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

- New! - 0.4.3 -

-
-
+

Breadcrumb

+

+ A simple breadcrumb component to improve your navigation experience +

+ {% + include meta.html + since="0.4.3" + variables=true + colors=false + sizes=true + %}
@@ -245,7 +234,7 @@ variables:
-

+

Sizes

diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index 7ff7d61d..03f3485b 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -2,6 +2,31 @@ layout: documentation doc-tab: components doc-subtab: dropdown +variables: +- name: $dropdown-content-background-color + value: $white +- name: $dropdown-content-arrow + value: $link +- name: $dropdown-content-offset + value: 4px +- name: $dropdown-content-radius + value: $radius +- name: $dropdown-content-shadow + value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) +- name: $dropdown-content-z + value: 20 +- name: $dropdown-item-color + value: $grey-dark +- name: $dropdown-item-hover-color + value: $black +- name: $dropdown-item-hover-background-color + value: $background +- name: $dropdown-item-active-color + value: $primary-invert +- name: $dropdown-item-active-background-color + value: $primary +- name: $dropdown-divider-background-color + value: $border --- {% capture dropdown_example %} @@ -172,21 +197,18 @@ doc-subtab: dropdown
-
-
-

Dropdown

-

- An interactive dropdown menu for discoverable content -

-
- -
-

- New! - 0.4.4 -

-
-
+

Dropdown

+

+ An interactive dropdown menu for discoverable content +

+ {% + include meta.html + new=true + since="0.4.4" + colors=false + sizes=false + variables=true + %}
@@ -318,5 +340,8 @@ doc-subtab: dropdown {% highlight html %}{{dropdown_right_example}}{% endhighlight %}
+ + {% include variables.html %} +
diff --git a/docs/documentation/components/level.html b/docs/documentation/components/level.html index dd3b3b02..f300757d 100644 --- a/docs/documentation/components/level.html +++ b/docs/documentation/components/level.html @@ -10,6 +10,12 @@ doc-subtab: level

Level

A multi-purpose horizontal level, which can contain almost any other element

+ {% + include meta.html + colors=false + sizes=false + variables=false + %}
diff --git a/docs/documentation/components/media-object.html b/docs/documentation/components/media-object.html index f3ea9c7f..be3da856 100644 --- a/docs/documentation/components/media-object.html +++ b/docs/documentation/components/media-object.html @@ -10,6 +10,12 @@ doc-subtab: media-object

Media Object

The famous media object prevalent in social media interfaces, but useful in any context

+ {% + include meta.html + colors=false + sizes=false + variables=false + %}
diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index 6e962954..2a889a89 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -2,17 +2,25 @@ layout: documentation doc-tab: components doc-subtab: menu +variables: +- name: $menu-item-color + value: $text +- name: $menu-item-radius + value: $radius-small +- name: $menu-item-hover-color + value: $text-strong +- name: $menu-item-hover-background-color + value: $background +- name: $menu-item-active-color + value: $link-invert +- name: $menu-item-active-background-color + value: $link +- name: $menu-list-border-left + value: 1px solid $border +- name: $menu-label-color + value: $text-light --- -{% include subnav-components.html %} - -
-
-

Menu

-

A simple menu, for any type of vertical navigation

- -
- {% capture menu_example %} {% endcapture %} -
-
-{{menu_example}} -
-
-{% highlight html %} -{{menu_example}} -{% endhighlight %} -
-
+ +{% include subnav-components.html %} + +
+
+

Menu

+

A simple menu, for any type of vertical navigation

+ {% + include meta.html + colors=false + sizes=false + variables=true + %} + +
+ +
+
+ {{menu_example}} +
+
+ {% highlight html %}{{menu_example}}{% endhighlight %} +
+
+ + {% include variables.html %}
diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index 5398828f..72a83615 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -2,19 +2,33 @@ layout: documentation doc-tab: components doc-subtab: message +variables: +- name: $message-background-color + value: $background +- name: $message-radius + value: $radius +- name: $message-header-background-color + value: $text +- name: $message-header-color + value: $text-invert +- name: $message-header-padding + value: 0.5em 0.75em +- name: $message-header-radius + value: $radius +- name: $message-body-border + value: 1px solid $border +- name: $message-body-color + value: $text +- name: $message-body-padding + value: 1em 1.25em +- name: $message-body-radius + value: $radius +- name: $message-body-pre-background-color + value: $white +- name: $message-body-pre-code-background-color + value: transparent --- -{% include subnav-components.html %} - -
-
-

Messages

-

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

- -
- {% capture message_example %}
@@ -80,23 +94,7 @@ doc-subtab: message
{% endcapture %} -
-
-{{message_example}} -
-
-{% highlight html %} -{{message_example}} -{% endhighlight %} -
-
-
- -

Message body only

-
-

You can omit the message header:

-
{% capture message_body_example %}
@@ -134,16 +132,49 @@ doc-subtab: message
{% endcapture %} -
-
-{{message_body_example}} -
-
-{% highlight html %} -{{message_body_example}} -{% endhighlight %} -
-
+ +{% include subnav-components.html %} + +
+
+

Messages

+

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

+ {% + include meta.html + colors=true + sizes=true + variables=true + %} + +
+ +
+
+ {{message_example}} +
+
+ {% highlight html %}{{message_example}}{% endhighlight %} +
+
+ +
+ +

Message body only

+
+

You can omit the message header:

+
+
+
+ {{message_body_example}} +
+
+ {% highlight html %}{{message_body_example}}{% endhighlight %} +
+
+ + {% include variables.html %}
diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index cf1b3b99..b082aabc 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -2,14 +2,104 @@ layout: documentation doc-tab: components doc-subtab: modal +variables: +- name: $modal-z + value: 20 +- name: $modal-background-background-color + value: rgba($black, 0.86) +- name: $modal-content-width + value: 640px +- name: $modal-content-margin-mobile + value: 20px +- name: $modal-content-spacing-mobile + value: 160px +- name: $modal-content-spacing-tablet + value: 40px +- name: $modal-close-dimensions + value: 40px +- name: $modal-close-right + value: 20px +- name: $modal-close-top + value: 20px +- name: $modal-card-spacing + value: 40px +- name: $modal-card-head-background-color + value: $background +- name: $modal-card-head-border-bottom + value: 1px solid $border +- name: $modal-card-head-padding + value: 20px +- name: $modal-card-head-radius + value: $radius-large +- name: $modal-card-title-color + value: $text-strong +- name: $modal-card-title-line-height + value: 1 +- name: $modal-card-title-size + value: $size-4 +- name: $modal-card-foot-radius + value: $radius-large +- name: $modal-card-foot-border-top + value: 1px solid $border +- name: $modal-card-body-background-color + value: $white +- name: $modal-card-body-padding + value: 20px --- +{% capture modal %} +
+
+
+ +
+ +
+{% endcapture %} + +{% capture image_modal %} +
+
+
+

+ +

+
+ +
+{% endcapture %} + +{% capture modal_card %} +
+
+
+
+

Modal title

+ +
+
+ +
+ +
+
+{% endcapture %} + {% include 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 + %}
@@ -36,15 +126,7 @@ doc-subtab: modal

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

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

@@ -70,17 +152,7 @@ doc-subtab: modal

-{% highlight html %} -
-
-
-

- -

-
- -
-{% endhighlight %} + {% highlight html %}{{ image_modal }}{% endhighlight %}
@@ -93,24 +165,9 @@ doc-subtab: modal

-{% highlight html %} -
-
-
-
-

Modal title

- -
-
- -
- -
-
-{% endhighlight %} + {% highlight html %}{{ modal_card }}{% endhighlight %} + + {% include variables.html %}
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html index 5e6bc3e1..9fc972c7 100644 --- a/docs/documentation/components/navbar.html +++ b/docs/documentation/components/navbar.html @@ -2,6 +2,61 @@ layout: documentation doc-tab: components doc-subtab: navbar +variables: +- name: $navbar-background-color + value: $white +- name: $navbar-height + value: 3.25rem +- name: $navbar-item-color + value: $grey-dark +- name: $navbar-item-hover-color + value: $black +- name: $navbar-item-hover-background-color + value: $background +- name: $navbar-item-active-color + value: $black +- name: $navbar-item-active-background-color + value: transparent +- name: $navbar-tab-hover-background-color + value: transparent +- name: $navbar-tab-hover-border-bottom-color + value: $primary +- name: $navbar-tab-active-color + value: $primary +- name: $navbar-tab-active-background-color + value: transparent +- name: $navbar-tab-active-border-bottom-color + value: $primary +- name: $navbar-tab-active-border-bottom-style + value: solid +- name: $navbar-tab-active-border-bottom-width + value: 3px +- name: $navbar-dropdown-background-color + value: $white +- name: $navbar-dropdown-border-top + value: 1px solid $border +- name: $navbar-dropdown-offset + value: -4px +- name: $navbar-dropdown-arrow + value: $link +- name: $navbar-dropdown-radius + value: $radius-large +- name: $navbar-dropdown-z + value: 20 +- name: $navbar-dropdown-boxed-radius + value: $radius-large +- name: $navbar-dropdown-boxed-shadow + value: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) +- name: $navbar-dropdown-item-hover-color + value: $black +- name: $navbar-dropdown-item-hover-background-color + value: $background +- name: $navbar-dropdown-item-active-color + value: $primary +- name: $navbar-dropdown-item-active-background-color + value: $background +- name: $navbar-divider-background-color + value: $border --- {% include subnav-components.html %} @@ -382,22 +437,18 @@ document.addEventListener('DOMContentLoaded', function () {
-
-
-

Navbar

-

- A responsive horizontal navbar that can supports images, links, buttons, and dropdowns -

-
- -
-

- New! - 0.4.3 -

- -
-
+

Navbar

+

+ A responsive horizontal navbar that can supports images, links, buttons, and dropdowns +

+ {% + include meta.html + new=true + since="0.4.3" + colors=false + sizes=false + variables=true + %}
@@ -856,5 +907,7 @@ document.addEventListener('DOMContentLoaded', function () { {% highlight html %}{{ navbar_divider_example }}{% endhighlight %} + {% include variables.html %} +
diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index 42fe497f..8b646b7e 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -2,42 +2,45 @@ layout: documentation doc-tab: components doc-subtab: pagination +variables: +- name: $pagination-color + value: $grey-darker +- name: $pagination-background + value: $white +- name: $pagination-border-color + value: $grey-lighter +- name: $pagination-margin + value: -0.25rem +- name: $pagination-hover-color + value: $link-hover +- name: $pagination-hover-border-color + value: $link-hover-border +- name: $pagination-focus-color + value: $link-focus +- name: $pagination-focus-border-color + value: $link-focus-border +- name: $pagination-active-color + value: $link-active +- name: $pagination-active-border-color + value: $link-active-border +- name: $pagination-disabled-color + value: $grey +- name: $pagination-disabled-background-color + value: $grey-lighter +- name: $pagination-disabled-border-color + value: $grey-lighter +- name: $pagination-current-color + value: $link-invert +- name: $pagination-current-background-color + value: $link +- name: $pagination-current-border-color + value: $link +- name: $pagination-ellipsis-color + value: $grey-light +- name: $pagination-shadow-inset + value: inset 0 1px 2px rgba($black, 0 --- -{% include subnav-components.html %} - -
-
-

Pagination

-

A responsive, usable, and flexible pagination

- -
- -
-

- The pagination component consists of several elements: -

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

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

-
- {% capture pagination_example %} {% endcapture %} -
-{{pagination_example}} -
-{% highlight html %} -{{pagination_example}} -{% endhighlight %} - -
-

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

-
{% capture pagination_options_example %} {% endcapture %} -
-{{pagination_options_example}} -
-{% highlight html %} -{{pagination_options_example}} -{% endhighlight %} - -
-

- By default, 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. -

-
{% capture pagination_centered_example %} {% endcapture %} -
-{{pagination_centered_example}} -
-{% highlight html %} -{{pagination_centered_example}} -{% endhighlight %} {% capture pagination_right_example %} {% endcapture %} -
-{{pagination_right_example}} -
-{% highlight html %} -{{pagination_right_example}} -{% endhighlight %} - -
- -

Sizes New!

-

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

{% capture pagination_small_example %} {% endcapture %} -
- {{pagination_small_example}} -
- {% capture pagination_medium_example %} {% endcapture %} -
- {{pagination_medium_example}} -
- {% capture pagination_large_example %} {% endcapture %} +{% include 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: +

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

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

+
+ +
+ {{pagination_example}} +
+ + {% highlight html %}{{pagination_example}}{% endhighlight %} + +
+

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

+
+ +
+ {{pagination_options_example}} +
+ + {% highlight html %}{{pagination_options_example}}{% endhighlight %} + +
+

+ By default, 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. +

+
+ +
+ {{pagination_centered_example}} +
+ + {% highlight html %}{{pagination_centered_example}}{% endhighlight %} + +
+ {{pagination_right_example}} +
+ + {% highlight html %}{{pagination_right_example}}{% endhighlight %} + +
+ +

+ 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. +

+ +
+ {{pagination_small_example}} +
+ +
+ {{pagination_medium_example}} +
+
{{pagination_large_example}}
+ {% include variables.html %} +
diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index 0fef9e81..4d9dda75 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -2,62 +2,66 @@ layout: documentation doc-tab: components doc-subtab: panel +variables: +- name: $panel-item-border + value: 1px solid $border +- name: $panel-heading-background-color + value: $background +- name: $panel-heading-color + value: $text-strong +- name: $panel-heading-line-height + value: 1.25 +- name: $panel-heading-padding + value: 0.5em 0.75em +- name: $panel-heading-radius + value: $radius +- name: $panel-heading-size + value: 1.25em +- name: $panel-heading-weight + value: $weight-light +- name: $panel-tab-border-bottom + value: 1px solid $border +- name: $panel-tab-active-border-bottom-color + value: $link-active-border +- name: $panel-tab-active-color + value: $link-active +- name: $panel-list-item-color + value: $text +- name: $panel-list-item-hover-color + value: $link +- name: $panel-block-color + value: $text-strong +- name: $panel-block-hover-background-color + value: $background +- name: $panel-block-active-border-left-color + value: $link +- name: $panel-block-active-color + value: $link-active +- name: $panel-block-active-icon-color + value: $link +- name: $panel-icon-color + value: $text-light --- -{% include subnav-components.html %} - -
-
-

Panel

-

A composable panel, for compact controls

- -
- -
-

- 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: -
      -
    • control
      • -
    • input
      • -
    • button
      • -
    • panel-icon
      • -
    -
    • -
-

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

-
- {% capture panel_example %} {% endcapture %} + +{% include 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: +

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

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

+
+
-{{panel_example}} + {{panel_example}}
-{% highlight html %} -{{panel_example}} -{% endhighlight %} + {% highlight html %}{{panel_example}}{% endhighlight %}
+ {% include variables.html %} +
diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index 4ebdf55c..56f54b85 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -2,22 +2,57 @@ layout: documentation doc-tab: components doc-subtab: tabs +variables: +- name: $tabs-border-bottom-color + value: $border +- name: $tabs-border-bottom-style + value: solid +- name: $tabs-border-bottom-width + value: 1px +- name: $tabs-link-color + value: $text +- name: $tabs-link-hover-border-bottom-color + value: $text-strong +- name: $tabs-link-hover-color + value: $text-strong +- name: $tabs-link-active-border-bottom-color + value: $primary +- name: $tabs-link-active-color + value: $primary +- name: $tabs-link-padding + value: 0.5em 1em +- name: $tabs-boxed-link-radius + value: $radius +- name: $tabs-boxed-link-hover-background-color + value: $background +- name: $tabs-boxed-link-hover-border-bottom-color + value: $border +- name: $tabs-boxed-link-active-background-color + value: $white +- name: $tabs-boxed-link-active-border-color + value: $border +- name: $tabs-boxed-link-active-border-bottom-color + value: transparent !important +- name: $tabs-toggle-link-border-color + value: $border +- name: $tabs-toggle-link-border-style + value: solid +- name: $tabs-toggle-link-border-width + value: 1px +- name: $tabs-toggle-link-hover-background-color + value: $background +- name: $tabs-toggle-link-hover-border-color + value: $border-hover +- name: $tabs-toggle-link-radius + value: $radius +- name: $tabs-toggle-link-active-background-color + value: $primary +- name: $tabs-toggle-link-active-border-color + value: $primary +- name: $tabs-toggle-link-active-color + value: $primary-invert --- -{% include subnav-components.html %} - -
-
-

Tabs

-

Simple responsive horizontal navigation tabs, with different styles

- -
- -
-

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

-
- {% capture tabs_example %}
    @@ -28,21 +63,7 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_example}} -
-{% highlight html %} -{{tabs_example}} -{% endhighlight %} -
- -

Alignment

-
-

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

-
{% capture tabs_centered_example %}
    @@ -53,12 +74,6 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_centered_example}} -
-{% highlight html %} -{{tabs_centered_example}} -{% endhighlight %} {% capture tabs_right_example %}
@@ -70,19 +85,6 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_right_example}} -
-{% highlight html %} -{{tabs_right_example}} -{% endhighlight %} - -
- -

Icons

-
-

You can use any of the Font Awesome icons.

-
{% capture tabs_icons_example %}
@@ -114,19 +116,7 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_icons_example}} -
-{% highlight html %} -{{tabs_icons_example}} -{% endhighlight %} -
- -

Sizes

-
-

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

-
{% capture tabs_small_example %}
    @@ -137,12 +127,6 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_small_example}} -
-{% highlight html %} -{{tabs_small_example}} -{% endhighlight %} {% capture tabs_medium_example %}
@@ -154,12 +138,6 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_medium_example}} -
-{% highlight html %} -{{tabs_medium_example}} -{% endhighlight %} {% capture tabs_large_example %}
@@ -171,19 +149,7 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_large_example}} -
-{% highlight html %} -{{tabs_large_example}} -{% endhighlight %} -
- -

Styles

-
- If you want a more classic style with borders, just append the is-boxed modifier. -
{% capture tabs_boxed_example %}
    @@ -214,16 +180,7 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_boxed_example}} -
-{% highlight html %} -{{tabs_boxed_example}} -{% endhighlight %} -

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

{% capture tabs_toggle_example %}
    @@ -254,16 +211,7 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_toggle_example}} -
-{% highlight html %} -{{tabs_toggle_example}} -{% endhighlight %} -

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

{% capture tabs_fullwidth_example %}
    @@ -288,19 +236,7 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_fullwidth_example}} -
-{% highlight html %} -{{tabs_fullwidth_example}} -{% endhighlight %} -
- -

Combining

-
-

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

-
{% capture tabs_centered_boxed_example %}
    @@ -331,12 +267,6 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_centered_boxed_example}} -
-{% highlight html %} -{{tabs_centered_boxed_example}} -{% endhighlight %} {% capture tabs_toggle_fullwidth_example %}
@@ -368,12 +298,6 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_toggle_fullwidth_example}} -
-{% highlight html %} -{{tabs_toggle_fullwidth_example}} -{% endhighlight %} {% capture tabs_centered_boxed_medium_example %}
@@ -405,12 +329,6 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_centered_boxed_medium_example}} -
-{% highlight html %} -{{tabs_centered_boxed_medium_example}} -{% endhighlight %} {% capture tabs_toggle_fullwidth_large_example %}
@@ -442,12 +360,146 @@ doc-subtab: tabs
{% endcapture %} -
-{{tabs_toggle_fullwidth_large_example}} -
-{% highlight html %} -{{tabs_toggle_fullwidth_large_example}} -{% endhighlight %} + +{% include subnav-components.html %} + +
+
+

Tabs

+

Simple responsive horizontal navigation tabs, with different styles

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

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

+
+ +
+ {{tabs_example}} +
+ {% highlight html %}{{tabs_example}}{% endhighlight %} + +
+ +

Alignment

+
+

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

+
+ +
+ {{tabs_centered_example}} +
+ {% highlight html %}{{tabs_centered_example}}{% endhighlight %} + +
+ {{tabs_right_example}} +
+ {% highlight html %}{{tabs_right_example}}{% endhighlight %} + +
+ +

Icons

+
+

You can use any of the Font Awesome icons.

+
+ +
+ {{tabs_icons_example}} +
+ {% highlight html %}{{tabs_icons_example}}{% endhighlight %} + +
+ +

+ Sizes +

+
+

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

+
+ +
+ {{tabs_small_example}} +
+ {% highlight html %}{{tabs_small_example}}{% endhighlight %} + +
+ {{tabs_medium_example}} +
+ {% highlight html %}{{tabs_medium_example}}{% endhighlight %} + +
+ {{tabs_large_example}} +
+ {% highlight html %}{{tabs_large_example}}{% endhighlight %} + +
+ +

Styles

+
+ If you want a more classic style with borders, just append the is-boxed modifier. +
+ +
+ {{tabs_boxed_example}} +
+ {% highlight html %}{{tabs_boxed_example}}{% endhighlight %} + +

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

+ +
+ {{tabs_toggle_example}} +
+ {% highlight html %}{{tabs_toggle_example}}{% endhighlight %} + +

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

+ +
+ {{tabs_fullwidth_example}} +
+ {% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %} + +
+ +

Combining

+
+

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

+
+ +
+ {{tabs_centered_boxed_example}} +
+ {% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %} + +
+ {{tabs_toggle_fullwidth_example}} +
+ {% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %} + +
+ {{tabs_centered_boxed_medium_example}} +
+ {% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %} + +
+ {{tabs_toggle_fullwidth_large_example}} +
+ {% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %} + + {% include variables.html %}