mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Reorganize index
This commit is contained in:
Jeremy Thomas
parent
f123eb9562
commit
79888359d2
@ -19,7 +19,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="bd-notification is-info has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Main
|
||||
</div>
|
||||
</div>
|
||||
@ -27,17 +27,17 @@
|
||||
|
||||
<div class="columns is-variable bd-klmn-columns">
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-success has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-warning has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-danger has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
@ -50,22 +50,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-info has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-success has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-warning has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-danger has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
5
|
||||
</div>
|
||||
</div>
|
||||
@ -75,22 +75,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-info has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
7
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-success has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
8
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-warning has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
9
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-danger has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
10
|
||||
</div>
|
||||
</div>
|
||||
@ -100,7 +100,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-info has-text-centered">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
12
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fab fa-lg fa-github"></i>
|
||||
<i class="fab fa-lg fa-github-alt"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fab fa-lg fa-github"></i>
|
||||
<i class="fab fa-lg fa-github-alt"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
|
||||
|
||||
98
docs/_includes/index/columns.html
Normal file
98
docs/_includes/index/columns.html
Normal file
@ -0,0 +1,98 @@
|
||||
{% capture columns %}
|
||||
<div class="columns">
|
||||
<div class="column">1</div>
|
||||
<div class="column">2</div>
|
||||
<div class="column">3</div>
|
||||
<div class="column">4</div>
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/columns/basics">
|
||||
Simple <strong>columns</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Just add columns, they will resize themselves</h4>
|
||||
<div id="grid" class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">7</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">8</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">9</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">10</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">11</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">12</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field has-addons has-addons-centered">
|
||||
<p class="control">
|
||||
<a id="add" class="button is-unselectable">Add column</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a id="remove" class="button is-unselectable">Remove column</a>
|
||||
</p>
|
||||
</div>
|
||||
<div id="message" class="message is-info">
|
||||
<p class="message-header">Info</p>
|
||||
<p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
|
||||
If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
|
||||
</div>
|
||||
<div id="markup">
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
35
docs/_includes/index/fullheight.html
Normal file
35
docs/_includes/index/fullheight.html
Normal file
@ -0,0 +1,35 @@
|
||||
<section class="hero is-fullheight is-primary">
|
||||
<div class="hero-head">
|
||||
<div class="container">
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li><a>This is always at the top</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-arrows-v"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/layout/hero/">
|
||||
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Include any content you want, it's always centered</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li><a>And this at the bottom</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
60
docs/_includes/index/level.html
Normal file
60
docs/_includes/index/level.html
Normal file
@ -0,0 +1,60 @@
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/layout/level/">
|
||||
Flexible <strong>horizontal level</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Include any type of element, they will remain vertically centered</h4>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="title is-4">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<p class="level-item">
|
||||
<a class="button is-link">
|
||||
New
|
||||
</a>
|
||||
</p>
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Filter">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
Show:
|
||||
</div>
|
||||
<p class="level-item">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a href="#">Published</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a href="#">Drafts</a>
|
||||
</p>
|
||||
<div class="level-item">
|
||||
Sort:
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Date created</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
51
docs/_includes/index/media-object.html
Normal file
51
docs/_includes/index/media-object.html
Normal file
@ -0,0 +1,51 @@
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-magic"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/layout/media-object/">
|
||||
Versatile <strong>media object</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">A simple block with an image that will solve 90% of your UI problems</h4>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
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>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
51
docs/_includes/index/modifiers.html
Normal file
51
docs/_includes/index/modifiers.html
Normal file
@ -0,0 +1,51 @@
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-cogs"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
|
||||
Compose your element with <strong>modifier</strong> classes
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Add and combine <code>is-*</code> CSS classes to quickly alter styles</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary is-large</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary is-large">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary is-large is-loading</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary is-large is-loading">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
19
docs/_includes/index/start.html
Normal file
19
docs/_includes/index/start.html
Normal file
@ -0,0 +1,19 @@
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<p class="title has-text-centered">Get started</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="button is-link is-large" href="{{ site.data.meta.documentation }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span>Check the <strong>docs</strong></span>
|
||||
</a>
|
||||
<a class="button is-black is-large" href="{{ site.data.meta.github }}">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Contribute</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
93
docs/_includes/index/tiles.html
Normal file
93
docs/_includes/index/tiles.html
Normal file
@ -0,0 +1,93 @@
|
||||
{% capture tiles %}
|
||||
<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">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
<article class="tile is-child">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/layout/tiles">
|
||||
Magic <strong>tiles</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">A single element for a Metro UI-style CSS grid</h4>
|
||||
<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">
|
||||
<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 notification is-success">
|
||||
<p class="title">Tall tile</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>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ tiles }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
3
docs/_includes/index/tws.html
Normal file
3
docs/_includes/index/tws.html
Normal file
@ -0,0 +1,3 @@
|
||||
<section class="bd-tws-home">
|
||||
{% include elements/tws.html %}
|
||||
</section>
|
||||
12
docs/_includes/index/usual.html
Normal file
12
docs/_includes/index/usual.html
Normal file
@ -0,0 +1,12 @@
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-asterisk"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/elements/box/">
|
||||
And all the usual <strong>elements</strong> and <strong>components</strong>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</section>
|
||||
@ -55,7 +55,6 @@ breadcrumb:
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
@ -72,8 +71,12 @@ breadcrumb:
|
||||
</header>
|
||||
|
||||
<div class="bd-content">
|
||||
<div class="content is-medium">
|
||||
{{ content }}
|
||||
<div class="columns">
|
||||
<div class="column is-offset-2 is-8">
|
||||
<div class="content is-medium">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -91,20 +94,6 @@ breadcrumb:
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
<nav class="bd-categories">
|
||||
{% for post in site.posts %}
|
||||
<div class="bd-category">
|
||||
<header class="bd-category-header">
|
||||
<a class="bd-category-name" href="{{ post.url }}">
|
||||
<strong>{{ post.name }}</strong>
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.bd-example,
|
||||
.bd-structure,
|
||||
.bd-snippet
|
||||
border: 1px solid $yellow
|
||||
border: 2px solid $background
|
||||
position: relative
|
||||
&::before
|
||||
background: $yellow
|
||||
@ -14,6 +14,7 @@
|
||||
font-weight: bold
|
||||
left: -1px
|
||||
letter-spacing: 1px
|
||||
margin-left: -1px
|
||||
padding: 3px 5px
|
||||
position: absolute
|
||||
text-transform: uppercase
|
||||
@ -46,14 +47,12 @@
|
||||
// Snippet
|
||||
.bd-snippet
|
||||
+block
|
||||
border: 2px solid $background
|
||||
margin-top: 2rem
|
||||
position: relative
|
||||
&::before
|
||||
content: "Snippet"
|
||||
align-items: stretch
|
||||
display: flex
|
||||
margin-left: -1px
|
||||
|
||||
.bd-snippet-preview
|
||||
padding: 1.5rem
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
background-color: #f5f5f5
|
||||
color: #586e75
|
||||
pre
|
||||
font-size: 12px
|
||||
font-size: 0.875em
|
||||
line-height: 1.375
|
||||
.c
|
||||
color: #93a1a1
|
||||
.err,
|
||||
|
||||
@ -6,12 +6,6 @@ html.route-index
|
||||
position: relative
|
||||
.title.is-2 a:hover
|
||||
color: $blue
|
||||
.title.is-2 .icon.is-medium
|
||||
font-size: 56px
|
||||
left: -80px
|
||||
opacity: 0.1
|
||||
position: absolute
|
||||
top: 10px
|
||||
.hero .title.is-2 a
|
||||
color: $white
|
||||
.hero .title.is-2 a:hover
|
||||
@ -24,5 +18,3 @@ html.route-index
|
||||
@media screen and (max-width: 979px)
|
||||
.title.is-2 a
|
||||
padding-left: 0
|
||||
.title.is-2 .icon.is-medium
|
||||
display: none
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
+selection
|
||||
background-color: $primary
|
||||
color: $primary-invert
|
||||
|
||||
.bd-links
|
||||
counter-reset: bd-links
|
||||
|
||||
@ -196,6 +200,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
.bd-notification
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
color: $text-light
|
||||
font-weight: $weight-semibold
|
||||
padding: 1.25rem 0
|
||||
position: relative
|
||||
text-align: center
|
||||
@ -206,9 +212,11 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
color: currentColor
|
||||
code,
|
||||
pre
|
||||
background: $white
|
||||
background-color: rgba($black, 0.2)
|
||||
border-radius: $radius
|
||||
color: $white
|
||||
pre code
|
||||
background: transparent
|
||||
background-color: transparent
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
|
||||
@ -15,6 +15,18 @@ $rss: #f26522
|
||||
$carbon-width: 300px
|
||||
$main-spacing: 3rem
|
||||
|
||||
=selection($current-selector: false)
|
||||
@if $current-selector
|
||||
&::-moz-selection
|
||||
@content
|
||||
&::selection
|
||||
@content
|
||||
@else
|
||||
\::-moz-selection
|
||||
@content
|
||||
\::selection
|
||||
@content
|
||||
|
||||
@import "../bulma"
|
||||
@import "./_sass/main"
|
||||
@import "./_sass/highlight"
|
||||
|
||||
@ -9715,7 +9715,8 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
font-size: 12px;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.highlight .c {
|
||||
@ -10561,6 +10562,16 @@ svg {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: #00d1b2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #00d1b2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-links {
|
||||
counter-reset: bd-links;
|
||||
}
|
||||
@ -10810,6 +10821,8 @@ svg {
|
||||
.bd-notification {
|
||||
background-color: whitesmoke;
|
||||
border-radius: 4px;
|
||||
color: #7a7a7a;
|
||||
font-weight: 600;
|
||||
padding: 1.25rem 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@ -10824,11 +10837,13 @@ svg {
|
||||
|
||||
.bd-notification code,
|
||||
.bd-notification pre {
|
||||
background: white;
|
||||
background-color: rgba(10, 10, 10, 0.2);
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bd-notification pre code {
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bd-notification.is-white {
|
||||
@ -10896,7 +10911,7 @@ svg {
|
||||
.bd-example,
|
||||
.bd-structure,
|
||||
.bd-snippet {
|
||||
border: 1px solid #ffdd57;
|
||||
border: 2px solid whitesmoke;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -10913,6 +10928,7 @@ svg {
|
||||
font-weight: bold;
|
||||
left: -1px;
|
||||
letter-spacing: 1px;
|
||||
margin-left: -1px;
|
||||
padding: 3px 5px;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
@ -10960,7 +10976,6 @@ svg {
|
||||
}
|
||||
|
||||
.bd-snippet {
|
||||
border: 2px solid whitesmoke;
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
@ -10969,7 +10984,6 @@ svg {
|
||||
content: "Snippet";
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.bd-snippet-preview {
|
||||
@ -11397,14 +11411,6 @@ html.route-index .title.is-2 a:hover {
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
html.route-index .title.is-2 .icon.is-medium {
|
||||
font-size: 56px;
|
||||
left: -80px;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
html.route-index .hero .title.is-2 a {
|
||||
color: white;
|
||||
}
|
||||
@ -11426,9 +11432,6 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
html.route-index .title.is-2 a {
|
||||
padding-left: 0;
|
||||
}
|
||||
html.route-index .title.is-2 .icon.is-medium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tws-home {
|
||||
|
||||
@ -13,22 +13,22 @@ breadcrumb:
|
||||
{% capture columns_default_gap %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
Default gap
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">
|
||||
<p class="bd-notification is-primary">
|
||||
Default gap
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">
|
||||
<p class="bd-notification is-primary">
|
||||
Default gap
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">
|
||||
<p class="bd-notification is-primary">
|
||||
Default gap
|
||||
</p>
|
||||
</div>
|
||||
@ -106,16 +106,16 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-gapless">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
<p class="bd-notification is-primary">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Second column</p>
|
||||
<p class="bd-notification is-primary">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Third column</p>
|
||||
<p class="bd-notification is-primary">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Fourth column</p>
|
||||
<p class="bd-notification is-primary">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -129,31 +129,31 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-multiline is-mobile is-gapless">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info"><code>is-half</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Auto</p>
|
||||
<p class="bd-notification is-primary">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -169,13 +169,6 @@ breadcrumb:
|
||||
<span class="tag is-warning">Experimental</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New</span>
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
@ -45,7 +45,7 @@ breadcrumb:
|
||||
{% capture columns_mobile_centered %}
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half is-narrow">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-narrow</code>
|
||||
</p>
|
||||
@ -56,31 +56,31 @@ breadcrumb:
|
||||
{% capture columns_mobile_multiline_centered %}
|
||||
<div class="columns is-mobile is-multiline is-centered">
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
First Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-success">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Our Second Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-danger">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Third Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
The Fourth Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-success">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Fifth Column
|
||||
</p>
|
||||
@ -96,31 +96,31 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info"><code>is-half</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Auto</p>
|
||||
<p class="bd-notification is-primary">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -136,7 +136,7 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half is-narrow">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-narrow</code>
|
||||
</p>
|
||||
@ -153,31 +153,31 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-mobile is-multiline is-centered">
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
First Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Our Second Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Third Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
The Fourth Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
Fifth Column
|
||||
</p>
|
||||
|
||||
@ -54,16 +54,16 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">1</p>
|
||||
<p class="bd-notification is-primary">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">2</p>
|
||||
<p class="bd-notification is-primary">2</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">3</p>
|
||||
<p class="bd-notification is-primary">3</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">4</p>
|
||||
<p class="bd-notification is-primary">4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -86,16 +86,16 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-desktop">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">1</p>
|
||||
<p class="bd-notification is-primary">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">2</p>
|
||||
<p class="bd-notification is-primary">2</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">3</p>
|
||||
<p class="bd-notification is-primary">3</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">4</p>
|
||||
<p class="bd-notification is-primary">4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -109,23 +109,23 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code>is-half-mobile</code><br>
|
||||
<code>is-one-third-tablet</code><br>
|
||||
<code>is-one-quarter-desktop</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">1</p>
|
||||
<p class="bd-notification is-primary">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">1</p>
|
||||
<p class="bd-notification is-primary">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">1</p>
|
||||
<p class="bd-notification is-primary">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">1</p>
|
||||
<p class="bd-notification is-primary">1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -144,127 +144,127 @@ breadcrumb:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-four-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-four-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-quarters">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-three-quarters</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-two-thirds</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-three-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-half</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-two-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-two-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-one-third</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-one-quarter</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-one-fifth</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -297,217 +297,217 @@ breadcrumb:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<p class="bd-notification is-info"><code>is-2</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-2</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<p class="bd-notification is-info"><code>is-3</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-3</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p class="bd-notification is-info"><code>is-4</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-4</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<p class="bd-notification is-info"><code>is-5</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-5</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<p class="bd-notification is-info"><code>is-6</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-6</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-7">
|
||||
<p class="bd-notification is-info"><code>is-7</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-7</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<p class="bd-notification is-info"><code>is-8</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-8</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-9">
|
||||
<p class="bd-notification is-info"><code>is-9</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-9</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-10">
|
||||
<p class="bd-notification is-info"><code>is-10</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-10</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-11">
|
||||
<p class="bd-notification is-info"><code>is-11</code></p>
|
||||
<p class="bd-notification is-primary"><code>is-11</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -521,7 +521,7 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half is-offset-one-quarter">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-offset-one-quarter</code>
|
||||
</p>
|
||||
@ -530,7 +530,7 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-three-fifths is-offset-one-fifth">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-three-fifths</code><br>
|
||||
<code class="html">is-offset-one-fifth</code>
|
||||
</p>
|
||||
@ -539,7 +539,7 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-4 is-offset-8">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-4</code><br>
|
||||
<code class="html">is-offset-8</code>
|
||||
</p>
|
||||
@ -548,7 +548,7 @@ breadcrumb:
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-11 is-offset-1">
|
||||
<p class="bd-notification is-info">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-11</code><br>
|
||||
<code class="html">is-offset-1</code>
|
||||
</p>
|
||||
|
||||
@ -133,8 +133,6 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
{% capture tags_blog_addons %}
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,899 +0,0 @@
|
||||
---
|
||||
title: Tiles powered by Flexbox
|
||||
layout: documentation
|
||||
doc-tab: grid
|
||||
doc-subtab: tiles
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/layout/tiles/">
|
||||
|
||||
{% include subnav/subnav-grid.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Tiles</h1>
|
||||
<h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tile">
|
||||
<!-- The magical tile element! -->
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Example</h3>
|
||||
<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">
|
||||
<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 notification is-success">
|
||||
<div class="content">
|
||||
<p class="title">Tall tile</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>
|
||||
|
||||
{% highlight html %}
|
||||
<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 %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Modifiers</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>3 contextual</strong> modifiers
|
||||
<ul>
|
||||
<li><code>is-ancestor</code></li>
|
||||
<li><code>is-parent</code></li>
|
||||
<li><code>is-child</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1 directional</strong> modifier
|
||||
<ul>
|
||||
<li><code>is-vertical</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>12 horizontal size</strong> modifiers
|
||||
<ul>
|
||||
<li>from <code>is-1</code></li>
|
||||
<li>to <code>is-12</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">How it works: Nesting</h3>
|
||||
<div class="content">
|
||||
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}
|
||||
<div class="tile is-ancestor">
|
||||
<!-- All other tile elemnts -->
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}
|
||||
<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 class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p>
|
||||
You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
|
||||
<br>
|
||||
For example, <code>is-4</code> will take up 1/3 of the horizontal space:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}
|
||||
<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 class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}
|
||||
<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 class="columns">
|
||||
<div class="column is-one-third">
|
||||
<div class="content">
|
||||
<p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
|
||||
<ul>
|
||||
<li>add <em>any</em> class you want, like <code>box</code></li>
|
||||
<li>add the <code>is-child</code> modifier on the tile</li>
|
||||
<li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}
|
||||
<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 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>
|
||||
|
||||
{% highlight html %}
|
||||
<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 %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Nesting requirements</h3>
|
||||
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
3 levels deep at least...
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>You need at least <strong>3 levels</strong> of hierarchy:</p>
|
||||
{% highlight markdown %}
|
||||
tile is-ancestor
|
||||
|
|
||||
└───tile is-parent
|
||||
|
|
||||
└───tile is-child
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="message is-success">
|
||||
<div class="message-header">
|
||||
...but more levels if you want!
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>You can, however, nest tiles deeper than that, and mix it up!</p>
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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>
|
||||
|
||||
{% highlight html %}
|
||||
<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 %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">3 columns</h3>
|
||||
|
||||
<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>
|
||||
|
||||
{% highlight html %}
|
||||
<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 %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">4 columns</h3>
|
||||
|
||||
<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>
|
||||
|
||||
{% highlight html %}
|
||||
<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>
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Container
|
||||
layout: documentation
|
||||
hide_carbon: true
|
||||
hide_categories: true
|
||||
doc-tab: layout
|
||||
doc-subtab: container
|
||||
breadcrumb:
|
||||
@ -66,7 +66,7 @@ breadcrumb:
|
||||
<p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_example}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Footer
|
||||
layout: documentation
|
||||
hide_carbon: true
|
||||
hide_categories: true
|
||||
doc-tab: layout
|
||||
doc-subtab: footer
|
||||
breadcrumb:
|
||||
@ -25,7 +25,7 @@ breadcrumb:
|
||||
</footer>
|
||||
{% endcapture %}
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
{% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Hero
|
||||
layout: documentation
|
||||
hide_carbon: true
|
||||
hide_categories: true
|
||||
doc-tab: layout
|
||||
doc-subtab: hero
|
||||
breadcrumb:
|
||||
@ -11,7 +11,7 @@ breadcrumb:
|
||||
- layout-hero
|
||||
---
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
|
||||
@ -52,6 +52,10 @@ breadcrumb:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% assign vernum = site.version | downcase | remove: "." | plus: 0 %}
|
||||
|
||||
{% if vernum >= 63 %}
|
||||
|
||||
{% include elements/anchor.html name="Background color" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
@ -95,3 +99,5 @@ breadcrumb:
|
||||
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% endif %}
|
||||
|
||||
455
docs/index.html
455
docs/index.html
@ -5,450 +5,13 @@ fixed_navbar: true
|
||||
---
|
||||
|
||||
{% include global/navbar.html id="Index" %}
|
||||
|
||||
{% include index/intro.html %}
|
||||
|
||||
<section class="bd-tws-home">
|
||||
{% include elements/tws.html %}
|
||||
</section>
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-pause"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/columns/basics">
|
||||
Simple <strong>columns</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Just add columns, they will resize themselves</h4>
|
||||
<div id="grid" class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-info has-text-centered">
|
||||
<p class="title">2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-success has-text-centered">
|
||||
<p class="title">3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-warning has-text-centered">
|
||||
<p class="title">4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification is-danger has-text-centered">
|
||||
<p class="title">5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-info has-text-centered">
|
||||
<p class="title">7</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-success has-text-centered">
|
||||
<p class="title">8</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-warning has-text-centered">
|
||||
<p class="title">9</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-danger has-text-centered">
|
||||
<p class="title">10</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-primary has-text-centered">
|
||||
<p class="title">11</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="display: none;">
|
||||
<div class="notification is-info has-text-centered">
|
||||
<p class="title">12</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field has-addons has-addons-centered">
|
||||
<p class="control">
|
||||
<a id="add" class="button is-unselectable">Add column</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a id="remove" class="button is-unselectable">Remove column</a>
|
||||
</p>
|
||||
</div>
|
||||
<div id="message" class="message is-info">
|
||||
<p class="message-header">Info</p>
|
||||
<p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
|
||||
If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
|
||||
</div>
|
||||
<div id="markup">
|
||||
{% highlight html %}
|
||||
<div class="columns">
|
||||
<div class="column">1</div>
|
||||
<div class="column">2</div>
|
||||
<div class="column">3</div>
|
||||
<div class="column">4</div>
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="is-marginless">
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/layout/tiles">
|
||||
Magic <strong>tiles</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">A single element for a Metro UI-style CSS grid</h4>
|
||||
<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">
|
||||
<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 notification is-success">
|
||||
<p class="title">Tall tile</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>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}
|
||||
<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">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
<article class="tile is-child">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child">
|
||||
<!-- Any content you want here -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="is-marginless">
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-arrows-alt-h"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/layout/level/">
|
||||
Flexible <strong>horizontal level</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Include any type of element, they will remain vertically centered</h4>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="title is-4">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<p class="level-item">
|
||||
<a class="button is-link">
|
||||
New
|
||||
</a>
|
||||
</p>
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Filter">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
Show:
|
||||
</div>
|
||||
<p class="level-item">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a href="#">Published</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a href="#">Drafts</a>
|
||||
</p>
|
||||
<div class="level-item">
|
||||
Sort:
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Date created</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="is-marginless">
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-magic"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/layout/media-object/">
|
||||
Versatile <strong>media object</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">A simple block with an image that will solve 90% of your UI problems</h4>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
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>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-fullheight is-primary">
|
||||
<div class="hero-head">
|
||||
<div class="container">
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li><a>This is always at the top</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-arrows-v"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/layout/hero/">
|
||||
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Include any content you want, it's always centered</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li><a>And this at the bottom</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-cogs"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
|
||||
Compose your element with <strong>modifier</strong> classes
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Add and combine <code>is-*</code> CSS classes to quickly alter styles</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary is-large</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary is-large">Button</a>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<code>button is-primary is-large is-loading</code>
|
||||
</p>
|
||||
</div>
|
||||
<a class="button is-primary is-large is-loading">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="is-marginless">
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-asterisk"></i>
|
||||
</span>
|
||||
<a href="{{ site.url }}/documentation/elements/box/">
|
||||
And all the usual <strong>elements</strong> and <strong>components</strong>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include index/features.html %}
|
||||
|
||||
<hr class="is-marginless">
|
||||
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<p class="title has-text-centered">Get started</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="button is-link is-large" href="{{ site.data.meta.documentation }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span>Check the <strong>docs</strong></span>
|
||||
</a>
|
||||
<a class="button is-black is-large" href="{{ site.data.meta.github }}">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Contribute</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% include index/tws.html %}
|
||||
{% include index/columns.html %}
|
||||
<!-- {% include index/tiles.html %} -->
|
||||
{% include index/level.html %}
|
||||
{% include index/media-object.html %}
|
||||
{% include index/fullheight.html %}
|
||||
<!-- {% include index/usual.html %} -->
|
||||
<!-- {% include index/features.html %} -->
|
||||
{% include index/start.html %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user