From ab5b308f88103280c697f91600baeebc5944651f Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Thu, 21 Mar 2024 16:39:38 +0000 Subject: [PATCH] Fix website transfer includes --- docs/_includes/book/book-banner.html | 15 + docs/_includes/book/book-content.html | 59 ++ docs/_includes/book/book-cover.html | 12 + docs/_includes/book/book-modal.html | 14 + docs/_includes/docs/components/hero.html | 30 + .../docs/elements/backers-paragraph.html | 16 + docs/_includes/docs/elements/banner.html | 9 + docs/_includes/docs/elements/post.html | 34 + .../docs/elements/responsive-image-2x.html | 7 + .../docs/elements/responsive-image.html | 8 + docs/_includes/docs/elements/rss-button.html | 6 + docs/_includes/global/header.html | 61 +- docs/_includes/global/navbar.html | 97 +++ docs/_includes/home/intro.html | 18 +- docs/_layouts/post.html | 4 + docs/_posts/2018-04-13-website-redesign.md | 34 +- docs/_posts/2018-04-14-migration-to-v070.md | 8 +- docs/_posts/2019-10-15-light-dark-colors.md | 62 +- docs/alternative-to-bootstrap.html | 12 +- docs/assets/images/twitter/martin_verbic.jpg | Bin 0 -> 3151 bytes docs/backers-md.html | 10 +- docs/blog.html | 8 +- docs/bulma-start.html | 8 +- docs/more.html | 4 +- docs/playground/responsive-buttons.html | 7 - docs/thank-you.html | 2 - docs/the-official-bulma-book.html | 4 +- docs/tiles.html | 781 ------------------ docs/videos.html | 4 +- 29 files changed, 444 insertions(+), 890 deletions(-) create mode 100644 docs/_includes/book/book-banner.html create mode 100644 docs/_includes/book/book-content.html create mode 100644 docs/_includes/book/book-cover.html create mode 100644 docs/_includes/book/book-modal.html create mode 100644 docs/_includes/docs/components/hero.html create mode 100644 docs/_includes/docs/elements/backers-paragraph.html create mode 100644 docs/_includes/docs/elements/banner.html create mode 100644 docs/_includes/docs/elements/post.html create mode 100644 docs/_includes/docs/elements/responsive-image-2x.html create mode 100644 docs/_includes/docs/elements/responsive-image.html create mode 100644 docs/_includes/docs/elements/rss-button.html create mode 100644 docs/_includes/global/navbar.html create mode 100644 docs/_layouts/post.html create mode 100644 docs/assets/images/twitter/martin_verbic.jpg delete mode 100644 docs/playground/responsive-buttons.html delete mode 100644 docs/tiles.html diff --git a/docs/_includes/book/book-banner.html b/docs/_includes/book/book-banner.html new file mode 100644 index 000000000..e593b8ce5 --- /dev/null +++ b/docs/_includes/book/book-banner.html @@ -0,0 +1,15 @@ +
+ +
+
+
+
+ {% include book/book-cover.html %} +
+
+ {% include book/book-content.html show_cover=false %} +
+
+
+
+
diff --git a/docs/_includes/book/book-content.html b/docs/_includes/book/book-content.html new file mode 100644 index 000000000..dd6bdcf8a --- /dev/null +++ b/docs/_includes/book/book-content.html @@ -0,0 +1,59 @@ +
+
+ New! +

The official Bulma book! 😲

+

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

+
+ + {% if include.show_cover %} +
+ {% include book/book-cover.html %} +
+ {% endif %} + +
+

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

+
+
+
+
+ Formats available: +
+
+
+ PDF + Epub + Mobi +
+
+
+ or +
+
+
+ Kindle +
+
+
+
+
+
+ + + PDF + Epub + Mobi + Buy from + + + + + Kindle version + Buy from + + +
+
+ Or + download a free sample! +
+
+
diff --git a/docs/_includes/book/book-cover.html b/docs/_includes/book/book-cover.html new file mode 100644 index 000000000..87b3972b6 --- /dev/null +++ b/docs/_includes/book/book-cover.html @@ -0,0 +1,12 @@ +
+ + {% + include docs/elements/responsive-image-2x.html + path="book/book-cover" + extension="jpg" + alt="The official Bulma book cover" + width="504" + height="661" + %} + +
diff --git a/docs/_includes/book/book-modal.html b/docs/_includes/book/book-modal.html new file mode 100644 index 000000000..a99d164fa --- /dev/null +++ b/docs/_includes/book/book-modal.html @@ -0,0 +1,14 @@ + diff --git a/docs/_includes/docs/components/hero.html b/docs/_includes/docs/components/hero.html new file mode 100644 index 000000000..fa1bf5968 --- /dev/null +++ b/docs/_includes/docs/components/hero.html @@ -0,0 +1,30 @@ +{% capture hero_body %} +
+
+

