diff --git a/docs/_data/links.json b/docs/_data/links.json index 470ee9d1..c22fd67d 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -322,6 +322,14 @@ "blog": { "name": "Blog", "path": "/blog" + }, + "expo": { + "name": "Expo", + "path": "/expo" + }, + "love": { + "name": "Love", + "path": "/love" } }, "categories": { diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html deleted file mode 100644 index b43648da..00000000 --- a/docs/_includes/blog-hero.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-

- Blog -

-

- Stay updated about new features, bug fixes, and releases -

- - - - - Subscribe - -
- -
- {% include carbon.html %} -
-
diff --git a/docs/_includes/book-banner.html b/docs/_includes/book/book-banner.html similarity index 74% rename from docs/_includes/book-banner.html rename to docs/_includes/book/book-banner.html index 11234408..1cd99b95 100644 --- a/docs/_includes/book-banner.html +++ b/docs/_includes/book/book-banner.html @@ -4,12 +4,12 @@
- {% include book-cover.html %} + {% include book/book-cover.html %}
- {% include book-content.html show_cover=false %} + {% include book/book-content.html show_cover=false %}
- \ No newline at end of file + diff --git a/docs/_includes/book-content.html b/docs/_includes/book/book-content.html similarity index 98% rename from docs/_includes/book-content.html rename to docs/_includes/book/book-content.html index e6cf82eb..1c9c8db6 100644 --- a/docs/_includes/book-content.html +++ b/docs/_includes/book/book-content.html @@ -7,7 +7,7 @@ {% if include.show_cover %}
- {% include book-cover.html %} + {% include book/book-cover.html %}
{% endif %} diff --git a/docs/_includes/book-cover.html b/docs/_includes/book/book-cover.html similarity index 100% rename from docs/_includes/book-cover.html rename to docs/_includes/book/book-cover.html diff --git a/docs/_includes/book-modal.html b/docs/_includes/book/book-modal.html similarity index 78% rename from docs/_includes/book-modal.html rename to docs/_includes/book/book-modal.html index 182ab0bd..a99d164f 100644 --- a/docs/_includes/book-modal.html +++ b/docs/_includes/book/book-modal.html @@ -3,12 +3,12 @@
- {% include book-cover.html %} + {% include book/book-cover.html %}
- {% include book-content.html show_cover=true %} + {% include book/book-content.html show_cover=true %}
- \ No newline at end of file + diff --git a/docs/_includes/comparison.html b/docs/_includes/content/comparison.html similarity index 100% rename from docs/_includes/comparison.html rename to docs/_includes/content/comparison.html diff --git a/docs/_includes/klmn.html b/docs/_includes/content/klmn.html similarity index 100% rename from docs/_includes/klmn.html rename to docs/_includes/content/klmn.html diff --git a/docs/_includes/pro.html b/docs/_includes/content/pro.html similarity index 100% rename from docs/_includes/pro.html rename to docs/_includes/content/pro.html diff --git a/docs/_includes/anchor.html b/docs/_includes/elements/anchor.html similarity index 100% rename from docs/_includes/anchor.html rename to docs/_includes/elements/anchor.html diff --git a/docs/_includes/bsa.html b/docs/_includes/elements/bsa.html similarity index 100% rename from docs/_includes/bsa.html rename to docs/_includes/elements/bsa.html diff --git a/docs/_includes/carbon.html b/docs/_includes/elements/carbon.html similarity index 100% rename from docs/_includes/carbon.html rename to docs/_includes/elements/carbon.html diff --git a/docs/_includes/meta.html b/docs/_includes/elements/meta.html similarity index 100% rename from docs/_includes/meta.html rename to docs/_includes/elements/meta.html diff --git a/docs/_includes/patreon.html b/docs/_includes/elements/patreon.html similarity index 100% rename from docs/_includes/patreon.html rename to docs/_includes/elements/patreon.html diff --git a/docs/_includes/snippet.html b/docs/_includes/elements/snippet.html similarity index 100% rename from docs/_includes/snippet.html rename to docs/_includes/elements/snippet.html diff --git a/docs/_includes/tw.html b/docs/_includes/elements/tw.html similarity index 100% rename from docs/_includes/tw.html rename to docs/_includes/elements/tw.html diff --git a/docs/_includes/tws.html b/docs/_includes/elements/tws.html similarity index 67% rename from docs/_includes/tws.html rename to docs/_includes/elements/tws.html index 6aaf83cf..55e5d3cd 100644 --- a/docs/_includes/tws.html +++ b/docs/_includes/elements/tws.html @@ -1,24 +1,24 @@
- {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include elements/tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include elements/tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include elements/tw.html tweet=tweet%}
diff --git a/docs/_includes/variables.html b/docs/_includes/elements/variables.html similarity index 97% rename from docs/_includes/variables.html rename to docs/_includes/elements/variables.html index de0d3e7a..786164ab 100644 --- a/docs/_includes/variables.html +++ b/docs/_includes/elements/variables.html @@ -24,7 +24,7 @@ {% endcapture %} -{% include anchor.html name=anchor_name %} +{% include elements/anchor.html name=anchor_name %}

{{ content | strip }}

diff --git a/docs/_includes/deprecated.html b/docs/_includes/global/deprecated.html similarity index 100% rename from docs/_includes/deprecated.html rename to docs/_includes/global/deprecated.html diff --git a/docs/_includes/footer.html b/docs/_includes/global/footer.html similarity index 94% rename from docs/_includes/footer.html rename to docs/_includes/global/footer.html index bff37d9c..05be9bfd 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/global/footer.html @@ -1,10 +1,10 @@ -{% include native.html %} +{% include global/native.html %} -{% include book-banner.html %} +{% include book/book-banner.html %} -{% include sponsors.html %} +{% include global/sponsors.html %} -{% include newsletter.html %} +{% include global/newsletter.html %}
@@ -83,6 +83,6 @@
-{% include book-modal.html %} +{% include book/book-modal.html %} -{% include scripts.html %} +{% include global/scripts.html %} diff --git a/docs/_includes/fortyfour.html b/docs/_includes/global/fortyfour.html similarity index 100% rename from docs/_includes/fortyfour.html rename to docs/_includes/global/fortyfour.html diff --git a/docs/_includes/head.html b/docs/_includes/global/head.html similarity index 100% rename from docs/_includes/head.html rename to docs/_includes/global/head.html diff --git a/docs/_includes/native.html b/docs/_includes/global/native.html similarity index 100% rename from docs/_includes/native.html rename to docs/_includes/global/native.html diff --git a/docs/_includes/navbar.html b/docs/_includes/global/navbar.html similarity index 100% rename from docs/_includes/navbar.html rename to docs/_includes/global/navbar.html diff --git a/docs/_includes/newsletter.html b/docs/_includes/global/newsletter.html similarity index 100% rename from docs/_includes/newsletter.html rename to docs/_includes/global/newsletter.html diff --git a/docs/_includes/scripts.html b/docs/_includes/global/scripts.html similarity index 100% rename from docs/_includes/scripts.html rename to docs/_includes/global/scripts.html diff --git a/docs/_includes/sponsors.html b/docs/_includes/global/sponsors.html similarity index 100% rename from docs/_includes/sponsors.html rename to docs/_includes/global/sponsors.html diff --git a/docs/_includes/header.html b/docs/_includes/header.html deleted file mode 100644 index fa63e9db..00000000 --- a/docs/_includes/header.html +++ /dev/null @@ -1,69 +0,0 @@ - diff --git a/docs/_includes/features.html b/docs/_includes/index/features.html similarity index 100% rename from docs/_includes/features.html rename to docs/_includes/index/features.html diff --git a/docs/_includes/index/intro.html b/docs/_includes/index/intro.html index cc4b2171..ac46242c 100644 --- a/docs/_includes/index/intro.html +++ b/docs/_includes/index/intro.html @@ -50,10 +50,10 @@
- {% include sponsor.html %} + {% include index/sponsor.html %}
- {% include carbon.html %} + {% include elements/carbon.html %}
diff --git a/docs/_includes/sponsor.html b/docs/_includes/index/sponsor.html similarity index 100% rename from docs/_includes/sponsor.html rename to docs/_includes/index/sponsor.html diff --git a/docs/_includes/getting-started.html b/docs/_includes/snippets/getting-started.html similarity index 100% rename from docs/_includes/getting-started.html rename to docs/_includes/snippets/getting-started.html diff --git a/docs/_includes/subnav-columns.html b/docs/_includes/subnav-columns.html deleted file mode 100644 index 3542fff1..00000000 --- a/docs/_includes/subnav-columns.html +++ /dev/null @@ -1,24 +0,0 @@ - diff --git a/docs/_includes/testimonials.html b/docs/_includes/testimonials.html deleted file mode 100644 index 06707ead..00000000 --- a/docs/_includes/testimonials.html +++ /dev/null @@ -1,41 +0,0 @@ -
-
-
-
- -
- -
- -
-
- -
- - - -
- -
- - -
- -
-
-
- -
-

- - See more love πŸ€— - -

-
-
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index fdc52d80..fed367e1 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -1,9 +1,9 @@ - {% include head.html %} + {% include global/head.html %} - {% include deprecated.html %} + {% include global/deprecated.html %} {{ content }} - {% include footer.html %} + {% include global/footer.html %} diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 89b8dea4..201633eb 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -3,7 +3,7 @@ layout: default route: documentation --- -{% include navbar.html id="Documentation" %} +{% include global/navbar.html id="Documentation" %} {% assign current_category = page.doc-tab %} {% assign current_link_id = page.breadcrumb | last %} @@ -47,7 +47,7 @@ route: documentation

{% if page.meta %} {% - include meta.html + include elements/meta.html colors=page.meta.colors sizes=page.meta.sizes variables=page.meta.variables @@ -57,7 +57,7 @@ route: documentation
- {% include carbon.html %} + {% include elements/carbon.html %}
diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index 188b020f..552e49d7 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -6,7 +6,7 @@ breadcrumb: - blog --- -{% include navbar.html id="Blog" %} +{% include global/navbar.html id="Blog" %}
@@ -67,7 +67,7 @@ breadcrumb:
- {% include carbon.html %} + {% include elements/carbon.html %}
diff --git a/docs/_sass/expo.sass b/docs/_sass/expo.sass index d488fe63..a30f43f4 100644 --- a/docs/_sass/expo.sass +++ b/docs/_sass/expo.sass @@ -1,5 +1,5 @@ .bd-expo - background-color: $background + background-color: $white padding: 1.5rem .bd-website diff --git a/docs/_sass/love.sass b/docs/_sass/love.sass index 7e60de31..f00f585b 100644 --- a/docs/_sass/love.sass +++ b/docs/_sass/love.sass @@ -1,6 +1,3 @@ -.bd-love - background-color: $background - .bd-testimonials background-color: $background @@ -75,14 +72,7 @@ display: flex justify-content: center -// .bd-embrace -// background-color: $background -// border-radius: $radius -// padding: 1.5rem - +mobile - .bd-love - padding: 1.5rem .bd-hug margin: 1.5rem .bd-embrace @@ -95,8 +85,6 @@ margin-top: 0.75rem +tablet - .bd-love - padding: 3rem 1.5rem .bd-embrace align-items: center display: flex diff --git a/docs/_sass/twitter.sass b/docs/_sass/twitter.sass index 0690447b..b837a510 100644 --- a/docs/_sass/twitter.sass +++ b/docs/_sass/twitter.sass @@ -11,8 +11,8 @@ $tw-grey: #697882 .bd-tw background-color: #fff - border: 1px solid #e1e8ed - border-radius: 5px + border: 2px solid #e1e8ed + border-radius: $radius-large color: $tw-grey flex-shrink: 0 font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif diff --git a/docs/alternative-to-bootstrap.html b/docs/alternative-to-bootstrap.html index 85f848e5..8c7a366b 100644 --- a/docs/alternative-to-bootstrap.html +++ b/docs/alternative-to-bootstrap.html @@ -89,7 +89,7 @@ bootstrap: - {% include navbar.html id="Documentation" %} + {% include global/navbar.html id="Documentation" %}
@@ -105,7 +105,7 @@ bootstrap:

- {% include carbon.html %} + {% include elements/carbon.html %}
@@ -135,7 +135,7 @@ bootstrap:
{% for pro in page.bulma %} {% - include pro.html + include content/pro.html type=pro.type icon=pro.icon icon_brand=pro.icon_brand @@ -156,7 +156,7 @@ bootstrap:
{% for pro in page.bootstrap %} {% - include pro.html + include content/pro.html type=pro.type icon=pro.icon icon_brand=pro.icon_brand @@ -198,13 +198,13 @@ bootstrap: - {% include comparison.html %} + {% include content/comparison.html %}
- {% include footer.html %} + {% include global/footer.html %} diff --git a/docs/backers.html b/docs/backers.html index d8fa9762..ff917940 100644 --- a/docs/backers.html +++ b/docs/backers.html @@ -4,7 +4,7 @@ layout: default route: backers --- -{% include navbar.html id="BackersNavbar" %} +{% include global/navbar.html id="BackersNavbar" %}
@@ -19,7 +19,7 @@ route: backers

- {% include carbon.html %} + {% include elements/carbon.html %}
diff --git a/docs/blog.html b/docs/blog.html index fe865409..1576f033 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -6,7 +6,7 @@ breadcrumb: - blog --- -{% include navbar.html id="Blog" %} +{% include global/navbar.html id="Blog" %}
@@ -31,7 +31,7 @@ breadcrumb:
- {% include carbon.html %} + {% include elements/carbon.html %}
diff --git a/docs/bulma-start.html b/docs/bulma-start.html index ff7d2452..24055c6c 100644 --- a/docs/bulma-start.html +++ b/docs/bulma-start.html @@ -7,7 +7,7 @@ github_url: https://github.com/jgthms/bulma-start npm_url: https://www.npmjs.com/package/bulma-start --- -{% include navbar.html id="BulmaStartHero" %} +{% include global/navbar.html id="BulmaStartHero" %}
@@ -22,7 +22,7 @@ npm_url: https://www.npmjs.com/package/bulma-start

- {% include carbon.html %} + {% include elements/carbon.html %}
@@ -47,7 +47,7 @@ npm_url: https://www.npmjs.com/package/bulma-start - {% include anchor.html name="Install" %} + {% include elements/anchor.html name="Install" %} {% highlight bash %}npm install bulma-start{% endhighlight %} @@ -55,7 +55,7 @@ npm_url: https://www.npmjs.com/package/bulma-start {% highlight bash %}yarn add bulma-start{% endhighlight %} - {% include anchor.html name="What’s included" %} + {% include elements/anchor.html name="What’s included" %}

The npm dependencies included in package.json are:

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index bd49c968..eaa75d87 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -11482,8 +11482,8 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-tw { background-color: #fff; - border: 1px solid #e1e8ed; - border-radius: 5px; + border: 2px solid #e1e8ed; + border-radius: 6px; color: #697882; flex-shrink: 0; font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif; @@ -11715,7 +11715,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-expo { - background-color: whitesmoke; + background-color: white; padding: 1.5rem; } @@ -11796,10 +11796,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { } } -.bd-love { - background-color: whitesmoke; -} - .bd-testimonials { background-color: whitesmoke; } @@ -11902,9 +11898,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { } @media screen and (max-width: 768px) { - .bd-love { - padding: 1.5rem; - } .bd-hug { margin: 1.5rem; } @@ -11923,9 +11916,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { } @media screen and (min-width: 769px), print { - .bd-love { - padding: 3rem 1.5rem; - } .bd-embrace { align-items: center; display: flex; diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html index 44e9e0bc..3172ffac 100644 --- a/docs/documentation/columns/gap.html +++ b/docs/documentation/columns/gap.html @@ -84,7 +84,7 @@ breadcrumb:
{% endcapture %} -{% include anchor.html name="Default gap" %} +{% include elements/anchor.html name="Default gap" %}

@@ -96,7 +96,7 @@ breadcrumb: {{ columns_default_gap }} -{% include anchor.html name="Gapless" %} +{% include elements/anchor.html name="Gapless" %}

@@ -161,7 +161,7 @@ breadcrumb: {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}

-{% include anchor.html name="Variable gap" %} +{% include elements/anchor.html name="Variable gap" %}
@@ -198,7 +198,7 @@ breadcrumb:

-{% include klmn.html %} +{% include content/klmn.html %}
diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html index 586ddc3d..b3ae3092 100644 --- a/docs/documentation/columns/options.html +++ b/docs/documentation/columns/options.html @@ -88,7 +88,7 @@ breadcrumb:
{% endcapture %} -{% include anchor.html name="Multiline" %} +{% include elements/anchor.html name="Multiline" %}

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

@@ -126,7 +126,7 @@ breadcrumb: {% highlight html %}{{ columns_multiline }}{% endhighlight %} -{% include anchor.html name="Centering columns" %} +{% include elements/anchor.html name="Centering columns" %}

diff --git a/docs/documentation/columns/responsiveness.html b/docs/documentation/columns/responsiveness.html index 23fdaa73..c4112058 100644 --- a/docs/documentation/columns/responsiveness.html +++ b/docs/documentation/columns/responsiveness.html @@ -42,7 +42,7 @@ breadcrumb:

{% endcapture %} -{% include anchor.html name="Mobile columns" %} +{% include elements/anchor.html name="Mobile columns" %}

@@ -101,7 +101,7 @@ breadcrumb: {% highlight html %}{{ columns_desktop }}{% endhighlight %} -{% include anchor.html name="Different column sizes per breakpoint" %} +{% include elements/anchor.html name="Different column sizes per breakpoint" %}

You can define a column size for each viewport size: mobile, tablet, and desktop.

diff --git a/docs/documentation/columns/sizes.html b/docs/documentation/columns/sizes.html index 465596dc..bcc2d098 100644 --- a/docs/documentation/columns/sizes.html +++ b/docs/documentation/columns/sizes.html @@ -272,7 +272,7 @@ breadcrumb: {% highlight html %}{{ columns_sizes }}{% endhighlight %}
-{% include anchor.html name="12 columns system" %} +{% include elements/anchor.html name="12 columns system" %}

As the grid can be divided into 12 columns, there are size classes for each division:

@@ -511,7 +511,7 @@ breadcrumb:
-{% include anchor.html name="Offset" %} +{% include elements/anchor.html name="Offset" %}

@@ -559,7 +559,7 @@ breadcrumb: {% highlight html %}{{ columns_offset }}{% endhighlight %}

-{% include anchor.html name="Narrow column" %} +{% include elements/anchor.html name="Narrow column" %}

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index f001c525..42b4d759 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -170,50 +170,50 @@ meta:
-{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_example horizontal=true clipped=true %} -{% include anchor.html name="Alignment" %} +{% include elements/anchor.html name="Alignment" %}

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

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

You can use any of the Font Awesome icons.

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

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_arrow_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

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

-{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index dbed0f12..7534c9b3 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -178,4 +178,4 @@ meta:
-{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index 76e0909e..9cfb01ad 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -238,7 +238,7 @@ meta:
-{% include anchor.html name="Dropdown content" %} +{% include elements/anchor.html name="Dropdown content" %}

@@ -255,7 +255,7 @@ meta:

-{% include anchor.html name="Hoverable or Toggable" %} +{% include elements/anchor.html name="Hoverable or Toggable" %}

@@ -286,7 +286,7 @@ meta:

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

@@ -314,7 +314,7 @@ meta:

-{% include anchor.html name="Dropup" %} +{% include elements/anchor.html name="Dropup" %}

@@ -331,4 +331,4 @@ meta:

-{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index 476de2e4..c5d3c1ce 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -51,6 +51,6 @@ meta: {% endcapture %} -{% include snippet.html content=menu_example size="one-third" %} +{% include elements/snippet.html content=menu_example size="one-third" %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index 90aa3f05..b595b33d 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -117,28 +117,28 @@ meta: {% endfor %} {% endcapture %} -{% include snippet.html content=message_example %} +{% include elements/snippet.html content=message_example %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=message_colors_example %} +{% include elements/snippet.html content=message_colors_example %} -{% include anchor.html name="Message body only" %} +{% include elements/anchor.html name="Message body only" %}

You can omit the message header:

-{% include snippet.html content=message_body_example %} +{% include elements/snippet.html content=message_body_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %} -{% include snippet.html content=message_small %} +{% include elements/snippet.html content=message_small %} -{% include snippet.html content=message_normal %} +{% include elements/snippet.html content=message_normal %} -{% include snippet.html content=message_medium %} +{% include elements/snippet.html content=message_medium %} -{% include snippet.html content=message_large %} +{% include elements/snippet.html content=message_large %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index 9bf7a2f9..0d36d6ad 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -121,7 +121,7 @@ meta: {% highlight html %}{{ modal_card }}{% endhighlight %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} -{% include anchor.html name="Navbar brand" %} +{% include elements/anchor.html name="Navbar brand" %}

@@ -622,7 +622,7 @@ document.addEventListener('DOMContentLoaded', function () {

-{% include anchor.html name="Navbar burger" %} +{% include elements/anchor.html name="Navbar burger" %}

@@ -654,7 +654,7 @@ document.addEventListener('DOMContentLoaded', function () {

-{% include anchor.html name="Navbar menu" %} +{% include elements/anchor.html name="Navbar menu" %}

@@ -705,7 +705,7 @@ document.addEventListener('DOMContentLoaded', function () {

-{% include anchor.html name="Navbar start and navbar end" %} +{% include elements/anchor.html name="Navbar start and navbar end" %}

@@ -729,7 +729,7 @@ document.addEventListener('DOMContentLoaded', function () { {% highlight html %}{{navbar_start_end_example}}{% endhighlight %} -{% include anchor.html name="Navbar item" %} +{% include elements/anchor.html name="Navbar item" %}

@@ -784,7 +784,7 @@ document.addEventListener('DOMContentLoaded', function () {

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

@@ -792,9 +792,9 @@ document.addEventListener('DOMContentLoaded', function () {

-{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %} +{% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %} -{% include anchor.html name="Fixed navbar" %} +{% include elements/anchor.html name="Fixed navbar" %} {% include elements/new-tag.html version="0.6.1" %} @@ -822,7 +822,7 @@ document.addEventListener('DOMContentLoaded', function () {
-{% include anchor.html name="Dropdown menu" %} +{% include elements/anchor.html name="Dropdown menu" %}

@@ -1048,7 +1048,7 @@ document.addEventListener('DOMContentLoaded', function () { {% highlight html %}{{ navbar_divider_example }}{% endhighlight %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}

New! @@ -1115,5 +1115,5 @@ document.addEventListener('DOMContentLoaded', function () { {% include examples/navbar-color.html color="white" light=true %}
-{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index 7ba7a630..b1dbe225 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -183,7 +183,7 @@ meta:

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

@@ -191,7 +191,7 @@ meta:

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

@@ -199,11 +199,11 @@ meta:

-{% include snippet.html content=pagination_centered_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_centered_example horizontal=true more=true %} -{% include snippet.html content=pagination_right_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_right_example horizontal=true more=true %} -{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %} {% include elements/new-tag.html version="0.6.2" %} @@ -211,19 +211,19 @@ meta: Add the is-rounded modifier to have rounded pagination items.

-{% include snippet.html content=pagination_rounded_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_rounded_example horizontal=true more=true %} -{% include anchor.html name="Sizes" %} +{% include elements/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.

-{% include snippet.html content=pagination_small_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_small_example horizontal=true more=true %} -{% include snippet.html content=pagination_medium_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_medium_example horizontal=true more=true %} -{% include snippet.html content=pagination_large_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_large_example horizontal=true more=true %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index 2695e45f..9fa379ad 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -108,6 +108,6 @@ meta:

-{% include snippet.html content=panel_example size="one-third" %} +{% include elements/snippet.html content=panel_example size="one-third" %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index fef4f7d3..afe949c5 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -358,11 +358,11 @@ meta: The default tabs style has a single border at the bottom.

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

@@ -370,44 +370,44 @@ meta:

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

You can use any of the Font Awesome icons.

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

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

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

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

-{% include snippet.html content=tabs_toggle_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_toggle_example horizontal=true more=true %} {% include elements/new-tag.html version="0.6.2" %} @@ -415,26 +415,26 @@ meta: If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded.

-{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}

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

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

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

-{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} -{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} +{% include elements/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 elements/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 elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html index fc21761a..2368ed41 100644 --- a/docs/documentation/elements/box.html +++ b/docs/documentation/elements/box.html @@ -62,6 +62,6 @@ meta:

-{% include snippet.html content=box_example more=true %} +{% include elements/snippet.html content=box_example more=true %} -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index da566aec..e57add8d 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -463,7 +463,7 @@ meta:

-{% include snippet.html content=button_example %} +{% include elements/snippet.html content=button_example %}

@@ -485,23 +485,23 @@ meta:

-{% include snippet.html content=button_tags_example %} +{% include elements/snippet.html content=button_tags_example %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=button_colors_a_example %} +{% include elements/snippet.html content=button_colors_a_example %} -{% include snippet.html content=button_colors_b_example %} +{% include elements/snippet.html content=button_colors_b_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %} -{% include snippet.html content=button_sizes_example %} +{% include elements/snippet.html content=button_sizes_example %} -{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %}

Outlined

-{% include snippet.html content=button_outlined_example %} +{% include elements/snippet.html content=button_outlined_example %}

Inverted (the text color becomes the background color, and vice-versa)

@@ -541,23 +541,23 @@ meta: -{% include anchor.html name="States" %} +{% include elements/anchor.html name="States" %}

Normal

-{% include snippet.html content=button_normal_example %} +{% include elements/snippet.html content=button_normal_example %}

Hover

-{% include snippet.html content=button_hover_example %} +{% include elements/snippet.html content=button_hover_example %}

Focus

-{% include snippet.html content=button_focus_example %} +{% include elements/snippet.html content=button_focus_example %}

Active

-{% include snippet.html content=button_active_example %} +{% include elements/snippet.html content=button_active_example %}

Loading

@@ -617,7 +617,7 @@ meta:

With Font Awesome icons

-{% include snippet.html content=button_fa_example clipped=true %} +{% include elements/snippet.html content=button_fa_example clipped=true %}
@@ -633,31 +633,31 @@ meta:
-{% include anchor.html name="Button group" %} +{% include elements/anchor.html name="Button group" %}

If you want to group buttons together on a single line, use the is-grouped modifier on the field container:

-{% include snippet.html content=button_group_example %} +{% include elements/snippet.html content=button_group_example %} -{% include anchor.html name="Button addons" %} +{% include elements/anchor.html name="Button addons" %}

If you want to use buttons as addons, use the has-addons modifier on the field container:

-{% include snippet.html content=button_addons_example %} +{% include elements/snippet.html content=button_addons_example %} -{% include anchor.html name="Button group with addons" %} +{% include elements/anchor.html name="Button group with addons" %}

You can group together addons as well:

-{% include snippet.html content=button_group_addons_example %} +{% include elements/snippet.html content=button_group_addons_example %} -{% include anchor.html name="List of buttons" %} +{% include elements/anchor.html name="List of buttons" %} {% include elements/new-tag.html version="0.6.1" %} @@ -775,4 +775,4 @@ meta: -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html index 331c5522..675a47e2 100644 --- a/docs/documentation/elements/content.html +++ b/docs/documentation/elements/content.html @@ -123,9 +123,9 @@ meta:

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

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

@@ -173,4 +173,4 @@ meta:
-{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html index 3332f9f6..666904d8 100644 --- a/docs/documentation/elements/delete.html +++ b/docs/documentation/elements/delete.html @@ -58,9 +58,9 @@ meta:

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

@@ -68,9 +68,9 @@ meta:

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

@@ -78,4 +78,4 @@ meta:

-{% include snippet.html content=cross_elements_example %} +{% include elements/snippet.html content=cross_elements_example %} diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index c5ee6ab8..3ba2ff5b 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -82,7 +82,7 @@ meta:
- {% include snippet.html content=icon_example %} + {% include elements/snippet.html content=icon_example %}
@@ -97,7 +97,7 @@ meta: By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

-{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}

@@ -105,9 +105,9 @@ meta:

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

@@ -283,7 +283,7 @@ meta: -{% include anchor.html name="Font Awesome variations" %} +{% include elements/anchor.html name="Font Awesome variations" %}

@@ -426,7 +426,7 @@ meta: -{% include anchor.html name="Material Design Icons" %} +{% include elements/anchor.html name="Material Design Icons" %}

@@ -750,7 +750,7 @@ meta: -{% include anchor.html name="Open Iconic" %} +{% include elements/anchor.html name="Open Iconic" %}

@@ -848,7 +848,7 @@ meta: -{% include anchor.html name="Ionicons" %} +{% include elements/anchor.html name="Ionicons" %}

@@ -946,4 +946,4 @@ meta: -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html index 92419252..8ed13870 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -38,9 +38,9 @@ meta:

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

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

@@ -58,15 +58,15 @@ meta: -{% include anchor.html name="Retina images" %} +{% include elements/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 elements/snippet.html content=retina_image %} -{% include anchor.html name="Responsive images with ratios" %} +{% include elements/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):

@@ -161,4 +161,4 @@ meta:

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

-{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index de251176..d3ceb3b3 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -34,10 +34,10 @@ meta: {% endfor %} {% endcapture %} -{% include snippet.html content=notification %} +{% include elements/snippet.html content=notification %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=notification_colors %} +{% include elements/snippet.html content=notification_colors %} -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html index 51b4bafb..ee0320a2 100644 --- a/docs/documentation/elements/progress.html +++ b/docs/documentation/elements/progress.html @@ -34,14 +34,14 @@ meta: 60% {% endcapture %} -{% include snippet.html content=progress %} +{% include elements/snippet.html content=progress %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=progress_colors %} +{% include elements/snippet.html content=progress_colors %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %} -{% include snippet.html content=progress_sizes %} +{% include elements/snippet.html content=progress_sizes %} -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 16d64d49..d5b7d4cf 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -350,9 +350,9 @@ meta:

-{% include snippet.html content=table_example horizontal=true more=true %} +{% include elements/snippet.html content=table_example horizontal=true more=true %} -{% include anchor.html name="Modifiers" %} +{% include elements/anchor.html name="Modifiers" %}
@@ -584,4 +584,4 @@ meta:
-{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index a130a066..07443454 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -202,7 +202,7 @@ meta:
-{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}
@@ -263,7 +263,7 @@ meta:
-{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}
@@ -286,7 +286,7 @@ meta:
-{% include anchor.html name="Modifiers" %} +{% include elements/anchor.html name="Modifiers" %}
@@ -312,7 +312,7 @@ meta:
-{% include anchor.html name="Combinations" %} +{% include elements/anchor.html name="Combinations" %}
@@ -343,7 +343,7 @@ meta:
-{% include anchor.html name="List of tags" %} +{% include elements/anchor.html name="List of tags" %}
@@ -441,4 +441,4 @@ meta:
-{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html index 4a170168..55614e8e 100644 --- a/docs/documentation/elements/title.html +++ b/docs/documentation/elements/title.html @@ -82,7 +82,7 @@ meta:
-{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}
@@ -174,4 +174,4 @@ meta:
-{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html index 268d6610..ad028553 100644 --- a/docs/documentation/form/file.html +++ b/docs/documentation/form/file.html @@ -572,9 +572,9 @@ meta: -{% include snippet.html content=file %} +{% include elements/snippet.html content=file %} -{% include anchor.html name="Modifiers" %} +{% include elements/anchor.html name="Modifiers" %}
@@ -656,7 +656,7 @@ meta:
-{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}

@@ -671,9 +671,9 @@ meta:

-{% include snippet.html content=file_colors clipped=true %} +{% include elements/snippet.html content=file_colors clipped=true %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

@@ -692,15 +692,15 @@ meta:

-{% include snippet.html content=file_sizes clipped=true %} +{% include elements/snippet.html content=file_sizes clipped=true %} -{% include snippet.html content=file_sizes_name clipped=true %} +{% include elements/snippet.html content=file_sizes_name clipped=true %} -{% include snippet.html content=file_sizes_boxed clipped=true %} +{% include elements/snippet.html content=file_sizes_boxed clipped=true %} -{% include snippet.html content=file_sizes_boxed_name clipped=true %} +{% include elements/snippet.html content=file_sizes_boxed_name clipped=true %} -{% include anchor.html name="Alignment" %} +{% include elements/anchor.html name="Alignment" %}

@@ -716,11 +716,11 @@ meta:

-{% include snippet.html content=file_centered %} +{% include elements/snippet.html content=file_centered %} -{% include snippet.html content=file_right %} +{% include elements/snippet.html content=file_right %} -{% include anchor.html name="JavaScript" %} +{% include elements/anchor.html name="JavaScript" %}

@@ -730,7 +730,7 @@ meta:

-{% include anchor.html name="Variables" %} +{% include elements/anchor.html name="Variables" %}

diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index c7da8696..0c68ba33 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -816,9 +816,9 @@ variables_form_keys: When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

-{% include snippet.html content=example more=true %} +{% include elements/snippet.html content=example more=true %} -{% include anchor.html name="Form field" %} +{% include elements/anchor.html name="Form field" %}

The field container is a simple container for:

@@ -829,15 +829,15 @@ variables_form_keys:
-{% include snippet.html content=field_example %} +{% include elements/snippet.html content=field_example %}

This container allows form fields to be spaced consistently.

-{% include snippet.html content=fields_example %} +{% include elements/snippet.html content=fields_example %} -{% include anchor.html name="Form control" %} +{% include elements/anchor.html name="Form control" %}

The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:

@@ -849,14 +849,14 @@ variables_form_keys:
-{% include snippet.html content=control_input_example %} +{% include elements/snippet.html content=control_input_example %} -{% include snippet.html content=control_select_example %} +{% include elements/snippet.html content=control_select_example %} -{% include snippet.html content=control_button_example %} +{% include elements/snippet.html content=control_button_example %} -{% include anchor.html name="With icons" %} +{% include elements/anchor.html name="With icons" %}

You can append one of 2 modifiers on a control:

@@ -880,7 +880,7 @@ variables_form_keys:

The size of the input will define the size of the icon container.

-{% include snippet.html content=icons_example clipped=true %} +{% include elements/snippet.html content=icons_example clipped=true %}

@@ -888,7 +888,7 @@ variables_form_keys:

-{% include snippet.html content=select_icons_example %} +{% include elements/snippet.html content=select_icons_example %}

@@ -896,21 +896,21 @@ variables_form_keys:

-{% include snippet.html content=has_icons_small_example %} +{% include elements/snippet.html content=has_icons_small_example %} -{% include snippet.html content=has_icons_normal_example clipped=true %} +{% include elements/snippet.html content=has_icons_normal_example clipped=true %} -{% include snippet.html content=has_icons_medium_example clipped=true %} +{% include elements/snippet.html content=has_icons_medium_example clipped=true %} -{% include snippet.html content=has_icons_large_example clipped=true %} +{% include elements/snippet.html content=has_icons_large_example clipped=true %} -{% include anchor.html name="Form addons" %} +{% include elements/anchor.html name="Form addons" %}

If you want to attach controls together, use the has-addons modifier on the field container:

-{% include snippet.html content=addons_example %} +{% include elements/snippet.html content=addons_example %}

You can attach inputs, buttons, and dropdowns only.

@@ -920,29 +920,29 @@ variables_form_keys:

It can be useful to append a static button.

-{% include snippet.html content=addons_static_example %} +{% include elements/snippet.html content=addons_static_example %}

Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

-{% include snippet.html content=addons_expanded_example horizontal=true more=true %} +{% include elements/snippet.html content=addons_expanded_example horizontal=true more=true %}

If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.

-{% include snippet.html content=addons_expanded_fullwidth_example %} +{% include elements/snippet.html content=addons_expanded_fullwidth_example %}

Use the has-addons-centered or the has-addons-right modifiers to alter the alignment.

-{% include snippet.html content=addons_center_example %} +{% include elements/snippet.html content=addons_center_example %} -{% include snippet.html content=addons_right_example %} +{% include elements/snippet.html content=addons_right_example %} -{% include anchor.html name="Form group" %} +{% include elements/anchor.html name="Form group" %}

@@ -950,16 +950,16 @@ variables_form_keys:

-{% include snippet.html content=group_example %} +{% include elements/snippet.html content=group_example %}
Use the is-grouped-centered or the is-grouped-right modifiers to alter the alignment.

-{% include snippet.html content=group_centered_example %} +{% include elements/snippet.html content=group_centered_example %} -{% include snippet.html content=group_right_example %} +{% include elements/snippet.html content=group_right_example %}

@@ -967,7 +967,7 @@ variables_form_keys:

-{% include snippet.html content=group_expanded_example %} +{% include elements/snippet.html content=group_expanded_example %}

@@ -975,7 +975,7 @@ variables_form_keys:

-{% include snippet.html content=group_multiline_example clipped=true %} +{% include elements/snippet.html content=group_multiline_example clipped=true %}
@@ -990,7 +990,7 @@ variables_form_keys:
-{% include anchor.html name="Horizontal form" %} +{% include elements/anchor.html name="Horizontal form" %}

If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

@@ -1005,7 +1005,7 @@ variables_form_keys:

You can use is-grouped or has-addons for the child elements.

-{% include snippet.html content=horizontal_form_example horizontal=true more=true %} +{% include elements/snippet.html content=horizontal_form_example horizontal=true more=true %}

@@ -1027,9 +1027,9 @@ variables_form_keys:

-{% include snippet.html content=field_label_example horizontal=true more=true %} +{% include elements/snippet.html content=field_label_example horizontal=true more=true %} -{% include anchor.html name="Variables" %} +{% include elements/anchor.html name="Variables" %}

diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html index d0248ad5..d32fcc95 100644 --- a/docs/documentation/form/input.html +++ b/docs/documentation/form/input.html @@ -273,7 +273,7 @@ meta:

-{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}
@@ -284,7 +284,7 @@ meta:
-{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}
@@ -295,7 +295,7 @@ meta:
-{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %} {% include elements/new-tag.html version="0.6.2" %} @@ -308,7 +308,7 @@ meta: -{% include anchor.html name="States" %} +{% include elements/anchor.html name="States" %}

Normal

@@ -405,7 +405,7 @@ meta: {% highlight html %}{{ static_example }}{% endhighlight %} -{% include anchor.html name="With Font Awesome icons" %} +{% include elements/anchor.html name="With Font Awesome icons" %}

You can append one of 2 modifiers on a control:

@@ -478,7 +478,7 @@ meta:
-{% include anchor.html name="Variables" %} +{% include elements/anchor.html name="Variables" %}

diff --git a/docs/documentation/form/select.html b/docs/documentation/form/select.html index dd616ad5..dea0d061 100644 --- a/docs/documentation/form/select.html +++ b/docs/documentation/form/select.html @@ -315,7 +315,7 @@ meta:

-{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}
@@ -326,7 +326,7 @@ meta:
-{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %} {% include elements/new-tag.html version="0.6.2" %} @@ -339,7 +339,7 @@ meta: -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}
diff --git a/docs/documentation/form/textarea.html b/docs/documentation/form/textarea.html index bf89339c..6a353ba5 100644 --- a/docs/documentation/form/textarea.html +++ b/docs/documentation/form/textarea.html @@ -132,7 +132,7 @@ meta:
{% endcapture %} -{% include snippet.html content=textarea_example %} +{% include elements/snippet.html content=textarea_example %}

@@ -140,33 +140,33 @@ meta:

-{% include snippet.html content=textarea_rows_example %} +{% include elements/snippet.html content=textarea_rows_example %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=colors_example %} +{% include elements/snippet.html content=colors_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %} -{% include snippet.html content=sizes_example %} +{% include elements/snippet.html content=sizes_example %} -{% include anchor.html name="States" %} +{% include elements/anchor.html name="States" %}

Normal

-{% include snippet.html content=normal_example %} +{% include elements/snippet.html content=normal_example %}

Hover

-{% include snippet.html content=hover_example %} +{% include elements/snippet.html content=hover_example %}

Focus

-{% include snippet.html content=focus_example %} +{% include elements/snippet.html content=focus_example %}

Loading

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

Disabled

-{% include snippet.html content=disabled_example %} +{% include elements/snippet.html content=disabled_example %}

Readonly

@@ -199,4 +199,4 @@ meta:

-{% include snippet.html content=readonly_example %} +{% include elements/snippet.html content=readonly_example %} diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html index 4ccd2441..47e8b946 100644 --- a/docs/documentation/grid/columns.html +++ b/docs/documentation/grid/columns.html @@ -360,7 +360,7 @@ doc-subtab: columns {% highlight html %}{{ columns }}{% endhighlight %} - {% include anchor.html name="Sizes" %} + {% include elements/anchor.html name="Sizes" %}

If you want to change the size of a single column, you can use one the following classes:

@@ -685,7 +685,7 @@ doc-subtab: columns
- {% include anchor.html name="Offset" %} + {% include elements/anchor.html name="Offset" %}

@@ -722,7 +722,7 @@ doc-subtab: columns {% highlight html %}{{ columns_offset }}{% endhighlight %} - {% include anchor.html name="Centering columns" %} + {% include elements/anchor.html name="Centering columns" %}

@@ -782,7 +782,7 @@ doc-subtab: columns {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} - {% include anchor.html name="Responsiveness" %} + {% include elements/anchor.html name="Responsiveness" %}

By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.

@@ -857,7 +857,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %} - {% include anchor.html name="Nesting" %} + {% include elements/anchor.html name="Nesting" %}

@@ -918,7 +918,7 @@ doc-subtab: columns {% highlight html %}{{ columns_nesting }}{% endhighlight %} - {% include anchor.html name="Multiline" %} + {% include elements/anchor.html name="Multiline" %}

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

@@ -955,7 +955,7 @@ doc-subtab: columns {% highlight html %}{{ columns_multiline }}{% endhighlight %} - {% include anchor.html name="Gapless" %} + {% include elements/anchor.html name="Gapless" %}

If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

@@ -1018,7 +1018,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} - {% include anchor.html name="Narrow column" %} + {% include elements/anchor.html name="Narrow column" %}

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 4d2d3132..4e840d09 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -27,8 +27,8 @@ breadcrumb: {% include layout/main-close.html %} -{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %} +{% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %} {% include layout/main-open.html %} -{% include variables.html %} +{% include elements/variables.html %} diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html index 004de36c..197e2946 100644 --- a/docs/documentation/layout/hero.html +++ b/docs/documentation/layout/hero.html @@ -648,9 +648,9 @@ breadcrumb: {% endcapture %}
- {% include snippet.html content=heroNavbarA horizontal=true more=true %} - {% include snippet.html content=heroNavbarB horizontal=true more=true %} - {% include snippet.html content=heroNavbarC horizontal=true more=true %} + {% include elements/snippet.html content=heroNavbarA horizontal=true more=true %} + {% include elements/snippet.html content=heroNavbarB horizontal=true more=true %} + {% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
{% include layout/main-open.html %} diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html index 2d453639..19124925 100644 --- a/docs/documentation/layout/level.html +++ b/docs/documentation/layout/level.html @@ -185,22 +185,22 @@ breadcrumb:
-{% include snippet.html content=nav_example horizontal=true more=true %} +{% include elements/snippet.html content=nav_example horizontal=true more=true %} -{% include anchor.html name="Centered level" %} +{% include elements/anchor.html name="Centered level" %}
If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container.
-{% include snippet.html content=nav_centered_example horizontal=true more=true %} +{% include elements/snippet.html content=nav_centered_example horizontal=true more=true %} -{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %} +{% include elements/snippet.html content=nav_centered_bis_example horizontal=true more=true %} -{% include anchor.html name="Mobile level" %} +{% include elements/anchor.html name="Mobile level" %}
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container.
-{% include snippet.html content=nav_mobile_example horizontal=true more=true %} +{% include elements/snippet.html content=nav_mobile_example horizontal=true more=true %} diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html index 5bd3fb00..ad78477e 100644 --- a/docs/documentation/layout/media-object.html +++ b/docs/documentation/layout/media-object.html @@ -200,18 +200,18 @@ breadcrumb:
-{% include snippet.html content=media_example horizontal=true more=true %} +{% include elements/snippet.html content=media_example horizontal=true more=true %}

You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.

-{% include snippet.html content=media_bis_example horizontal=true more=true %} +{% include elements/snippet.html content=media_bis_example horizontal=true more=true %} -{% include anchor.html name="Nesting" %} +{% include elements/anchor.html name="Nesting" %}

You can nest media objects up to 3 levels deep.

-{% include snippet.html content=media_nested_example horizontal=true more=true %} +{% include elements/snippet.html content=media_nested_example horizontal=true more=true %} diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html index ea865f79..393c7620 100644 --- a/docs/documentation/layout/section.html +++ b/docs/documentation/layout/section.html @@ -33,4 +33,4 @@ breadcrumb:

You can use the modifiers is-medium and is-large to change the spacing.

-{% include variables.html %} +{% include elements/variables.html %} diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html index 1bc38352..dbd3bebb 100644 --- a/docs/documentation/layout/tiles.html +++ b/docs/documentation/layout/tiles.html @@ -440,7 +440,7 @@ tile is-ancestor {% highlight html %}{{ tile_empty }}{% endhighlight %} -{% include anchor.html name="Example" %} +{% include elements/anchor.html name="Example" %}
@@ -492,7 +492,7 @@ tile is-ancestor {% highlight html %}{{ tile_default }}{% endhighlight %} -{% include anchor.html name="Modifiers" %} +{% include elements/anchor.html name="Modifiers" %}

The tile element has 16 modifiers:

@@ -521,7 +521,7 @@ tile is-ancestor
-{% include anchor.html name="How it works: Nesting" %} +{% include elements/anchor.html name="How it works: Nesting" %}

Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

@@ -606,7 +606,7 @@ tile is-ancestor {% highlight html %}{{ tile_lorem }}{% endhighlight %} -{% include anchor.html name="Nesting requirements" %} +{% include elements/anchor.html name="Nesting requirements" %}
@@ -682,7 +682,7 @@ tile is-ancestor {% highlight html %}{{ tile_any_content }}{% endhighlight %} -{% include anchor.html name="3 columns" %} +{% include elements/anchor.html name="3 columns" %}
@@ -777,7 +777,7 @@ tile is-ancestor {% highlight html %}{{ tile_3_columns }}{% endhighlight %} -{% include anchor.html name="4 columns" %} +{% include elements/anchor.html name="4 columns" %}
diff --git a/docs/documentation/modifiers/color-helpers.html b/docs/documentation/modifiers/color-helpers.html index fbd8fb4a..57567feb 100644 --- a/docs/documentation/modifiers/color-helpers.html +++ b/docs/documentation/modifiers/color-helpers.html @@ -10,7 +10,7 @@ breadcrumb: - modifiers-color-helpers --- -{% include anchor.html name="Text color" %} +{% include elements/anchor.html name="Text color" %}

@@ -52,7 +52,7 @@ breadcrumb: -{% include anchor.html name="Background color" %} +{% include elements/anchor.html name="Background color" %} {% include elements/new-tag.html version="0.6.3" %} diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html index 7a2b2977..db580fd0 100644 --- a/docs/documentation/modifiers/responsive-helpers.html +++ b/docs/documentation/modifiers/responsive-helpers.html @@ -1,6 +1,7 @@ --- title: Responsive helpers layout: documentation +hide_categories: true doc-tab: modifiers doc-subtab: responsive-helpers breadcrumb: @@ -57,7 +58,7 @@ breadcrumb: {% endcapture %} -{% include anchor.html name="Show" %} +{% include elements/anchor.html name="Show" %}

@@ -73,106 +74,114 @@ breadcrumb:

For example, here's how the is-flex helper works:

- - {{ thead }} - - - - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ unchanged }} - - - - - - - {{ flex }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ flex }} - {{ flex }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - - -
- is-flex-mobile -
- is-flex-tablet-only -
- is-flex-desktop-only -
- is-flex-widescreen-only -
-

Classes to display up to or from a specific breakpoint

-
- is-flex-touch -
- is-flex-tablet -
- is-flex-desktop -
- is-flex-widescreen -
- is-flex-fullhd -
+{% include layout/main-close.html show_categories=true %} + +
+
+ + {{ thead }} + + + + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ unchanged }} + + + + + + + {{ flex }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ flex }} + {{ flex }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + + +
+ is-flex-mobile +
+ is-flex-tablet-only +
+ is-flex-desktop-only +
+ is-flex-widescreen-only +
+

Classes to display up to or from a specific breakpoint

+
+ is-flex-touch +
+ is-flex-tablet +
+ is-flex-desktop +
+ is-flex-widescreen +
+ is-flex-fullhd +
+
+
+ +{% include layout/main-open.html %}

@@ -180,105 +189,113 @@ breadcrumb:

-{% include anchor.html name="Hide" %} +{% include elements/anchor.html name="Hide" %} - - {{ thead }} - - - - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ visible }} - {{ hidden }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - {{ visible }} - - - - - - - {{ hidden }} - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - - -
- is-hidden-mobile -
- is-hidden-tablet-only -
- is-hidden-desktop-only -
- is-hidden-widescreen-only -
-

Classes to hide up to or from a specific breakpoint

-
- is-hidden-touch -
- is-hidden-tablet -
- is-hidden-desktop -
- is-hidden-widescreen -
- is-hidden-fullhd -
+{% include layout/main-close.html %} + +
+
+ + {{ thead }} + + + + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ visible }} + {{ hidden }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + {{ visible }} + + + + + + + {{ hidden }} + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + + +
+ is-hidden-mobile +
+ is-hidden-tablet-only +
+ is-hidden-desktop-only +
+ is-hidden-widescreen-only +
+

Classes to hide up to or from a specific breakpoint

+
+ is-hidden-touch +
+ is-hidden-tablet +
+ is-hidden-desktop +
+ is-hidden-widescreen +
+ is-hidden-fullhd +
+
+
+ +{% include layout/main-open.html %} diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index 509097f9..8cd74842 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/docs/documentation/modifiers/typography-helpers.html @@ -55,7 +55,7 @@ breadcrumb: {% endcapture %} -{% include anchor.html name="Size" %} +{% include elements/anchor.html name="Size" %}

@@ -85,7 +85,7 @@ breadcrumb: -{% include anchor.html name="Responsive size" %} +{% include elements/anchor.html name="Responsive size" %}

@@ -164,7 +164,7 @@ breadcrumb:

-{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}

@@ -206,7 +206,7 @@ breadcrumb: -{% include anchor.html name="Alignment" %} +{% include elements/anchor.html name="Alignment" %}

@@ -245,7 +245,7 @@ breadcrumb: -{% include anchor.html name="Responsive Alignment" %} +{% include elements/anchor.html name="Responsive Alignment" %}

@@ -343,7 +343,7 @@ breadcrumb: {% include layout/main-open.html %} -{% include anchor.html name="Text transformation" %} +{% include elements/anchor.html name="Text transformation" %}

@@ -382,7 +382,7 @@ breadcrumb: -{% include anchor.html name="Text weight" %} +{% include elements/anchor.html name="Text weight" %}

diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html index 80abc189..596bc1ce 100644 --- a/docs/documentation/overview/functions.html +++ b/docs/documentation/overview/functions.html @@ -19,7 +19,7 @@ breadcrumb:

-{% include anchor.html name="The findColorInvert() function" %} +{% include elements/anchor.html name="The findColorInvert() function" %}

The findColorInvert($color) function takes a color as an input, and outputs either transparent black rgba(#000, 0.7) or white #fff:

diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index 8c118801..3bffc396 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/docs/documentation/overview/responsiveness.html @@ -24,7 +24,7 @@ $widescreen-enabled: false $fullhd-enabled: false {% endcapture %} -{% include anchor.html name="Vertical by default" %} +{% include elements/anchor.html name="Vertical by default" %}

@@ -38,7 +38,7 @@ $fullhd-enabled: false

You can however enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

-{% include anchor.html name="Breakpoints" %} +{% include elements/anchor.html name="Breakpoints" %} {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %} {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %} @@ -206,7 +206,7 @@ $fullhd-enabled: false -{% include anchor.html name="Disabling breakpoints" %} +{% include elements/anchor.html name="Disabling breakpoints" %} {% include elements/new-tag.html version="0.6.3" %} @@ -220,7 +220,7 @@ $fullhd-enabled: false {% highlight sass %}{{ scss_code }}{% endhighlight %}
-{% include anchor.html name="Variables" %} +{% include elements/anchor.html name="Variables" %}

diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html index e48c93f9..8ad3e9df 100644 --- a/docs/documentation/overview/start.html +++ b/docs/documentation/overview/start.html @@ -77,7 +77,7 @@ breadcrumb:

-{% include anchor.html name="Code requirements" %} +{% include elements/anchor.html name="Code requirements" %}

@@ -109,7 +109,7 @@ breadcrumb:

-{% include anchor.html name="Starter template" %} +{% include elements/anchor.html name="Starter template" %}

@@ -118,10 +118,10 @@ breadcrumb:

- {% highlight html %}{% include getting-started.html %}{% endhighlight %} + {% highlight html %}{% include snippets/getting-started.html %}{% endhighlight %}
-{% include anchor.html name="bulma-start" %} +{% include elements/anchor.html name="bulma-start" %}

diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 7532f723..fb0f9ff1 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -62,7 +62,7 @@ breadcrumb:

-{% include anchor.html name="Initial variables" %} +{% include elements/anchor.html name="Initial variables" %}

@@ -94,7 +94,7 @@ breadcrumb: These are variables with a value that references another variable. {% endcapture %} {% - include variables.html + include elements/variables.html anchor_name = 'Derived variables' data = derived_variables custom_message = custom_message @@ -105,7 +105,7 @@ breadcrumb: You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how. {% endcapture %} {% - include variables.html + include elements/variables.html anchor_name = 'Generic variables' tab = 'base' subtab = 'generic' diff --git a/docs/expo.html b/docs/expo.html index 11d56640..350bb265 100644 --- a/docs/expo.html +++ b/docs/expo.html @@ -5,6 +5,9 @@ share_image: "/images/expo/bulma-expo-share.png" share_description: "Get inspired! The Bulma Expo is a curated collection of the most beautiful websites designed with Bulma. It showcases how you can easily customize Bulma for your own personal or business needs." layout: default route: expo +breadcrumb: +- home +- expo other: - name: Apache BookKeeper url: https://lucperkins.github.io/bookkeeper/ @@ -139,76 +142,79 @@ websites:

{% endcapture %} -{% include navbar.html id="ExpoHero" %} +{% include global/navbar.html id="Expo" %} -
-
-
-
-
-

- Expo -

-

- How people used Bulma to design beautiful websites 😍 -

-
-
- {% include carbon.html %} +
+
+
+
+ {% include components/breadcrumb.html %} + +
+
+

+ Expo +

+

+ How people used Bulma to design beautiful websites 😍 +

+
+ +
+ {% include elements/carbon.html %} +
+
+ +
+ {{ embrace_expo }} + +
+ {% for website in page.websites %} + {% assign imageName = website.name | slugify %} + {% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %} + + {% endfor %} +
+ + {{ embrace_expo }}
-
- -
-
- {{ embrace_expo }} - -
- {% for website in page.websites %} - {% assign imageName = website.name | slugify %} - {% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %} - - {% endfor %} -
- - {{ embrace_expo }} -
diff --git a/docs/extensions.html b/docs/extensions.html index d38dc1fe..1c23ef5a 100644 --- a/docs/extensions.html +++ b/docs/extensions.html @@ -110,7 +110,7 @@ extensions: height: 469 --- -{% include navbar.html id="Extensions" %} +{% include global/navbar.html id="Extensions" %}
@@ -125,7 +125,7 @@ extensions:

- {% include carbon.html %} + {% include elements/carbon.html %}
diff --git a/docs/index.html b/docs/index.html index 57ce2caa..1882bec7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,7 +4,7 @@ route: index fixed_navbar: true --- -{% include navbar.html id="Index" %} +{% include global/navbar.html id="Index" %} {% include index/intro.html %} @@ -52,7 +52,7 @@ fixed_navbar: true
- {% include tws.html %} + {% include elements/tws.html %}
@@ -472,7 +472,7 @@ fixed_navbar: true
-{% include features.html %} +{% include index/features.html %}
diff --git a/docs/love.html b/docs/love.html index eb02e55f..cf25905f 100644 --- a/docs/love.html +++ b/docs/love.html @@ -2,6 +2,9 @@ fulltitle: Love for Bulma 😍 layout: default route: love +breadcrumb: +- home +- love tweets: - id: "900692286744535041" date: "2:12 PM - 24 Aug 2017" @@ -13,44 +16,47 @@ tweets: retweets: "0" --- -{% include navbar.html id="LoveHero" %} +{% include global/navbar.html id="Love" %} -
-
-
-
-
-

- Love -

-

- Happy thoughts from Twitter πŸ˜ƒ -

-
-
- {% include carbon.html %} +
+
+
+
+ {% include components/breadcrumb.html %} + +
+
+

+ Love +

+

+ Happy thoughts from Twitter πŸ˜ƒ +

+
+ +
+ {% include elements/carbon.html %} +
+
+ +
+
+

+ Are you a Bulma fan too? Show your support! πŸ€— +

+

+ {% include elements/tw-button.html label="Tweet #bulmaio" %} +

+
+ +
+ {% for tweetId in site.data.love.tweets reversed %} + {% assign tweet = site.data.love.tweetsById[tweetId] %} + {% include elements/tw.html tweet=tweet %} + {% endfor %} +
-
- -
-
-
-

- Are you a Bulma fan too? Show your support! πŸ€— -

-

- {% include elements/tw-button.html label="Tweet #bulmaio" %} -

-
- -
- {% for tweetId in site.data.love.tweets reversed %} - {% assign tweet = site.data.love.tweetsById[tweetId] %} - {% include tw.html tweet=tweet %} - {% endfor %} -
-
diff --git a/docs/made-with-bulma.html b/docs/made-with-bulma.html index 9666ccef..ef52d8a6 100644 --- a/docs/made-with-bulma.html +++ b/docs/made-with-bulma.html @@ -41,7 +41,7 @@ images: {% endcapture %} -{% include navbar.html id="MadeWithBulmaHero" %} +{% include global/navbar.html id="MadeWithBulmaHero" %}
@@ -56,7 +56,7 @@ images:

- {% include carbon.html %} + {% include elements/carbon.html %}
@@ -100,7 +100,7 @@ images: - {% include anchor.html name="Usage" %} + {% include elements/anchor.html name="Usage" %}

@@ -136,7 +136,7 @@ images:

- {% include anchor.html name="Badge snippets" %} + {% include elements/anchor.html name="Badge snippets" %}

diff --git a/docs/templates.html b/docs/templates.html index ed21cadc..8d0ab973 100644 --- a/docs/templates.html +++ b/docs/templates.html @@ -4,11 +4,6 @@ route: templates ---

-
-
- {% include header.html %} -
-
diff --git a/docs/thank-you.html b/docs/thank-you.html index e5e75a5e..f085c06d 100644 --- a/docs/thank-you.html +++ b/docs/thank-you.html @@ -4,7 +4,7 @@ layout: default route: index --- -{% include navbar.html id="ThankYou" %} +{% include global/navbar.html id="ThankYou" %}
diff --git a/docs/tiles.html b/docs/tiles.html index 15720ed5..b2ae139c 100644 --- a/docs/tiles.html +++ b/docs/tiles.html @@ -45,7 +45,7 @@ route: tiles
- {% include anchor.html name="How it works: Nesting" %} + {% include elements/anchor.html name="How it works: Nesting" %}

Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

@@ -203,7 +203,7 @@ route: tiles
{% endhighlight %} - {% include anchor.html name="Nesting requirements" %} + {% include elements/anchor.html name="Nesting requirements" %}
@@ -334,7 +334,7 @@ tile is-ancestor
{% endhighlight %} - {% include anchor.html name="3 columns" %} + {% include elements/anchor.html name="3 columns" %}
@@ -522,7 +522,7 @@ tile is-ancestor
{% endhighlight %} - {% include anchor.html name="4 columns" %} + {% include elements/anchor.html name="4 columns" %}