diff --git a/docs/_includes/snippet.html b/docs/_includes/snippet.html index 57e4c925..d1ddce08 100644 --- a/docs/_includes/snippet.html +++ b/docs/_includes/snippet.html @@ -1,8 +1,12 @@ -
+
{{ include.content }}
-
+
{% highlight html %}{{ include.content }}{% endhighlight %}
diff --git a/docs/_includes/subnav-components.html b/docs/_includes/subnav-components.html index 1a312c20..738fb068 100644 --- a/docs/_includes/subnav-components.html +++ b/docs/_includes/subnav-components.html @@ -1,21 +1,14 @@
-
- -

- Right aligned -

+ {% include anchor.html name="Right aligned" %}

diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index 2a889a89..bc9cf408 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -73,14 +73,7 @@ variables:

-
-
- {{menu_example}} -
-
- {% highlight html %}{{menu_example}}{% endhighlight %} -
-
+ {% include snippet.html content=menu_example size="one-third" %} {% include variables.html %} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index 1692547b..bc5988c4 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -201,78 +201,29 @@ variables:
-
-
- {{message_example}} -
-
- {% highlight html %}{{message_example}}{% endhighlight %} -
-
+ {% include snippet.html content=message_example %} {% include anchor.html name="Colors" %} -
-
- {{message_colors_example}} -
-
- {% highlight html %}{{message_colors_example}}{% endhighlight %} -
-
+ {% include snippet.html content=message_colors_example %} -
+ {% include anchor.html name="Message body only" %} -

Message body only

You can omit the message header:

-
-
- {{message_body_example}} -
-
- {% highlight html %}{{message_body_example}}{% endhighlight %} -
-
+ + {% include snippet.html content=message_body_example %} {% include anchor.html name="Sizes" %} -
-
- {{message_small}} -
-
- {% highlight html %}{{message_small}}{% endhighlight %} -
-
+ {% include snippet.html content=message_small %} -
-
- {{message_normal}} -
-
- {% highlight html %}{{message_normal}}{% endhighlight %} -
-
+ {% include snippet.html content=message_normal %} -
-
- {{message_medium}} -
-
- {% highlight html %}{{message_medium}}{% endhighlight %} -
-
+ {% include snippet.html content=message_medium %} -
-
- {{message_large}} -
-
- {% highlight html %}{{message_large}}{% endhighlight %} -
-
+ {% include snippet.html content=message_large %} {% include variables.html %} diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index 4b926620..b55f67da 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -245,11 +245,7 @@ variables: {% highlight html %}{{pagination_right_example}}{% endhighlight %} -
- -

- Sizes -

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

The pagination comes in 3 additional sizes.
diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index 4d9dda75..f3dd085a 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -152,14 +152,7 @@ variables:

-
-
- {{panel_example}} -
-
- {% highlight html %}{{panel_example}}{% endhighlight %} -
-
+ {% include snippet.html content=panel_example size="one-third" %} {% include variables.html %} diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index dd387ee4..9587ba42 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -382,118 +382,76 @@ variables: The default tabs style has a single border at the bottom.

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

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 %} + {% include snippet.html content=tabs_centered_example horizontal=true clipped=true %} -
- {{tabs_right_example}} -
- {% highlight html %}{{tabs_right_example}}{% endhighlight %} + {% include snippet.html content=tabs_right_example horizontal=true clipped=true %} -
+ {% include anchor.html name="Icons" %} -

Icons

You can use any of the Font Awesome icons.

-
- {{tabs_icons_example}} -
- {% highlight html %}{{tabs_icons_example}}{% endhighlight %} + {% include snippet.html content=tabs_icons_example horizontal=true clipped=true %} + + {% include snippet.html content=tabs_icons_example horizontal=true clipped=true %} {% include anchor.html name="Sizes" %}

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

-
- {{tabs_small_example}} -
- {% highlight html %}{{tabs_small_example}}{% endhighlight %} + {% include snippet.html content=tabs_small_example horizontal=true clipped=true %} -
- {{tabs_medium_example}} -
- {% highlight html %}{{tabs_medium_example}}{% endhighlight %} + {% include snippet.html content=tabs_medium_example horizontal=true clipped=true %} -
- {{tabs_large_example}} -
- {% highlight html %}{{tabs_large_example}}{% endhighlight %} + {% include snippet.html content=tabs_large_example horizontal=true clipped=true %} -
+ {% include anchor.html name="Styles" %} -

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 %} + {% include snippet.html content=tabs_boxed_example horizontal=true clipped=true %}

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 %} + {% include snippet.html content=tabs_toggle_example horizontal=true clipped=true %}

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

-
- {{tabs_fullwidth_example}} -
- {% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %} + {% include snippet.html content=tabs_fullwidth_example horizontal=true clipped=true %} -
+ {% include anchor.html name="Combining" %} -

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 %} + {% include snippet.html content=tabs_centered_boxed_example horizontal=true clipped=true %} -
- {{tabs_toggle_fullwidth_example}} -
- {% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %} + {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true clipped=true %} -
- {{tabs_centered_boxed_medium_example}} -
- {% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %} + {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true clipped=true %} -
- {{tabs_toggle_fullwidth_large_example}} -
- {% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %} + {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true clipped=true %} {% include variables.html %} diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html index cee752fd..cbefba25 100644 --- a/docs/documentation/elements/content.html +++ b/docs/documentation/elements/content.html @@ -164,7 +164,7 @@ variables:

This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

- {% include snippet.html content=content_example fullheight=true %} + {% include snippet.html content=content_example %} {% include anchor.html name="Sizes" %}