+ {% if include.icon %} + + + + {% endif %} + {{ include.title | markdownify }} +

+
+ {{ include.subtitle | markdownify }} +
+ {{ include.content }} +
+
+{% endcapture %} + +
+
+ {% if page.fullwidth %} + {{ hero_body }} + {% else %} +
+ {{ hero_body }} +
+ {% endif %} +
+
diff --git a/docs/_includes/docs/elements/backers-paragraph.html b/docs/_includes/docs/elements/backers-paragraph.html new file mode 100644 index 000000000..e27b59deb --- /dev/null +++ b/docs/_includes/docs/elements/backers-paragraph.html @@ -0,0 +1,16 @@ +{% if site.data.backers[include.tier].size > 0 or site.data.github[include.tier].size > 0 %} +

{{ include.title }}

+ + +{% endif %} diff --git a/docs/_includes/docs/elements/banner.html b/docs/_includes/docs/elements/banner.html new file mode 100644 index 000000000..ed3b1b467 --- /dev/null +++ b/docs/_includes/docs/elements/banner.html @@ -0,0 +1,9 @@ +
+
+

+ {{ include.title }} +

+ + {{ include.more }} +
+
diff --git a/docs/_includes/docs/elements/post.html b/docs/_includes/docs/elements/post.html new file mode 100644 index 000000000..41cf092c1 --- /dev/null +++ b/docs/_includes/docs/elements/post.html @@ -0,0 +1,34 @@ +{% assign date = post.date | date: "%B %-d" %} +{% assign title = post.title | markdownify %} +{% assign introduction = post.introduction | markdownify %} + +
+ +
+
+ +
+ +
+

+ {{ title }} +

+
+ {{ introduction }} +
+
+
+ + {% if post.image %} +
+ {{ post.alt }} +
+ {% endif %} + +
diff --git a/docs/_includes/docs/elements/responsive-image-2x.html b/docs/_includes/docs/elements/responsive-image-2x.html new file mode 100644 index 000000000..0b2283d19 --- /dev/null +++ b/docs/_includes/docs/elements/responsive-image-2x.html @@ -0,0 +1,7 @@ +{{ include.alt }} diff --git a/docs/_includes/docs/elements/responsive-image.html b/docs/_includes/docs/elements/responsive-image.html new file mode 100644 index 000000000..1d0f3cec3 --- /dev/null +++ b/docs/_includes/docs/elements/responsive-image.html @@ -0,0 +1,8 @@ +{{ include.alt }} diff --git a/docs/_includes/docs/elements/rss-button.html b/docs/_includes/docs/elements/rss-button.html new file mode 100644 index 000000000..2c9c9d90d --- /dev/null +++ b/docs/_includes/docs/elements/rss-button.html @@ -0,0 +1,6 @@ + + + + + Subscribe + diff --git a/docs/_includes/global/header.html b/docs/_includes/global/header.html index 8ab5bd7c8..1a8421bb0 100644 --- a/docs/_includes/global/header.html +++ b/docs/_includes/global/header.html @@ -4,14 +4,12 @@
@@ -53,21 +58,33 @@
- - -
-
-
- Download + + Download + + + + + + + + + + +
+ {% include global/navbar-start.html id="navbarStartClone" version="clone" %} +
diff --git a/docs/_includes/home/intro.html b/docs/_includes/home/intro.html index 73f1c7cc2..f4fe78045 100644 --- a/docs/_includes/home/intro.html +++ b/docs/_includes/home/intro.html @@ -108,13 +108,14 @@

- The Modern
+ The Modern
CSS Framework

- Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily - combine to build responsive web interfaces. + Bulma is a free, open source framework that provides ready-to-use + frontend components that you can easily combine to build responsive web + interfaces.

