Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 03:44:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix tiles

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 16:33:44 +01:00
parent 25d0ea1136
commit 03c13488a6
10 changed files with 646 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/snippet.html
View File

@@ -16,6 +16,7 @@
{% if include.clipped %}bd-is-clipped{% endif %} {% if include.clipped %}bd-is-clipped{% endif %}
{% if include.size %}bd-is-{{ include.size }}{% endif %} {% if include.size %}bd-is-{{ include.size }}{% endif %}
{% if include.one_fifth %}bd-is-one-fifth{% endif %} {% if include.one_fifth %}bd-is-one-fifth{% endif %}
{% if include.fullwidth %}bd-is-fullwidth{% endif %}
"> ">
<div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}"> <div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
{{ include.content }} {{ include.content }}

4
docs/_sass/example.sass
View File

@@ -81,6 +81,10 @@
.bd-snippet-code .bd-snippet-code
overflow: auto overflow: auto
.bd-snippet.bd-is-fullwidth
border-radius: 0
border-width: 1px 0
+desktop +desktop
.bd-snippet.bd-is-vertical .bd-snippet.bd-is-vertical
align-items: stretch align-items: stretch

1
docs/_sass/specific.sass
View File

@@ -1,4 +1,5 @@
.bd-typo .bd-typo
&:not(:first-child)
margin-top: 3rem margin-top: 3rem
.bd-has-text-rss .bd-has-text-rss

7
docs/css/bulma-docs.css
View File

