From: Jeremy Thomas Date: Mon, 9 Apr 2018 13:15:31 +0000 (+0100) Subject: Do elements X-Git-Tag: 0.7.0~1^2~52 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f0074aa33980467b399754a60bce0822f4c7d6ab;p=thirdparty%2Fbulma.git Do elements --- diff --git a/docs/_data/links.json b/docs/_data/links.json index f7abf8556..19b160e49 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -40,10 +40,50 @@ "name": "Elements", "path": "/documentation/elements" }, - "button": { + "elements-box": { + "name": "Box", + "path": "/documentation/elements/box" + }, + "elements-button": { "name": "Button", "path": "/documentation/elements/button" }, + "elements-content": { + "name": "Content", + "path": "/documentation/elements/content" + }, + "elements-delete": { + "name": "Delete", + "path": "/documentation/elements/delete" + }, + "elements-icon": { + "name": "Icon", + "path": "/documentation/elements/icon" + }, + "elements-image": { + "name": "Image", + "path": "/documentation/elements/image" + }, + "elements-notification": { + "name": "Notification", + "path": "/documentation/elements/notification" + }, + "elements-progress": { + "name": "Progress bars", + "path": "/documentation/elements/progress" + }, + "elements-table": { + "name": "Table", + "path": "/documentation/elements/table" + }, + "elements-tag": { + "name": "Tag", + "path": "/documentation/elements/tag" + }, + "elements-title": { + "name": "Title", + "path": "/documentation/elements/title" + }, "components": { "name": "Components", "path": "/documentation/components" @@ -91,6 +131,7 @@ }, "order": { "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], + "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"], "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/_includes/elements/improve-page.html b/docs/_includes/elements/improve-page.html index 738dd03fc..05b3c6fc7 100644 --- a/docs/_includes/elements/improve-page.html +++ b/docs/_includes/elements/improve-page.html @@ -1,16 +1,14 @@ -
-
-

- - Made with Bulma - -
- This page is open source. - Noticed a typo? Or something unclear? -
- - Improve this page on GitHub - -

-
-
+
+

+ + Made with Bulma + +
+ This page is open source. + Noticed a typo? Or something unclear? +
+ + Improve this page on GitHub + +

+
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index a2603258b..8da5ff8e5 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -41,27 +41,29 @@ route: documentation - + {% endif %}
@@ -71,6 +73,15 @@ route: documentation

{{ page.subtitle }}

+ + {% if page.meta %} + {% + include meta.html + colors=page.meta.colors + sizes=page.meta.sizes + variables=page.meta.variables + %} + {% endif %}
diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 442f38967..411f60fd9 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -81,6 +81,7 @@ .bd-main padding: 0 3rem .bd-lead - padding: 3rem 3rem 3rem 0 + margin-left: -3rem + padding: 3rem .bd-side padding: 3rem 0 3rem 1.5rem diff --git a/docs/_sass/native.sass b/docs/_sass/native.sass index e1a6c91b2..446d7a327 100644 --- a/docs/_sass/native.sass +++ b/docs/_sass/native.sass @@ -1,4 +1,5 @@ .native-js + border-top: 2px solid $background display: none font-size: 1rem opacity: 0 @@ -86,4 +87,4 @@ $native-bp: 600px +widescreen .native-js - font-size: 1.25rem \ No newline at end of file + font-size: 1.25rem diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index f4d5b7e40..e67d8bc39 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,3 +1,6 @@ +.bd-typo + margin-top: 3rem + .bd-has-text-rss color: $rss diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 5e804bc88..91d26ac7e 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -34,7 +34,7 @@ width: 0.5em; } -.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), +.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child), .bd-snippet:not(:last-child), .bd-callout:not(:last-child) { margin-bottom: 1.5rem; } @@ -4545,7 +4545,6 @@ a.box:active { .table { background-color: white; color: #363636; - margin-bottom: 1.5rem; } .table td, @@ -9592,7 +9591,8 @@ label.panel-block:hover { padding: 0 3rem; } .bd-lead { - padding: 3rem 3rem 3rem 0; + margin-left: -3rem; + padding: 3rem; } .bd-side { padding: 3rem 0 3rem 1.5rem; @@ -10391,6 +10391,10 @@ svg { text-decoration: underline; } +.bd-typo { + margin-top: 3rem; +} + .bd-has-text-rss { color: #f26522; } @@ -12330,6 +12334,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .native-js { + border-top: 2px solid whitesmoke; display: none; font-size: 1rem; opacity: 0; diff --git a/docs/documentation.html b/docs/documentation.html new file mode 100644 index 000000000..6bfe7ea96 --- /dev/null +++ b/docs/documentation.html @@ -0,0 +1,8 @@ +--- +title: Documentation +subtitle: "Everything you need to create a website with Bulma" +layout: documentation +breadcrumb: +- home +- documentation +--- diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index a6e56f7ad..28ce30c50 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -10,10 +10,9 @@ breadcrumb: - components - components-breadcrumb meta: -- since: "0.4.3" -- variables: true -- colors: false -- sizes: true + variables: true + colors: false + sizes: true --- {% capture breadcrumb_example %} diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index c74fb6818..3205544bf 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -1,6 +1,6 @@ --- title: Card -subtile: "An all-around flexible and composable component" +subtitle: "An all-around flexible and composable component" layout: documentation doc-tab: components doc-subtab: card @@ -10,9 +10,9 @@ breadcrumb: - components - components-card meta: -- variables: true -- colors: false -- sizes: false + variables: true + colors: false + sizes: false --- {% capture card_example %} diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index 07f600586..262261ebb 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -10,9 +10,9 @@ breadcrumb: - components - components-dropdown meta: -- colors: false -- sizes: false -- variables: true + colors: false + sizes: false + variables: true --- {% capture dropdown_example %} diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index 34a83c08b..66f24dfe7 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -10,9 +10,9 @@ breadcrumb: - components - components-menu meta: -- colors: false -- sizes: false -- variables: true + colors: false + sizes: false + variables: true --- {% capture menu_example %} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index c9ef74405..f7e1e4817 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -4,15 +4,15 @@ subtitle: "Colored message blocks, to emphasize part of your pa layout: documentation doc-tab: components doc-subtab: message -meta: -- colors: true -- sizes: true -- variables: true breadcrumb: - home - documentation - components - components-message +meta: + colors: true + sizes: true + variables: true --- {% capture message_example %} diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index c044eb6ee..25f3933b9 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -4,15 +4,15 @@ subtitle: "A classic modal overlay, in which you can include box to contain other elements" layout: documentation doc-tab: elements doc-subtab: box +breadcrumb: +- home +- documentation +- elements +- elements-box +meta: + colors: false + sizes: false + variables: true --- -{% include subnav/subnav-elements.html %} - {% capture box_example %}
@@ -47,32 +55,14 @@ doc-subtab: box
{% endcapture %} -
-
-

Box

-

- A white box to contain other elements -

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

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

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

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

+
- {% include variables.html type='element' %} +{% include snippet.html content=box_example more=true %} -
-
+{% include variables.html type='element' %} diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 122a2147b..fdf2341d1 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -8,11 +8,11 @@ breadcrumb: - home - documentation - elements -- button +- elements-button meta: -- colors: true -- sizes: true -- variables: true + colors: true + sizes: true + variables: true --- {% capture button_example %} diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html index 60a871372..01a0067a9 100644 --- a/docs/documentation/elements/content.html +++ b/docs/documentation/elements/content.html @@ -1,8 +1,18 @@ --- title: Content +subtitle: "A single class to handle WYSIWYG generated content, where only HTML tags are available" layout: documentation doc-tab: elements doc-subtab: content +breadcrumb: +- home +- documentation +- elements +- elements-content +meta: + colors: false + sizes: true + variables: true --- {% capture content_pre %} @@ -101,87 +111,67 @@ doc-subtab: content
{% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Content

-

- A single class to handle WYSIWYG generated content, where only HTML tags are available -

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

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

-
    -
  • <p> paragraphs
    • -
  • <ul> <ol> <dl> lists
    • -
  • <h1> to <h6> headings
    • -
  • <blockquote> quotes
    • -
  • <em> and <strong>
    • -
  • <table> <tr> <th> <td> tables
    • -
-

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 %} - - {% include anchor.html name="Sizes" %} +
+

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

+
    +
  • <p> paragraphs
    • +
  • <ul> <ol> <dl> lists
    • +
  • <h1> to <h6> headings
    • +
  • <blockquote> quotes
    • +
  • <em> and <strong>
    • +
  • <table> <tr> <th> <td> tables
    • +
+

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.

+
-
-

You can use the is-small, is-medium and is-large modifiers to change the font size.

-
-
-
-

Hello World

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

-

Second level

-

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

-
    -
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
    • -
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
    • -
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
    • -
  • Ut non enim metus.
    • -
-
-
-
-
-

Hello World

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

-

Second level

-

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

-
    -
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
    • -
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
    • -
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
    • -
  • Ut non enim metus.
    • -
-
-
-
-
-

Hello World

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

-

Second level

-

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

-
    -
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
    • -
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
    • -
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
    • -
  • Ut non enim metus.
    • -
-
-
+{% include snippet.html content=content_example %} - {% include variables.html type='element' %} +{% include anchor.html name="Sizes" %} +
+

You can use the is-small, is-medium and is-large modifiers to change the font size.

+
+
+
+

Hello World

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

+

Second level

+

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

+
    +
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
    • +
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
    • +
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
    • +
  • Ut non enim metus.
    • +
+
+
+
+
+

Hello World

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

+

Second level

+

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

+
    +
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
    • +
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
    • +
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
    • +
  • Ut non enim metus.
    • +
-
+ +
+
+

Hello World

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

+

Second level

+

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

+
    +
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
    • +
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
    • +
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
    • +
  • Ut non enim metus.
    • +
+
+
+ +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html index d2ba8d721..62dae3802 100644 --- a/docs/documentation/elements/delete.html +++ b/docs/documentation/elements/delete.html @@ -1,8 +1,18 @@ --- title: Delete +subtitle: "A versatile delete cross" layout: documentation doc-tab: elements doc-subtab: delete +breadcrumb: +- home +- documentation +- elements +- elements-delete +meta: + colors: false + sizes: true + variables: false --- {% capture cross_example %} @@ -40,53 +50,33 @@ doc-subtab: delete {% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Delete

-

- A versatile delete cross -

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

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

-
- - {% include snippet.html content=cross_example %} +
+

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

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

- It comes in 4 sizes: -

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

+ It comes in 4 sizes: +

+
- {% include anchor.html name="Combinations" %} +{% include snippet.html content=cross_sizes_example %} -
-

- Bulma uses it for the tags, the notifications, and the messages: -

-
+{% include anchor.html name="Combinations" %} - {% include snippet.html content=cross_elements_example %} +
+

+ Bulma uses it for the tags, the notifications, and the messages: +

+
-
-
+{% include snippet.html content=cross_elements_example %} diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index 970bb3a44..caa100f21 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -1,5 +1,6 @@ --- title: Icon +subtitle: 'Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc.' fontawesome4: true iconic: true ionicons: true @@ -7,6 +8,15 @@ mdi: true layout: documentation doc-tab: elements doc-subtab: icon +breadcrumb: +- home +- documentation +- elements +- elements-icon +meta: + colors: true + sizes: true + variables: true --- {% capture icon_example %} @@ -48,904 +58,892 @@ doc-subtab: icon {% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Icons

-

- Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc. -

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

- The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.

-
- -
- {% include snippet.html content=icon_example %} -
- -
-
- The yellow background is only here for demonstration purposes, to highlight the icon container's area. -
-
- - -
-

- 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 anchor.html name="Colors" %} - -
-

- Since icon fonts are simply text, you can use the text color modifiers to change the icon's color. -

-
- - {% include snippet.html content=icon_color_example %} - - {% include anchor.html name="Sizes" %} - -
-

- The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Container classContainer sizeFont Awesome 5 classIcon sizeResult
- icon is-small - - 1rem x 1rem - - fas - - 1em - - - - -
- icon - - 1.5rem x 1.5rem - - fas - - 1em - - - - -
- fas fa-lg - - 1.33em - - - - -
- icon is-medium - - 2rem x 2rem - - fas - - 1em - - - - -
- fas fa-lg - - 1.33em - - - - -
- fas fa-2x - - 2em - - - - -
- icon is-large - - 3rem x 3rem - - fas - - 1em - - - - -
- fas fa-lg - - 1.33em - - - - -
- fas fa-2x - - 2em - - - - -
- fas fa-3x - - 3em - - - - -
- - {% include anchor.html name="Font Awesome variations" %} - -
-

- Font Awesome also provides modifier classes for: -

-
    -
  • - fixed width icons -
    • -
  • - bordered icons -
    • -
  • - animated icons -
    • -
  • - rotated & flipped icons -
    • -
  • - stacked icons -
    • -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeFont Awesome classResult
- Fixed width - - fas fa-fw - - - - -
- Bordered - - fas fa-border - - - - -
- Animated - - fas fa-spinner fa-pulse - - - - -
- Rotated & flipped - - fas fa-shield-alt
- fas fa-shield-alt data-fa-transform="rotate-90"
- fas fa-shield-alt data-fa-transform="rotate-180"
- fas fa-shield-alt data-fa-transform="rotate-270"
- fas fa-shield-alt data-fa-transform="flip-h"
- fas fa-shield-alt data-fa-transform="flip-v" - 		- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- Stacked - - {% highlight html %} +{% capture stacked_medium %} + -{% endhighlight %} - - - - - - - -
- {% highlight html %} + +{% endcapture %} + +{% capture stacked_large %} + -{% endhighlight %} - - - - - - - -
- - {% include anchor.html name="Material Design Icons" %} - -
-

- Here is how the icon container can be used with Material Design Icons. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Container classContainer sizeMDI classIcon sizeResult
- icon is-small - - 1rem x 1rem - - mdi - - 1em - - - - -
- icon - - 1.5rem x 1.5rem - - mdi mdi-18px - - 18px - - - - -
- mdi mdi-24px - - 24px - - - - -
- icon is-medium - - 2rem x 2rem - - mdi - - 1em - - - - -
- mdi mdi-18px - - 18px - - - - -
- mdi mdi-24px - - 24px - - - - -
- mdi mdi-36px - - 36px - - - - -
- icon is-large - - 3rem x 3rem - - mdi - - 1em - - - - -
- mdi mdi-18px - - 18px - - - - -
- mdi mdi-24px - - 24px - - - - -
- mdi mdi-36px - - 36px - - - - -
- mdi mdi-48px - - 48px - - - - -
- -
-

- MDI also provides modifier classes for: -

-
    -
  • - light and dark icons -
    • -
  • - rotated & flipped icons -
    • -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeMaterial Design Icon classResult
- Light color - - mdi mdi-light - - - - -
- Dark color - - mdi mdi-dark - - - - -
- Light inactive color - - mdi mdi-light mdi-inactive - - - - -
- Dark inactive color - - mdi mdi-dark mdi-inactive - - - - -
- Flipped - - mdi mdi-flip-h -
- mdi mdi-flip-v - 		- - - -
- - - -
- Rotated - - mdi mdi-rotate-45 -
- mdi mdi-rotate-90 -
- mdi mdi-rotate-180 - 		- - - -
- - - -
- - - -
- - {% include anchor.html name="Open Iconic" %} - -
-

- Here is how the icon container can be used with Open Iconic. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Container classContainer sizeIconic classIcon sizeResult
- icon is-small - - 1rem x 1rem - - oi [data-glyph=puzzle-piece] - - 1em - - - - -
- icon - - 1.5rem x 1.5rem - - oi [data-glyph=puzzle-piece] - - 1em - - - - -
- icon is-medium - - 2rem x 2rem - - oi [data-glyph=puzzle-piece] - - 1em - - - - -
- icon is-large - - 3rem x 3rem - - oi [data-glyph=puzzle-piece] - - 1em - - - - -
- - {% include anchor.html name="Ionicons" %} - -
-

- Here is how the icon container can be used with Ionicons. -

-
+ +{% endcapture %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Container classContainer sizeIonicon classIcon sizeResult
- icon is-small - - 1rem x 1rem - - ion-ionic - - 1em - - - - -
- icon - - 1.5rem x 1.5rem - - ion-ionic - - 1em - - - - -
- icon is-medium - - 2rem x 2rem - - ion-ionic - - 1em - - - - -
- icon is-large - - 3rem x 3rem - - ion-ionic - - 1em - - - - -
+
+

+ The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.

+
- {% include variables.html type='element' %} +
+ {% include snippet.html content=icon_example %} +
+
+
+ The yellow background is only here for demonstration purposes, to highlight the icon container's area.
-
+ + + +
+

+ 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 anchor.html name="Colors" %} + +
+

+ Since icon fonts are simply text, you can use the text color modifiers to change the icon's color. +

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

+ The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeFont Awesome 5 classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + fas + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + fas + + 1em + + + + +
+ fas fa-lg + + 1.33em + + + + +
+ icon is-medium + + 2rem x 2rem + + fas + + 1em + + + + +
+ fas fa-lg + + 1.33em + + + + +
+ fas fa-2x + + 2em + + + + +
+ icon is-large + + 3rem x 3rem + + fas + + 1em + + + + +
+ fas fa-lg + + 1.33em + + + + +
+ fas fa-2x + + 2em + + + + +
+ fas fa-3x + + 3em + + + + +
+ +{% include anchor.html name="Font Awesome variations" %} + +
+

+ Font Awesome also provides modifier classes for: +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeFont Awesome classResult
+ Fixed width + + fas fa-fw + + + + +
+ Bordered + + fas fa-border + + + + +
+ Animated + + fas fa-spinner fa-pulse + + + + +
+ Rotated & flipped + + fas fa-shield-alt
+ fas fa-shield-alt data-fa-transform="rotate-90"
+ fas fa-shield-alt data-fa-transform="rotate-180"
+ fas fa-shield-alt data-fa-transform="rotate-270"
+ fas fa-shield-alt data-fa-transform="flip-h"
+ fas fa-shield-alt data-fa-transform="flip-v" + 		+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ Stacked + + {% highlight html %}{{ stacked_medium }}{% endhighlight %} + + + + + + + +
+ {% highlight html %}{{ stacked_large }}{% endhighlight %} + + + + + + + +
+ +{% include anchor.html name="Material Design Icons" %} + +
+

+ Here is how the icon container can be used with Material Design Icons. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeMDI classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + mdi + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ icon is-medium + + 2rem x 2rem + + mdi + + 1em + + + + +
+ mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ mdi mdi-36px + + 36px + + + + +
+ icon is-large + + 3rem x 3rem + + mdi + + 1em + + + + +
+ mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ mdi mdi-36px + + 36px + + + + +
+ mdi mdi-48px + + 48px + + + + +
+ +
+

+ MDI also provides modifier classes for: +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeMaterial Design Icon classResult
+ Light color + + mdi mdi-light + + + + +
+ Dark color + + mdi mdi-dark + + + + +
+ Light inactive color + + mdi mdi-light mdi-inactive + + + + +
+ Dark inactive color + + mdi mdi-dark mdi-inactive + + + + +
+ Flipped + + mdi mdi-flip-h +
+ mdi mdi-flip-v + 		+ + + +
+ + + +
+ Rotated + + mdi mdi-rotate-45 +
+ mdi mdi-rotate-90 +
+ mdi mdi-rotate-180 + 		+ + + +
+ + + +
+ + + +
+ +{% include anchor.html name="Open Iconic" %} + +
+

+ Here is how the icon container can be used with Open Iconic. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeIconic classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + oi [data-glyph=puzzle-piece] + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + oi [data-glyph=puzzle-piece] + + 1em + + + + +
+ icon is-medium + + 2rem x 2rem + + oi [data-glyph=puzzle-piece] + + 1em + + + + +
+ icon is-large + + 3rem x 3rem + + oi [data-glyph=puzzle-piece] + + 1em + + + + +
+ +{% include anchor.html name="Ionicons" %} + +
+

+ Here is how the icon container can be used with Ionicons. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeIonicon classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + ion-ionic + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + ion-ionic + + 1em + + + + +
+ icon is-medium + + 2rem x 2rem + + ion-ionic + + 1em + + + + +
+ icon is-large + + 3rem x 3rem + + ion-ionic + + 1em + + + + +
+ +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html index 1cd6b4495..ed742d9a3 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -1,5 +1,6 @@ --- title: Image +subtitle: "A container for responsive images" layout: documentation doc-tab: elements doc-subtab: image @@ -11,6 +12,15 @@ dimensions: - 64 - 96 - 128 +breadcrumb: +- home +- documentation +- elements +- elements-image +meta: + colors: false + sizes: false + variables: true --- {% capture image %} @@ -25,151 +35,131 @@ dimensions: {% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Images

-

- A container for responsive images -

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

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 snippet.html content=image %} - - {% include anchor.html name="Fixed square images" %} - -
-

There are 7 dimensions to choose from, useful for avatars:

-
- - - - {% for dimension in page.dimensions %} - - - - - - {% endfor %} - -
image is-{{ dimension }}x{{ dimension }}
{{ dimension }}x{{ dimension }}px
- - {% include anchor.html name="Retina images" %} - -
-

Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.

-
- - {% include snippet.html content=retina_image %} - - {% include anchor.html name="Responsive images with ratios" %} - -
-

If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
image is-square
Square (or 1 by 1)
image is-1by1
1 by 1
image is-5by4
5 by 4
image is-4by3
4 by 3
image is-3by2
3 by 2
image is-5by3
5 by 3
image is-16by9
16 by 9
image is-2by1
2 by 1
image is-3by1
3 by 1
image is-4by5
4 by 5
image is-3by4
3 by 4
image is-2by3
2 by 3
image is-3by5
3 by 5
image is-9by16
9 by 16
image is-1by2
1 by 2
image is-1by3
1 by 3
- -
-

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

-
- - {% include variables.html type='element' %} - -
-
+
+

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 snippet.html content=image %} + +{% include anchor.html name="Fixed square images" %} + +
+

There are 7 dimensions to choose from, useful for avatars:

+
+ + + + {% for dimension in page.dimensions %} + + + + + + {% endfor %} + +
image is-{{ dimension }}x{{ dimension }}
{{ dimension }}x{{ dimension }}px
+ +{% include anchor.html name="Retina images" %} + +
+

Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.

+
+ +{% include snippet.html content=retina_image %} + +{% include anchor.html name="Responsive images with ratios" %} + +
+

If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
image is-square
Square (or 1 by 1)
image is-1by1
1 by 1
image is-5by4
5 by 4
image is-4by3
4 by 3
image is-3by2
3 by 2
image is-5by3
5 by 3
image is-16by9
16 by 9
image is-2by1
2 by 1
image is-3by1
3 by 1
image is-4by5
4 by 5
image is-3by4
3 by 4
image is-2by3
2 by 3
image is-3by5
3 by 5
image is-9by16
9 by 16
image is-1by2
1 by 2
image is-1by3
1 by 3
+ +
+

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

+
+ +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index 3078b5957..4164f2334 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -1,8 +1,18 @@ --- title: Notification +subtitle: "Bold notification blocks, to alert your users of something" layout: documentation doc-tab: elements doc-subtab: notification +breadcrumb: +- home +- documentation +- elements +- elements-notification +meta: + colors: true + sizes: false + variables: true --- {% capture notification %} @@ -25,30 +35,10 @@ doc-subtab: notification {% endfor %} {% endcapture %} -{% include subnav/subnav-elements.html %} +{% include snippet.html content=notification %} -
-
-

Notifications

-

- Bold notification blocks, to alert your users of something -

- {% - include meta.html - colors=true - sizes=false - variables=true - %} +{% include anchor.html name="Colors" %} -
+{% include snippet.html content=notification_colors %} - {% include snippet.html content=notification %} - - {% include anchor.html name="Colors" %} - - {% include snippet.html content=notification_colors %} - - {% include variables.html type='element' %} - -
-
+{% include variables.html type='element' %} diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html index 7e48d809d..44d7d2706 100644 --- a/docs/documentation/elements/progress.html +++ b/docs/documentation/elements/progress.html @@ -1,8 +1,18 @@ --- title: Progress Bar +subtitle: "Native HTML progress bars" layout: documentation doc-tab: elements doc-subtab: progress +breadcrumb: +- home +- documentation +- elements +- elements-progress +meta: + colors: true + sizes: true + variables: true --- {% capture progress %} @@ -25,34 +35,14 @@ doc-subtab: progress 60% {% endcapture %} -{% include subnav/subnav-elements.html %} +{% include snippet.html content=progress %} -
-
-

Progress bars

-

- Native HTML progress bars -

- {% - include meta.html - colors=true - sizes=true - variables=true - %} +{% include anchor.html name="Colors" %} -
+{% include snippet.html content=progress_colors %} - {% include snippet.html content=progress %} +{% include anchor.html name="Sizes" %} - {% include anchor.html name="Colors" %} +{% include snippet.html content=progress_sizes %} - {% include snippet.html content=progress_colors %} - - {% include anchor.html name="Sizes" %} - - {% include snippet.html content=progress_sizes %} - - {% include variables.html type='element' %} - -
-
+{% include variables.html type='element' %} diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 1bfda503b..1d801df79 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -1,8 +1,18 @@ --- title: Table +subtitle: "The inevitable HTML table, with special case cells" layout: documentation doc-tab: elements doc-subtab: table +breadcrumb: +- home +- documentation +- elements +- elements-table +meta: + colors: false + sizes: false + variables: true --- {% capture table_example %} @@ -305,292 +315,274 @@ doc-subtab: table {% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Tables

-

The inevitable HTML table, with special case cells

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

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

+
+

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

+
    +
  • + table the main container
    • - table the main container + thead the optional top part of the table +
      • +
    • + tfoot the optional bottom part of the table +
      • +
    • + tbody the main content of the table
      • - thead the optional top part of the table -
        • -
      • - tfoot the optional bottom part of the table -
        • -
      • - tbody the main content of the table + tr each table row
        • - tr each table row -
            -
          • - th a table cell heading -
            • -
          • - td a table cell -
            • -
          + th a table cell heading +
          • +
        • + td a table cell
    -

    - You can set a table row as selected by appending the is-selected modifier on a <tr> -

    -
+ + +

+ You can set a table row as selected by appending the is-selected modifier on a <tr> +

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

Add borders to all the cells.

-
-
- table is-bordered -
-
- - - - - - - - - - - - - -
OneTwo
ThreeFour
-
-
- -
-
-

Add stripes to the table.

-
-
- table is-striped -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
- -
-
-

Make the cells narrower.

-
-
- table is-narrow -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
+
+
+

Add borders to all the cells.

+
+
+ table is-bordered +
+
+ + + + + + + + + + + + + +
OneTwo
ThreeFour
+
+
-
-
-

You can add a hover effect on each row

-
-
- table is-hoverable -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
+
+
+

Add stripes to the table.

+
+
+ table is-striped +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
-
-
-

You can have a fullwidth table.

-
-
- table is-fullwidth -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
+
+
+

Make the cells narrower.

+
+
+ table is-narrow +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
-
-
-

You can combine all five modifiers.

-
-
- table is-bordered is-striped is-narrow is-hoverable is-fullwidth -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
+
+
+

You can add a hover effect on each row

+
+
+ table is-hoverable +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
- {% include variables.html type='element' %} +
+
+

You can have a fullwidth table.

+
+
+ table is-fullwidth +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
+
+
+

You can combine all five modifiers.

+
+
+ table is-bordered is-striped is-narrow is-hoverable is-fullwidth
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+ + +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index 39582caa1..5cc32a98f 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -1,8 +1,18 @@ --- title: Tags +subtitle: "Small tag labels to insert anywhere" layout: documentation doc-tab: elements doc-subtab: tag +breadcrumb: +- home +- documentation +- elements +- elements-tag +meta: + colors: true + sizes: true + variables: true --- {% capture tag %} @@ -179,274 +189,257 @@ doc-subtab: tag {% endcapture %} -
-
-

Tags

-

- Small tag labels to insert anywhere -

- {% - include meta.html - colors=true - sizes=true - variables=true - %} - -
- -
-
- By default, a tag is a 1.5rem high label. -
-
- - Tag label - -
-
- {% highlight html %}{{ tag }}{% endhighlight %} -
-
+
+
+ By default, a tag is a 1.5rem high label. +
+
+ + Tag label + +
+
+ {% highlight html %}{{ tag }}{% endhighlight %} +
+
- {% include anchor.html name="Colors" %} - -
-
- Like with buttons, there are 10 different colors available. -
-
-

- - Black - -

-

- - Dark - -

-

- - Light - -

-

- - White - -

-

- - Primary - -

-

- - Link - -

-

- - Info - -

-

- - Success - -

-

- - Warning - -

- - Danger - -
-
- {% highlight html %}{{ tags_colors }}{% endhighlight %} -
-
+{% include anchor.html name="Colors" %} - {% include anchor.html name="Sizes" %} - -
-
- And 2 additional sizes. -
-
-

- - Medium - -

-

- - Large - -

-
-
- {% highlight html %}{{ sizes }}{% endhighlight %} -
-
+
+
+ Like with buttons, there are 10 different colors available. +
+
+

+ + Black + +

+

+ + Dark + +

+

+ + Light + +

+

+ + White + +

+

+ + Primary + +

+

+ + Link + +

+

+ + Info + +

+

+ + Success + +

+

+ + Warning + +

+ + Danger + +
+
+ {% highlight html %}{{ tags_colors }}{% endhighlight %} +
+
- {% include anchor.html name="Modifiers" %} - -
-
- You can add the is-rounded modifier to make a rounded tag. -
-
- {{ rounded }} -
-
- {% highlight html %}{{ rounded }}{% endhighlight %} -
-
+{% include anchor.html name="Sizes" %} -
-
- You can add the is-delete modifier to turn the tag into a delete button. -
-
- {{ is_delete }} -
-
- {% highlight html %}{{ is_delete }}{% endhighlight %} -
-
+
+
+ And 2 additional sizes. +
+
+

+ + Medium + +

+

+ + Large + +

+
+
+ {% highlight html %}{{ sizes }}{% endhighlight %} +
+
- {% include anchor.html name="Combinations" %} - -
-
- You can append a delete button. -
-
-

- - Bar - - -

-

- - Hello - - -

-

- - World - - -

-
-
- {% highlight html %}{{ delete }}{% endhighlight %} -
-
+{% include anchor.html name="Modifiers" %} - {% include anchor.html name="List of tags" %} - -
-
-
-

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

-
-
- {{ tags }} -
-
-
- {% highlight html %}{{ tags }}{% endhighlight %} -
-
+
+
+ You can add the is-rounded modifier to make a rounded tag. +
+
+ {{ rounded }} +
+
+ {% highlight html %}{{ rounded }}{% endhighlight %} +
+
+ +
+
+ You can add the is-delete modifier to turn the tag into a delete button. +
+
+ {{ is_delete }} +
+
+ {% highlight html %}{{ is_delete }}{% endhighlight %} +
+
+ +{% include anchor.html name="Combinations" %} + +
+
+ You can append a delete button. +
+
+

+ + Bar + + +

+

+ + Hello + + +

+

+ + World + + +

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

- If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced. -

-
-
- {{ tags_multiple }} -
-
-
- {% highlight html %}{{ tags_multiple }}{% endhighlight %} -
+{% include anchor.html name="List of tags" %} + +
+
+
+

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

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

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

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

+ If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced. +

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

- You can attach a text tag with a delete tag together. -

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

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

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

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

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

+ You can attach a text tag with a delete tag together. +

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

- This can be useful for a long list of blog tags. -

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

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

+
+ {{ tags_field_addons }} +
+
+
+ {% highlight html %}{{ tags_field_addons }}{% endhighlight %} +
+
- {% include variables.html type='element' %} +
+
+
+

+ This can be useful for a long list of blog tags. +

+
+
+ {{ tags_blog_addons }} +
-
+
+ {% highlight html %}{{ tags_blog_addons }}{% endhighlight %} +
+ + +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html index d7178f295..27614db74 100644 --- a/docs/documentation/elements/title.html +++ b/docs/documentation/elements/title.html @@ -1,8 +1,18 @@ --- title: Title and Subtitle +subtitle: "Simple headings to add depth to your page" layout: documentation doc-tab: elements doc-subtab: title +breadcrumb: +- home +- documentation +- elements +- elements-title +meta: + colors: false + sizes: true + variables: true --- {% capture default %} @@ -50,139 +60,119 @@ doc-subtab: title

Subtitle 5

{% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Titles

-

- Simple headings to add depth to your page -

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

There are 2 types of heading:

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

Title

-

Subtitle

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

There are 2 types of heading:

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

Title

+

Subtitle

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

There are 6 sizes available:

-
-
-

Title 1

-

Title 2

-

Title 3 (default size)

-

Title 4

-

Title 5

-

Title 6

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

Subtitle 1

-

Subtitle 2

-

Subtitle 3

-

Subtitle 4

-

Subtitle 5 (default size)

-

Subtitle 6

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

There are 6 sizes available:

+
+
+

Title 1

+

Title 2

+

Title 3 (default size)

+

Title 4

+

Title 5

+

Title 6

+
+
+ {% highlight html %}{{ title_sizes }}{% endhighlight %} +
+
+ +
+
+
+

Subtitle 1

+

Subtitle 2

+

Subtitle 3

+

Subtitle 4

+

Subtitle 5 (default size)

+

Subtitle 6

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

When you combine a title and a subtitle, they move closer together.

-

As a rule of thumb, it is recommended to use a size difference of two. So if you use a title is-1, combine it with a subtitle is-3.

-
-
-
-
-

Title 1

-

Subtitle 3

-
-
-

Title 2

-

Subtitle 4

-
-
-

Title 3

-

Subtitle 5

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

- New! -

-

You can maintain the normal spacing between titles and subtitles if you use the is-spaced modifier on the first element.

-
-
-
-
-

Title 1

-

Subtitle 3

-
-
-

Title 2

-

Subtitle 4

-
-
-

Title 3

-

Subtitle 5

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

When you combine a title and a subtitle, they move closer together.

+

As a rule of thumb, it is recommended to use a size difference of two. So if you use a title is-1, combine it with a subtitle is-3.

+
+
+
+
+

Title 1

+

Subtitle 3

+
+
+

Title 2

+

Subtitle 4

+
+
+

Title 3

+

Subtitle 5

+
+
+ {% highlight html %}{{ combine }}{% endhighlight %} +
+
- {% include variables.html type='element' %} +
+
+
+
+

+ New! +

+

You can maintain the normal spacing between titles and subtitles if you use the is-spaced modifier on the first element.

+
-
+
+
+

Title 1

+

Subtitle 3

+
+
+

Title 2

+

Subtitle 4

+
+
+

Title 3

+

Subtitle 5

+
+
+
+ {% highlight html %}{{ spaced }}{% endhighlight %} +
+ + +{% include variables.html type='element' %} diff --git a/sass/elements/table.sass b/sass/elements/table.sass index 001337483..d0e94e561 100644 --- a/sass/elements/table.sass +++ b/sass/elements/table.sass @@ -20,9 +20,9 @@ $table-striped-row-even-background-color: $white-bis !default $table-striped-row-even-hover-background-color: $white-ter !default .table + +block background-color: $table-background-color color: $table-color - margin-bottom: 1.5rem td, th border: $table-cell-border @@ -114,4 +114,4 @@ $table-striped-row-even-hover-background-color: $white-ter !default +overflow-touch overflow: auto overflow-y: hidden - max-width: 100% \ No newline at end of file + max-width: 100%