@@ -123,13 +124,16 @@
- + Get Started - + - + Download - +
diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html new file mode 100644 index 000000000..6762740ca --- /dev/null +++ b/docs/_layouts/post.html @@ -0,0 +1,4 @@ +--- +layout: default +route: blog +--- diff --git a/docs/_posts/2018-04-13-website-redesign.md b/docs/_posts/2018-04-13-website-redesign.md index 9ad90388e..190ae9ef1 100644 --- a/docs/_posts/2018-04-13-website-redesign.md +++ b/docs/_posts/2018-04-13-website-redesign.md @@ -35,7 +35,7 @@ Just see for yourself!
-{% include elements/anchor.html name="Navbar" %} +{% include docs/elements/anchor.html name="Navbar" %} The **navbar** has been updated with a lighter markup and cleaner design: @@ -47,7 +47,7 @@ The **navbar** has been updated with a lighter markup and cleaner design: This doesn't affect the current navbars. There's actually a new modifier called `is-spaced` that was created for this new navbar. Documentation coming soon! -{% include elements/anchor.html name="Customize example" %} +{% include docs/elements/anchor.html name="Customize example" %} On the homepage, there's a new [**customization** section with a live example](/#customize): @@ -57,7 +57,7 @@ On the homepage, there's a new [**customization** section with a live example](/ -{% include elements/anchor.html name="Breadcrumb" %} +{% include docs/elements/anchor.html name="Breadcrumb" %}
@@ -69,16 +69,16 @@ A **breadcrumb** is now visible at the top of each page, to easily navigate up a This has led to the creation of new **intermediate pages**: -* [documentation](/documentation) -* [documentation/modifiers](/documentation/modifiers) -* [documentation/columns](/documentation/columns) -* [documentation/layout](/documentation/layout) -* [documentation/form](/documentation/form) -* [documentation/elements](/documentation/elements) -* [documentation/components](/documentation/components) -* [more](/more) +- [documentation](/documentation) +- [documentation/modifiers](/documentation/modifiers) +- [documentation/columns](/documentation/columns) +- [documentation/layout](/documentation/layout) +- [documentation/form](/documentation/form) +- [documentation/elements](/documentation/elements) +- [documentation/components](/documentation/components) +- [more](/more) -{% include elements/anchor.html name="Links" %} +{% include docs/elements/anchor.html name="Links" %} These intermediate pages have new **link boxes** that help dive into each sub-category: @@ -88,7 +88,7 @@ These intermediate pages have new **link boxes** that help dive into each sub-ca
-{% include elements/anchor.html name="Previous/Next" %} +{% include docs/elements/anchor.html name="Previous/Next" %} Next to the breadcrumb, you can easily navigate to the **sibling** pages with the **previous** and **next** links: @@ -106,7 +106,7 @@ These links are also available at the bottom: -{% include elements/anchor.html name="Categories" %} +{% include docs/elements/anchor.html name="Categories" %} There's a new **sidebar** including a navigation menu with all the categories and sub-categories: @@ -116,7 +116,7 @@ There's a new **sidebar** including a navigation menu with all the categories an -{% include elements/anchor.html name="Scroll spy" %} +{% include docs/elements/anchor.html name="Scroll spy" %} On some pages below the categories, you'll find a new menu called "On this page" which is actually a **scroll spy**: @@ -126,7 +126,7 @@ On some pages below the categories, you'll find a new menu called "On this page" -{% include elements/anchor.html name="Footer" %} +{% include docs/elements/anchor.html name="Footer" %} The footer has been redesigned as well. Among other things, there's a **sitemap** available: @@ -136,7 +136,7 @@ The footer has been redesigned as well. Among other things, there's a **sitemap* -{% include elements/anchor.html name="Code" %} +{% include docs/elements/anchor.html name="Code" %} The Bulma website is built with **Jekyll**. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well. diff --git a/docs/_posts/2018-04-14-migration-to-v070.md b/docs/_posts/2018-04-14-migration-to-v070.md index 38bd7a8f3..0901545ec 100644 --- a/docs/_posts/2018-04-14-migration-to-v070.md +++ b/docs/_posts/2018-04-14-migration-to-v070.md @@ -13,9 +13,10 @@ While this update is mainly focused on a massive [website redesign](/2018/04/13/ These variable changes are documented here, so you can edit or revert them if needed. -{% include elements/anchor.html name="Updated default values" %} +{% include docs/elements/anchor.html name="Updated default values" %} {% for item in site.data.blog.migratingv070.updated %} + @@ -46,9 +47,10 @@ These variable changes are documented here, so you can edit or revert them if ne
{% endfor %} -{% include elements/anchor.html name="New variables" %} +{% include docs/elements/anchor.html name="New variables" %} {% for item in site.data.blog.migratingv070.new %} + @@ -75,7 +77,7 @@ These variable changes are documented here, so you can edit or revert them if ne
{% endfor %} -{% include elements/anchor.html name="Removed variables" %} +{% include docs/elements/anchor.html name="Removed variables" %} diff --git a/docs/_posts/2019-10-15-light-dark-colors.md b/docs/_posts/2019-10-15-light-dark-colors.md index 65ac8799c..270af8330 100644 --- a/docs/_posts/2019-10-15-light-dark-colors.md +++ b/docs/_posts/2019-10-15-light-dark-colors.md @@ -12,21 +12,21 @@ alt: "Light and dark clouds" The new version **[Bulma 0.8.0](https://github.com/jgthms/bulma/releases/tag/0.8.0)** is out! 😃 It comes with several bug fixes and a lot of nice new features: -* [Light/Dark colors](#light-dark-colors) -* [Better visual look](#better-visual-look) -* [Panel colors](#panel-colors) -* [Larger form controls](#larger-form-controls) -* [4-value color map](#4-value-color-map) -* [Scheme variables for "Dark mode"](#scheme-variables-for-dark-mode) +- [Light/Dark colors](#light-dark-colors) +- [Better visual look](#better-visual-look) +- [Panel colors](#panel-colors) +- [Larger form controls](#larger-form-controls) +- [4-value color map](#4-value-color-map) +- [Scheme variables for "Dark mode"](#scheme-variables-for-dark-mode) More in the [Changelog](https://github.com/jgthms/bulma/releases/tag/0.8.0). -{% include elements/anchor.html name="Light/Dark colors" %} +{% include docs/elements/anchor.html name="Light/Dark colors" %} Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions: -* `findLightColor()` which finds the light version of a color -* `findDarkColor()` which finds the dark version of a color +- `findLightColor()` which finds the light version of a color +- `findDarkColor()` which finds the dark version of a color The **light** colors are used by the `button` element: @@ -45,7 +45,7 @@ The **light** and **dark** colors are used by the `message` component, which gen -{% include elements/anchor.html name="Better visual look" %} +{% include docs/elements/anchor.html name="Better visual look" %} Some of the Bulma colors have been updated: @@ -60,10 +60,10 @@ Some of the Bulma colors have been updated: $green @@ -71,10 +71,10 @@ Some of the Bulma colors have been updated: $cyan @@ -82,10 +82,10 @@ Some of the Bulma colors have been updated: $red
- {% include elements/color-square.html value="hsl(141, 71%, 48%)" %} + {% include docs/elements/color-swatch.html background="hsl(141, 71%, 48%)" %} - {% include elements/color-square.html value="hsl(141, 53%, 53%)" %} + {% include docs/elements/color-swatch.html background="hsl(141, 53%, 53%)" %}
- {% include elements/color-square.html value="hsl(204, 86%, 53%)" %} + {% include docs/elements/color-swatch.html background="hsl(204, 86%, 53%)" %} - {% include elements/color-square.html value="hsl(204, 71%, 53%)" %} + {% include docs/elements/color-swatch.html background="hsl(204, 71%, 53%)" %}
- {% include elements/color-square.html value="hsl(348, 100%, 61%)" %} + {% include docs/elements/color-swatch.html background="hsl(348, 100%, 61%)" %} - {% include elements/color-square.html value="hsl(348, 86%, 61%)" %} + {% include docs/elements/color-swatch.html background="hsl(348, 86%, 61%)" %}
@@ -106,7 +106,7 @@ The shadows of the box and card have
-{% include elements/anchor.html name="Panel colors" %} +{% include docs/elements/anchor.html name="Panel colors" %}

The panel component is now available in all colors: @@ -118,7 +118,7 @@ The shadows of the box and card have -{% include elements/anchor.html name="Larger form controls" %} +{% include docs/elements/anchor.html name="Larger form controls" %} Form controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values: @@ -131,7 +131,7 @@ $button-padding-vertical: calc(0.375em - #{$button-border-width}) $button-padding-horizontal: 0.75em ``` -{% include elements/anchor.html name="4-value color map" %} +{% include docs/elements/anchor.html name="4-value color map" %} The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map. @@ -139,16 +139,30 @@ If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, ```scss $custom-colors: ( - "lime": (lime), - "tomato": (tomato, white), - "orange": ($orange, $orange-invert, $orange-light), - "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark) + "lime": ( + lime, + ), + "tomato": ( + tomato, + white, + ), + "orange": ( + $orange, + $orange-invert, + $orange-light, + ), + "lavender": ( + $lavender, + $lavender-invert, + $lavender-light, + $lavender-dark, + ), ); ``` This is processed by the updated `mergeColorMaps()` Sass function. -{% include elements/anchor.html name='Scheme variables for "Dark mode"' %} +{% include docs/elements/anchor.html name='Scheme variables for "Dark mode"' %} There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter` They replace the `$white` and `$black` occurrences in the codebase. diff --git a/docs/alternative-to-bootstrap.html b/docs/alternative-to-bootstrap.html index 9500fd111..d3c48e062 100644 --- a/docs/alternative-to-bootstrap.html +++ b/docs/alternative-to-bootstrap.html @@ -56,10 +56,8 @@ bootstrap: content: "Bulma has introduced some support for accessibility, but Bootstrap has strong and pervasive compatibility with **WCAG 2.0** guidelines." --- -{% include global/navbar.html id="AlternativeToBootstrap" %} - {% - include components/hero.html + include docs/components/hero.html color="bootstrap" icon="fas fa-exchange-alt" title="Bulma: an **alternative** to Bootstrap" @@ -67,7 +65,7 @@ bootstrap: %} {% - include components/call.html + include docs/components/call.html color="primary" text='Both Bulma and Bootstrap are CSS frameworks that allow developers to quickly build web interfaces with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.' %} @@ -85,7 +83,7 @@ bootstrap:

{% for pro in page.bulma %} {% - include content/pro.html + include docs/content/pro.html type=pro.type icon=pro.icon icon_brand=pro.icon_brand @@ -106,7 +104,7 @@ bootstrap:
{% for pro in page.bootstrap %} {% - include content/pro.html + include docs/content/pro.html type=pro.type icon=pro.icon icon_brand=pro.icon_brand @@ -142,7 +140,7 @@ bootstrap: - {% include content/comparison.html %} + {% include docs/content/comparison.html %}
diff --git a/docs/assets/images/twitter/martin_verbic.jpg b/docs/assets/images/twitter/martin_verbic.jpg new file mode 100644 index 0000000000000000000000000000000000000000..10f35cbe893c721e105ba6c92124d553b5e042e9 GIT binary patch literal 3151 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 literal 0 Hc-jL100001 diff --git a/docs/backers-md.html b/docs/backers-md.html index fc1474ec4..c1ff9bf27 100644 --- a/docs/backers-md.html +++ b/docs/backers-md.html @@ -4,8 +4,8 @@ title: 'Backers via Pat layout: bare --- -{% include elements/backers-paragraph.html tier="30" title="Generous backers ($30+)" %} -{% include elements/backers-paragraph.html tier="500" title="Documentation sponsors ($500+)" %} -{% include elements/backers-paragraph.html tier="300" title="Website sponsors ($300+)" %} -{% include elements/backers-paragraph.html tier="100" title="Homepage sponsors ($100+)" %} -{% include elements/backers-paragraph.html tier="10" title="Bulma backers ($10+)" %} +{% include docs/elements/backers-paragraph.html tier="30" title="Generous backers ($30+)" %} +{% include docs/elements/backers-paragraph.html tier="500" title="Documentation sponsors ($500+)" %} +{% include docs/elements/backers-paragraph.html tier="300" title="Website sponsors ($300+)" %} +{% include docs/elements/backers-paragraph.html tier="100" title="Homepage sponsors ($100+)" %} +{% include docs/elements/backers-paragraph.html tier="10" title="Bulma backers ($10+)" %} diff --git a/docs/blog.html b/docs/blog.html index d92a295f2..83f5fd0ee 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -6,13 +6,11 @@ breadcrumb: - blog --- -{% include global/navbar.html id="Blog" %} - {% capture hero_content %} -{% include elements/rss-button.html %} +{% include docs/elements/rss-button.html %} {% endcapture %} {% - include components/hero.html + include docs/components/hero.html color="primary" icon="fas fa-rss" title="The **official** Bulma **blog**" @@ -24,7 +22,7 @@ breadcrumb:
{% for post in site.posts %} {% - include elements/post.html + include docs/elements/post.html post=post %} {% endfor %} diff --git a/docs/bulma-start.html b/docs/bulma-start.html index e63128e0c..a39549f0f 100644 --- a/docs/bulma-start.html +++ b/docs/bulma-start.html @@ -13,10 +13,8 @@ breadcrumb: - bulma-start --- -{% include global/navbar.html id="MadeWithBulma" %} - {% - include components/hero.html + include docs/components/hero.html color="success" icon="fas fa-rocket" title="The `bulma-start` package" @@ -81,7 +79,7 @@ breadcrumb:
- {% include elements/anchor.html name="Install" %} + {% include docs/elements/anchor.html name="Install" %}

@@ -97,7 +95,7 @@ breadcrumb: >bulma-start README on Github. - {% include elements/anchor.html name="What’s included" %} + {% include docs/elements/anchor.html name="What’s included" %}

diff --git a/docs/more.html b/docs/more.html index a389078f4..4aa836502 100644 --- a/docs/more.html +++ b/docs/more.html @@ -6,10 +6,8 @@ breadcrumb: - more --- -{% include global/navbar.html id="More" %} - {% - include components/hero.html + include docs/components/hero.html color="link" icon="fas fa-ellipsis-h" title="More about Bulma" diff --git a/docs/playground/responsive-buttons.html b/docs/playground/responsive-buttons.html deleted file mode 100644 index 5af670c6b..000000000 --- a/docs/playground/responsive-buttons.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: playground ---- - -

- {% include snippets/responsive-buttons.html %} -
\ No newline at end of file diff --git a/docs/thank-you.html b/docs/thank-you.html index f085c06d5..c2f153a88 100644 --- a/docs/thank-you.html +++ b/docs/thank-you.html @@ -4,8 +4,6 @@ layout: default route: index --- -{% include global/navbar.html id="ThankYou" %} -
diff --git a/docs/the-official-bulma-book.html b/docs/the-official-bulma-book.html index ea2117de2..40c2e0748 100644 --- a/docs/the-official-bulma-book.html +++ b/docs/the-official-bulma-book.html @@ -5,8 +5,6 @@ layout: default route: the-official-bulma-book --- -{% include global/navbar.html id="Videos" %} - {% capture hero_more %} @@ -67,7 +65,7 @@ route: the-official-bulma-book {% endcapture %} {% - include elements/banner.html + include docs/elements/banner.html color="bleeding" title="The official Bulma book" more=hero_more diff --git a/docs/tiles.html b/docs/tiles.html deleted file mode 100644 index b2ae139cc..000000000 --- a/docs/tiles.html +++ /dev/null @@ -1,781 +0,0 @@ ---- -layout: default -route: tiles ---- - -
-
-

Tiles

-

A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids

- -
-

To build intricate 2-dimensional, you only need a single element: the tile:

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

The tile element has 16 modifiers:

-
    -
  • - 3 contextual modifiers -
      -
    • is-ancestor
      • -
    • is-parent
      • -
    • is-child
      • -
    -
    • -
  • - 1 directional modifier -
      -
    • is-vertical
      • -
    -
    • -
  • - 12 horizontal size modifiers -
      -
    • from is-1
      • -
    • to is-12
      • -
    -
    • -
-
- - {% 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.

-
- -
-
-

Start with an ancestor tile that will wrap all other tiles:

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

Add tile elements that will distribute themselves horizontally:

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

- You can resize any tile according to a 12 column grid. -
- For example, is-4 will take up 2/3 of the horizontal space: -

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

If you want to stack tiles vertically, add is-vertical on the parent tile:

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

As soon as you want to add content to a tile, just:

-
    -
  • add any class you want, like box
    • -
  • add the is-child modifier on the tile
    • -
  • add the is-parent modifier on the parent tile
    • -
-
-
-
-{% highlight html %} -
-
-
-

One

-
-
-

Two

-
-
-
-
-

Three

-
-
-
-{% endhighlight %} -
-
- -
-
-
-

One

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-

Two

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-

Three

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

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

One

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-

Two

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-

Three

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-{% endhighlight %} - - {% include elements/anchor.html name="Nesting requirements" %} - -
-
- 3 levels deep at least... -
-
-
-

You need at least 3 levels of hierarchy:

-{% highlight markdown %} -tile is-ancestor -| -└───tile is-parent - | - └───tile is-child -{% endhighlight %} -
-
-
- -
-
- ...but more levels if you want! -
-
-
-

You can however nest tiles more deeply than that, and mix it up!

-{% highlight markdown %} -tile is-ancestor -| -├───tile is-vertical is-8 -| | -| ├───tile -| | | -| | ├───tile is-parent is-vertical -| | | ├───tile is-child -| | | └───tile is-child -| | | -| | └───tile is-parent -| | └───tile is-child -| | -| └───tile is-parent -| └───tile is-child -| -└───tile is-parent - └───tile is-child -{% endhighlight %} -
-
-
- -
-
-
-
-
-

Vertical tiles

-

Top box

-
-
-

Vertical tiles

-

Bottom box

-
-
-
-
-

Middle box

-

With an image

-
- -
-
-
-
-
-
-

Wide column

-

Aligned with the right column

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall column

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
- -{% highlight html %} -
-
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-{% endhighlight %} - - {% include elements/anchor.html name="3 columns" %} - -
-
-
-

Hello World

-

What is up?

-
-
-
-
-

Foo

-

Bar

-
-
-
-
-

Third column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-
-
-

Vertical tiles

-

Top box

-
-
-

Vertical tiles

-

Bottom box

-
-
-
-
-

Middle box

-

With an image

-
- -
-
-
-
-
-
-

Wide column

-

Aligned with the right column

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall column

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
-
-
-
-

Side column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Main column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

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

Hello World

-

What is up?

-
-
-
-
-

Foo

-

Bar

-
-
-
-
-

Third column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
- -
-
-
-
-
-

Vertical tiles

-

Top box

-
-
-

Vertical tiles

-

Bottom box

-
-
-
-
-

Middle box

-

With an image

-
- -
-
-
-
-
-
-

Wide column

-

Aligned with the right column

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall column

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
- -
-
-
-

Side column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Main column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-{% endhighlight %} - - {% include elements/anchor.html name="4 columns" %} - -
-
-
-

One

-

Subtitle

-
-
-
-
-

Two

-

Subtitle

-
-
-
-
-

Three

-

Subtitle

-
-
-
-
-

Four

-

Subtitle

-
-
-
-
-
-
-
-
-

Five

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-
-
-
-
-
-
-
-

Six

-

Subtitle

-
-
-
-
-

Seven

-

Subtitle

-
-
-
-
-
-

Eight

-

Subtitle

-
-
-
-
-
-
-
-

Nine

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Ten

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-
-

Eleven

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
-
-
-
-

Twelve

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
-
-

Thirteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Fourteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

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

One

-

Subtitle

-
-
-
-
-

Two

-

Subtitle

-
-
-
-
-

Three

-

Subtitle

-
-
-
-
-

Four

-

Subtitle

-
-
-
- -
-
-
-
-
-

Five

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-
-
-
-
-
-
-
-

Six

-

Subtitle

-
-
-
-
-

Seven

-

Subtitle

-
-
-
-
-
-

Eight

-

Subtitle

-
-
-
-
-
-
-
-

Nine

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Ten

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-
-

Eleven

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
- -
-
-
-

Twelve

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
-
-

Thirteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Fourteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
-{% endhighlight %} -
-
diff --git a/docs/videos.html b/docs/videos.html index 0c908ba5b..822ce9f04 100644 --- a/docs/videos.html +++ b/docs/videos.html @@ -26,8 +26,6 @@ videos: no_video: true --- -{% include global/navbar.html id="Videos" %} - {% capture hero_content %}