@@ -10402,7 +10402,7 @@ svg {
text-decoration: underline; text-decoration: underline;
} }
.bd-typo { .bd-typo:not(:first-child) {
margin-top: 3rem; margin-top: 3rem;
} }
@@ -10939,6 +10939,11 @@ svg {
overflow: auto; overflow: auto;
} }
.bd-snippet.bd-is-fullwidth {
border-radius: 0;
border-width: 1px 0;
}
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bd-snippet.bd-is-vertical { .bd-snippet.bd-is-vertical {
align-items: stretch; align-items: stretch;

17
docs/documentation/layout/footer.html
View File

@@ -1,12 +1,12 @@
--- ---
title: Footer title: Footer
subtitle: "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc."
layout: documentation layout: documentation
hide_carbon: true
doc-tab: layout doc-tab: layout
doc-subtab: footer doc-subtab: footer
--- ---
{% include subnav/subnav-layout.html %}
{% capture footer_example %} {% capture footer_example %}
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
@@ -21,15 +21,10 @@ doc-subtab: footer
</footer> </footer>
{% endcapture %} {% endcapture %}
<section class="section"> {% include layout/main-close.html show_carbon=true %}
<div class="container">
<h1 class="title">Footer</h1>
<h2 class="subtitle">
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
</h2>
{% include snippet.html content=footer_example horizontal=true more=true %} {% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
{% include layout/main-open.html %}
{% include variables.html %} {% include variables.html %}
</div>
</section>

16
docs/documentation/layout/hero.html
View File

@@ -1,20 +1,13 @@
--- ---
title: Hero title: Hero
subtitle: "An imposing <strong>hero banner</strong> to showcase something"
layout: documentation layout: documentation
hide_carbon: true
doc-tab: layout doc-tab: layout
doc-subtab: hero doc-subtab: hero
--- ---
{% include subnav/subnav-layout.html %} {% include layout/main-close.html show_carbon=true %}
<section class="section">
<div class="container">
<h1 class="title">Hero</h1>
<h2 class="subtitle">
An imposing <strong>hero banner</strong> to showcase something
</h2>
</div>
</section>
<section class="section is-fullwidth"> <section class="section is-fullwidth">
<div class="bd-example"> <div class="bd-example">
@@ -31,6 +24,7 @@ doc-subtab: hero
</div> </div>
</section> </section>
</div> </div>
</section>
{% highlight html %} {% highlight html %}
<section class="hero"> <section class="hero">
@@ -654,3 +648,5 @@ doc-subtab: hero
{% include snippet.html content=heroNavbarB horizontal=true more=true %} {% include snippet.html content=heroNavbarB horizontal=true more=true %}
{% include snippet.html content=heroNavbarC horizontal=true more=true %} {% include snippet.html content=heroNavbarC horizontal=true more=true %}
</section> </section>
{% include layout/main-open.html %}

13
docs/documentation/layout/level.html
View File

@@ -1,5 +1,6 @@
--- ---
title: Level title: Level
subtitle: "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element"
layout: documentation layout: documentation
doc-tab: layout doc-tab: layout
doc-subtab: level doc-subtab: level
@@ -118,15 +119,6 @@ doc-subtab: level
</nav> </nav>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
<h1 class="title">Level</h1>
<h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
<hr>
<div class="content"> <div class="content">
<p>The <strong>structure</strong> of a level is the following:</p> <p>The <strong>structure</strong> of a level is the following:</p>
<ul> <ul>
@@ -208,6 +200,3 @@ doc-subtab: level
</div> </div>
{% include snippet.html content=nav_mobile_example horizontal=true more=true %} {% include snippet.html content=nav_mobile_example horizontal=true more=true %}
</div>
</section>

13
docs/documentation/layout/media-object.html
View File

@@ -1,5 +1,6 @@
--- ---
title: Media Object title: Media Object
subtitle: "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context"
layout: documentation layout: documentation
doc-tab: layout doc-tab: layout
doc-subtab: media-object doc-subtab: media-object
@@ -156,15 +157,6 @@ doc-subtab: media-object
</article> </article>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
<h1 class="title">Media Object</h1>
<h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
<hr>
<div class="content"> <div class="content">
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p> <p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
</div> </div>
@@ -219,6 +211,3 @@ doc-subtab: media-object
</div> </div>
{% include snippet.html content=media_nested_example horizontal=true more=true %} {% include snippet.html content=media_nested_example horizontal=true more=true %}
</div>
</section>

29
docs/documentation/layout/section.html
View File

@@ -1,26 +1,12 @@
--- ---
title: Section title: Section
subtitle: "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading"
layout: documentation layout: documentation
doc-tab: layout doc-tab: layout
doc-subtab: section doc-subtab: section
--- ---
{% include subnav/subnav-layout.html %} {% capture section_example %}
<section class="section">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
</h2>
<hr>
<div class="content">
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
</div>
{% highlight html %}
<body> <body>
<section class="section"> <section class="section">
<div class="container"> <div class="container">
@@ -31,13 +17,16 @@ doc-subtab: section
</div> </div>
</section> </section>
</body> </body>
{% endhighlight %} {% endcapture %}
<div class="content">
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
</div>
{% highlight html %}{{ section_example }}{% endhighlight %}
<div class="content"> <div class="content">
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p> <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
</div> </div>
{% include variables.html %} {% include variables.html %}
</div>
</section>

858
docs/documentation/layout/tiles.html
View File

@@ -1,28 +1,440 @@
--- ---
title: Tiles powered by Flexbox title: Tiles powered by Flexbox
subtitle: "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids"
layout: documentation layout: documentation
doc-tab: layout doc-tab: layout
doc-subtab: tiles doc-subtab: tiles
--- ---
{% include subnav/subnav-layout.html %} {% capture tile_empty %}
<div class="tile">
<!-- The magical tile element! -->
</div>
{% endcapture %}
<section class="section"> {% capture tile_default %}
<div class="container"> <div class="tile is-ancestor">
<h1 class="title">Tiles</h1> <div class="tile is-vertical is-8">
<h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2> <div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child notification is-primary">
<p class="title">Vertical...</p>
<p class="subtitle">Top tile</p>
</article>
<article class="tile is-child notification is-warning">
<p class="title">...tiles</p>
<p class="subtitle">Bottom tile</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-info">
<p class="title">Middle tile</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">Wide tile</p>
<p class="subtitle">Aligned with the right tile</p>
<div class="content">
<!-- Content -->
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title">Tall tile</p>
<p class="subtitle">With even more content</p>
<div class="content">
<!-- Content -->
</div>
</div>
</article>
</div>
</div>
{% endcapture %}
<hr> {% capture tile_ancestor %}
<div class="tile is-ancestor">
<!-- All other tile elemnts -->
</div>
{% endcapture %}
{% capture tile_horizontal %}
<div class="tile is-ancestor">
<div class="tile">
<!-- Add content or other tiles -->
</div>
<div class="tile">
<!-- Add content or other tiles -->
</div>
</div>
{% endcapture %}
{% capture tile_resize %}
<div class="tile is-ancestor">
<div class="tile is-4">
<!-- 1/3 -->
</div>
<div class="tile">
<!-- This tile will take the rest: 2/3 -->
</div>
</div>
{% endcapture %}
{% capture tile_vertical %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical">
<div class="tile">
<!-- Top tile -->
</div>
<div class="tile">
<!-- Bottom tile -->
</div>
</div>
<div class="tile">
<!-- This tile will take up the whole vertical space -->
</div>
</div>
{% endcapture %}
{% capture tile_123 %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
</div>
</div>
</div>
{% endcapture %}
{% capture tile_lorem %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
<p>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.</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
<p>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.</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
{% endcapture %}
{% capture md_3_levels %}
tile is-ancestor
|
└───tile is-parent
|
└───tile is-child
{% endcapture %}
{% capture md_nesting %}
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
{% endcapture %}
{% capture tile_any_content %}
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
{% endcapture %}
{% capture tile_3_columns %}
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Hello World</p>
<p class="subtitle">What is up?</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Foo</p>
<p class="subtitle">Bar</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Third column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Top box</p>
</article>
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Bottom box</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Middle box</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Wide column</p>
<p class="subtitle">Aligned with the right column</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Tall column</p>
<p class="subtitle">With even more content</p>
<div class="content">
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Side column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
<div class="tile is-parent is-8">
<article class="tile is-child box">
<p class="title">Main column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
</div>
{% endcapture %}
{% capture tile_4_columns %}
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">One</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Two</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Three</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Four</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-9">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Five</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
<div class="tile is-8 is-vertical">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Six</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Seven</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Eight</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
</div>
<div class="tile">
<div class="tile is-8 is-parent">
<article class="tile is-child box">
<p class="title">Nine</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Ten</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Eleven</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
<p>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.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Twelve</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
<div class="tile is-parent is-6">
<article class="tile is-child box">
<p class="title">Thirteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Fourteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
</div>
{% endcapture %}
<div class="content"> <div class="content">
<p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p> <p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
</div> </div>
{% highlight html %} {% highlight html %}{{ tile_empty }}{% endhighlight %}
<div class="tile">
<!-- The magical tile element! -->
</div>
{% endhighlight %}
{% include anchor.html name="Example" %} {% include anchor.html name="Example" %}
@@ -74,57 +486,10 @@ doc-subtab: tiles
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}{{ tile_default }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child notification is-primary">
<p class="title">Vertical...</p>
<p class="subtitle">Top tile</p>
</article>
<article class="tile is-child notification is-warning">
<p class="title">...tiles</p>
<p class="subtitle">Bottom tile</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-info">
<p class="title">Middle tile</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">Wide tile</p>
<p class="subtitle">Aligned with the right tile</p>
<div class="content">
<!-- Content -->
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title">Tall tile</p>
<p class="subtitle">With even more content</p>
<div class="content">
<!-- Content -->
</div>
</div>
</article>
</div>
</div>
{% endhighlight %}
{% include anchor.html name="Modifiers" %} {% include anchor.html name="Modifiers" %}
<div class="content"> <div class="content">
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p> <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
<ul> <ul>
@@ -163,11 +528,7 @@ doc-subtab: tiles
<p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p> <p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
</div> </div>
<div class="column is-two-thirds"> <div class="column is-two-thirds">
{% highlight html %} {% highlight html %}{{ tile_ancestor }}{% endhighlight %}
<div class="tile is-ancestor">
<!-- All other tile elemnts -->
</div>
{% endhighlight %}
</div> </div>
</div> </div>
@@ -176,16 +537,7 @@ doc-subtab: tiles
<p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p> <p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
</div> </div>
<div class="column is-two-thirds"> <div class="column is-two-thirds">
{% highlight html %} {% highlight html %}{{ tile_horizontal }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile">
<!-- Add content or other tiles -->
</div>
<div class="tile">
<!-- Add content or other tiles -->
</div>
</div>
{% endhighlight %}
</div> </div>
</div> </div>
@@ -198,16 +550,7 @@ doc-subtab: tiles
</p> </p>
</div> </div>
<div class="column is-two-thirds"> <div class="column is-two-thirds">
{% highlight html %} {% highlight html %}{{ tile_resize }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile is-4">
<!-- 1/3 -->
</div>
<div class="tile">
<!-- This tile will take the rest: 2/3 -->
</div>
</div>
{% endhighlight %}
</div> </div>
</div> </div>
@@ -216,21 +559,7 @@ doc-subtab: tiles
<p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p> <p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
</div> </div>
<div class="column is-two-thirds"> <div class="column is-two-thirds">
{% highlight html %} {% highlight html %}{{ tile_vertical }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical">
<div class="tile">
<!-- Top tile -->
</div>
<div class="tile">
<!-- Bottom tile -->
</div>
</div>
<div class="tile">
<!-- This tile will take up the whole vertical space -->
</div>
</div>
{% endhighlight %}
</div> </div>
</div> </div>
@@ -246,23 +575,7 @@ doc-subtab: tiles
</div> </div>
</div> </div>
<div class="column is-two-thirds"> <div class="column is-two-thirds">
{% highlight html %} {% highlight html %}{{ tile_123 }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
</div>
</div>
</div>
{% endhighlight %}
</div> </div>
</div> </div>
@@ -287,32 +600,10 @@ doc-subtab: tiles
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}{{ tile_lorem }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
<p>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.</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
<p>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.</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
{% endhighlight %}
{% include anchor.html name="Nesting requirements" %} {% include anchor.html name="Nesting requirements" %}
<article class="message is-danger"> <article class="message is-danger">
<div class="message-header"> <div class="message-header">
3 levels deep at least... 3 levels deep at least...
@@ -320,13 +611,7 @@ doc-subtab: tiles
<div class="message-body"> <div class="message-body">
<div class="content"> <div class="content">
<p>You need at least <strong>3 levels</strong> of hierarchy:</p> <p>You need at least <strong>3 levels</strong> of hierarchy:</p>
{% highlight markdown %} {% highlight markdown %}{{ md_3_levels }}{% endhighlight %}
tile is-ancestor
|
└───tile is-parent
|
└───tile is-child
{% endhighlight %}
</div> </div>
</div> </div>
</article> </article>
@@ -338,26 +623,7 @@ tile is-ancestor
<div class="message-body"> <div class="message-body">
<div class="content"> <div class="content">
<p>You can, however, nest tiles deeper than that, and mix it up!</p> <p>You can, however, nest tiles deeper than that, and mix it up!</p>
{% highlight markdown %} {% highlight markdown %}{{ md_nesting }}{% endhighlight %}
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 %}
</div> </div>
</div> </div>
</article> </article>
@@ -410,41 +676,10 @@ tile is-ancestor
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}{{ tile_any_content }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
{% endhighlight %}
{% include anchor.html name="3 columns" %} {% include anchor.html name="3 columns" %}
<div class="tile is-ancestor"> <div class="tile is-ancestor">
<div class="tile is-parent"> <div class="tile is-parent">
<article class="tile is-child box"> <article class="tile is-child box">
@@ -536,104 +771,10 @@ tile is-ancestor
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}{{ tile_3_columns }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Hello World</p>
<p class="subtitle">What is up?</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Foo</p>
<p class="subtitle">Bar</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Third column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Top box</p>
</article>
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Bottom box</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Middle box</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Wide column</p>
<p class="subtitle">Aligned with the right column</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Tall column</p>
<p class="subtitle">With even more content</p>
<div class="content">
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Side column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
<div class="tile is-parent is-8">
<article class="tile is-child box">
<p class="title">Main column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
</div>
{% endhighlight %}
{% include anchor.html name="4 columns" %} {% include anchor.html name="4 columns" %}
<div class="tile is-ancestor"> <div class="tile is-ancestor">
<div class="tile is-parent"> <div class="tile is-parent">
<article class="tile is-child box"> <article class="tile is-child box">
@@ -759,133 +900,4 @@ tile is-ancestor
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}{{ tile_4_columns }}{% endhighlight %}
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">One</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Two</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Three</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Four</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-9">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Five</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
<div class="tile is-8 is-vertical">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Six</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Seven</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Eight</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
</div>
<div class="tile">
<div class="tile is-8 is-parent">
<article class="tile is-child box">
<p class="title">Nine</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Ten</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Eleven</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
<p>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.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Twelve</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
<div class="tile is-parent is-6">
<article class="tile is-child box">
<p class="title">Thirteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>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.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Fourteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
</div>
{% endhighlight %}
</div>
</section>