diff --git a/docs/_includes/book/book-banner.html b/docs/_includes/book/book-banner.html new file mode 100644 index 00000000..e593b8ce --- /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 00000000..dd6bdcf8 --- /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 00000000..87b3972b --- /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 00000000..a99d164f --- /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 00000000..fa1bf596 --- /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 00000000..e27b59de --- /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 00000000..ed3b1b46 --- /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 00000000..41cf092c --- /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 00000000..0b2283d1 --- /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 00000000..1d0f3cec --- /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 00000000..2c9c9d90 --- /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 8ab5bd7c..1a8421bb 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 73f1c7cc..f4fe7804 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 00000000..6762740c --- /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 9ad90388..190ae9ef 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 38bd7a8f..0901545e 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 65ac8799..270af833 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 9500fd11..d3c48e06 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 00000000..10f35cbe Binary files /dev/null and b/docs/assets/images/twitter/martin_verbic.jpg differ diff --git a/docs/backers-md.html b/docs/backers-md.html index fc1474ec..c1ff9bf2 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 d92a295f..83f5fd0e 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 e63128e0..a39549f0 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 a389078f..4aa83650 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 5af670c6..00000000 --- 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 f085c06d..c2f153a8 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 ea2117de..40c2e074 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 b2ae139c..00000000 --- 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 0c908ba5..822ce9f0 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 %}