mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 19:34:30 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
@@ -1,21 +1,21 @@
|
||||
---
|
||||
title: Container
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
fullwidth: true
|
||||
hide_categories: true
|
||||
doc-tab: layout
|
||||
doc-subtab: container
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-container
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-container
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture container_example %}
|
||||
<div class="container">
|
||||
<div class="notification is-primary">
|
||||
@@ -23,86 +23,81 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_fluid_example %}
|
||||
<div class="container is-fluid">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
|
||||
viewport size.
|
||||
This container is <strong>fluid</strong>: it will have a 32px gap on either
|
||||
side, on any viewport size.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_widescreen_example %}
|
||||
<div class="container is-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the
|
||||
<code>$widescreen</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_fullhd_example %}
|
||||
<div class="container is-fullhd">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the
|
||||
<code>$fullhd</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_max_desktop_example %}
|
||||
<div class="container is-max-desktop">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
|
||||
This container has a <code>max-width</code> of
|
||||
<code>$desktop - $container-offset</code> on widescreen and fullhd.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_max_widescreen_example %}
|
||||
<div class="container is-max-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.
|
||||
This container has a <code>max-width</code> of
|
||||
<code>$widescreen - $container-offset</code> on fullhd.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign bp_tablet = site.data.breakpoints.tablet %}
|
||||
{% assign bp_desktop = site.data.breakpoints.desktop %}
|
||||
{% assign bp_widescreen = site.data.breakpoints.widescreen %}
|
||||
{% assign bp_fullhd = site.data.breakpoints.fullhd %}
|
||||
{% assign container_offset = 64 %}
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bd-is-empty">
|
||||
<th class="bd-is-empty"></th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
|
||||
breakpoint_hash[1] %} {% if breakpoint.id == 'tablet' %}
|
||||
<th>
|
||||
Below
|
||||
<br />
|
||||
<code>{{ bp_tablet.to }}px</code>
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
{% if breakpoint.id == 'tablet' %}
|
||||
<th>
|
||||
Below
|
||||
<br>
|
||||
<code>{{ bp_tablet.to }}px</code>
|
||||
</th>
|
||||
{% elsif breakpoint.id != 'mobile' %}
|
||||
<th>
|
||||
{{ breakpoint.name }}
|
||||
<br>
|
||||
{% if breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% elsif breakpoint.id != 'mobile' %}
|
||||
<th>
|
||||
{{ breakpoint.name }}
|
||||
<br />
|
||||
{% if breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above {% else %} Between
|
||||
<code>{{ breakpoint.from }}px</code> and
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</th>
|
||||
{% endif %} {% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger viewports. It can be used in any context, but mostly as a <strong>direct child</strong> of one of the following:
|
||||
The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger
|
||||
viewports. It can be used in any context, but mostly as a <strong>direct child</strong> of one of the following:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>navbar</code></li>
|
||||
@@ -113,7 +108,7 @@ meta:
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Overview" %}
|
||||
{% include docs/elements/anchor.html name="Overview" %}
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
@@ -130,52 +125,67 @@ meta:
|
||||
<tr>
|
||||
<td><code>.container</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
<td>
|
||||
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-widescreen</code></td>
|
||||
<td colspan="2" class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
<td>
|
||||
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-fullhd</code></td>
|
||||
<td colspan="3" class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
{% include elements/new-tag.html version="0.9.1" %}
|
||||
<td>
|
||||
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-max-desktop</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td colspan="3"><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
<td colspan="3">
|
||||
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-max-widescreen</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
<td colspan="2"><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
<td>
|
||||
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Default behavior" %}
|
||||
{% include docs/elements/anchor.html name="Default behavior" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will increase its <code>max-width</code> after reaching the <code>$widescreen</code> and <code>$fullhd</code> breakpoints.
|
||||
By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will
|
||||
increase its <code>max-width</code> after reaching the <code>$widescreen</code> and
|
||||
<code>$fullhd</code> breakpoints.
|
||||
</p>
|
||||
<p>
|
||||
The container's <strong>width</strong> for each <strong>breakpoint</strong> is the result
|
||||
of: <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code>
|
||||
32px</code> but can be modified.
|
||||
The container's <strong>width</strong> for each <strong>breakpoint</strong> is the result of:
|
||||
<code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code> 32px</code> but can
|
||||
be modified.
|
||||
</p>
|
||||
<p>This is how the container will behave:</p>
|
||||
<ul>
|
||||
@@ -183,91 +193,102 @@ meta:
|
||||
<li>on <code>$widescreen</code> it will have a maximum width of <strong>1152px</strong>.</li>
|
||||
<li>on <code>$fullhd</code> it will have a maximum width of <strong>1344px</strong>.</li>
|
||||
</ul>
|
||||
<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>
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ container_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Widescreen or FullHD only" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
With the two modifiers <code>is-widescreen</code> and <code>is-fullhd</code>, you can have a <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
|
||||
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>
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_widescreen_example}}
|
||||
</div>
|
||||
<div class="bd-example is-fullwidth">{{ container_example }}</div>
|
||||
|
||||
{% highlight html %}{{ container_widescreen_example }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_fullhd_example }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ container_fullhd_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- container_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Desktop and Widescreen maximum widths" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.9.1" %}
|
||||
{% include docs/elements/anchor.html name="Widescreen or FullHD only" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2 modifiers:
|
||||
With the two modifiers <code>is-widescreen</code> and <code>is-fullhd</code>, you can have a
|
||||
<em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-fullwidth">{{ container_widescreen_example }}</div>
|
||||
|
||||
{% highlight html -%}
|
||||
{{- container_widescreen_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="bd-example is-fullwidth">{{ container_fullhd_example }}</div>
|
||||
|
||||
{% highlight html -%}
|
||||
{{- container_fullhd_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{%
|
||||
include docs/elements/anchor.html name="Desktop and Widescreen maximum
|
||||
widths"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2
|
||||
modifiers:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.container.is-max-desktop</code> will behave like a desktop container
|
||||
</li>
|
||||
<li>
|
||||
<code>.container.is-max-widescreen</code> will behave like a widescreen container
|
||||
</li>
|
||||
<li><code>.container.is-max-desktop</code> will behave like a desktop container</li>
|
||||
<li><code>.container.is-max-widescreen</code> will behave like a widescreen container</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_max_desktop_example }}
|
||||
</div>
|
||||
<div class="bd-example is-fullwidth">{{ container_max_desktop_example }}</div>
|
||||
|
||||
{% highlight html %}{{ container_max_desktop_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- container_max_desktop_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_max_widescreen_example }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ container_max_widescreen_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- container_max_widescreen_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Absolute maximum width" %}
|
||||
{% include docs/elements/anchor.html name="Absolute maximum width" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of the <code>$container-max-width</code> Sass variable.
|
||||
If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of
|
||||
the <code>$container-max-width</code> Sass variable.
|
||||
</p>
|
||||
<p>
|
||||
By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>, <code>$desktop</code>, or any value in <strong>pixels</strong>.
|
||||
By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum
|
||||
width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>,
|
||||
<code>$desktop</code>, or any value in <strong>pixels</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Fluid container" %}
|
||||
{% include docs/elements/anchor.html name="Fluid container" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you don't want to have a maximum width but want to keep the 32px margin on the left and
|
||||
right sides, add the <code>is-fluid</code> modifier:</p>
|
||||
<p>
|
||||
If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the
|
||||
<code>is-fluid</code> modifier:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_fluid_example}}
|
||||
</div>
|
||||
<div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
|
||||
|
||||
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
||||
|
||||
{% include components/variables.html type='element' data=site.data.variables.elements.container %}
|
||||
{% highlight html -%}
|
||||
{{- container_fluid_example -}}
|
||||
{%- endhighlight %}
|
||||
{%
|
||||
include docs/components/variables.html type='element'
|
||||
data=site.data.variables.elements.container
|
||||
%}
|
||||
|
||||
@@ -1,22 +1,26 @@
|
||||
---
|
||||
title: Footer
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: layout
|
||||
doc-subtab: footer
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-footer
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-footer
|
||||
---
|
||||
|
||||
{% capture footer_example %}
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
|
||||
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>.
|
||||
The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The
|
||||
website content is licensed
|
||||
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
|
||||
>CC BY NC SA 4.0</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -24,10 +28,12 @@ breadcrumb:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <strong>footer</strong> is a simple container, with lots of bottom padding, making it great as the last element of any webpage.
|
||||
The Bulma <strong>footer</strong> is a simple container, with lots of bottom padding, making it great as the last
|
||||
element of any webpage.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=footer_example horizontal=true more=true %}
|
||||
|
||||
{% include components/variables.html %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=footer_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
@@ -1,88 +1,87 @@
|
||||
---
|
||||
title: Hero
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
fullwidth: true
|
||||
hide_categories: true
|
||||
hide_fortyfour: true
|
||||
doc-tab: layout
|
||||
doc-subtab: hero
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-hero
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-hero
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally cover the full height of the page as well.
|
||||
</p>
|
||||
<p>
|
||||
The basic requirement of this component are:
|
||||
The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally
|
||||
cover the full height of the page as well.
|
||||
</p>
|
||||
<p>The basic requirement of this component are:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code> as the main container
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero-body</code> as a direct child, in which you can put all your content
|
||||
</li>
|
||||
<li><code>hero-body</code> as a direct child, in which you can put all your content</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
For the <a href="#fullheight-hero">fullheight hero</a> to work, you will also need a <code>hero-head</code> and a <code>hero-foot</code>.
|
||||
For the <a href="#fullheight-hero">fullheight hero</a> to work, you will also need a <code>hero-head</code> and a
|
||||
<code>hero-foot</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% capture hero_example %}
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Hero title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Hero subtitle
|
||||
</p>
|
||||
<p class="title">Hero title</p>
|
||||
<p class="subtitle">Hero subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=hero_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=hero_example
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/anchor.html
|
||||
name="Colors"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
As with buttons, you can choose one of the <strong>8 different colors</strong>:
|
||||
As with buttons, you can choose one of the
|
||||
<strong>8 different colors</strong>:
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<section class="hero is-{{ color }}">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
{{ color | capitalize }} hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
{{ color | capitalize }} subtitle
|
||||
</p>
|
||||
<p class="title">{{ color | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ color | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=foobar
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{% endfor %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have even more imposing banners by using one of <strong>5 different sizes</strong>:
|
||||
You can have even more imposing banners by using one of
|
||||
<strong>5 different sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
@@ -96,47 +95,39 @@ meta:
|
||||
{% capture small_hero %}
|
||||
<section class="hero is-small is-primary">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Small hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Small subtitle
|
||||
</p>
|
||||
<p class="title">Small hero</p>
|
||||
<p class="subtitle">Small subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=small_hero horizontal=true fullwidth=true %}
|
||||
|
||||
{%
|
||||
include docs/elements/snippet.html content=small_hero
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{% capture medium_hero %}
|
||||
<section class="hero is-medium is-link">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Medium hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Medium subtitle
|
||||
</p>
|
||||
<p class="title">Medium hero</p>
|
||||
<p class="subtitle">Medium subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=medium_hero horizontal=true fullwidth=true %}
|
||||
|
||||
{%
|
||||
include docs/elements/snippet.html content=medium_hero
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{% capture large_hero %}
|
||||
<section class="hero is-large is-info">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Large hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Large subtitle
|
||||
</p>
|
||||
<p class="title">Large hero</p>
|
||||
<p class="subtitle">Large subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=large_hero horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=large_hero
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
<div id="halfheight-hero"></div>
|
||||
|
||||
@@ -144,18 +135,16 @@ meta:
|
||||
<section class="hero is-success is-halfheight">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
Half height hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Half height subtitle
|
||||
</p>
|
||||
<p class="title">Half height hero</p>
|
||||
<p class="subtitle">Half height subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=halfheight_example horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=halfheight_example horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
<div id="fullheight-hero"></div>
|
||||
|
||||
@@ -163,48 +152,51 @@ meta:
|
||||
<section class="hero is-danger is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
Fullheight hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Fullheight subtitle
|
||||
</p>
|
||||
<p class="title">Fullheight hero</p>
|
||||
<p class="subtitle">Fullheight subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=fullheight_example horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=fullheight_example horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
<!-- Fullheight with navbar -->
|
||||
{% include elements/anchor.html name="Fullheight with navbar" %}
|
||||
{% include docs/elements/anchor.html name="Fullheight with navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
|
||||
If you are using a
|
||||
<a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the
|
||||
<code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar
|
||||
height.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{% capture fullheight_with_navbar_example %}
|
||||
{% include examples/navbar-basic.html %}
|
||||
{% capture fullheight_with_navbar_example %} {% include
|
||||
docs/examples/navbar-basic.html %}
|
||||
|
||||
<section class="hero is-link is-fullheight-with-navbar">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Fullheight hero with navbar
|
||||
</p>
|
||||
<p class="title">Fullheight hero with navbar</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=fullheight_with_navbar_example horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=fullheight_with_navbar_example horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
<!-- Fullheight with 3 parts -->
|
||||
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
|
||||
{% include docs/elements/anchor.html name="Fullheight hero in 3 parts" %}
|
||||
|
||||
<div class="content">
|
||||
<p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
|
||||
<p>
|
||||
To obtain a hero that will cover the whole height of the viewport, you can split it in
|
||||
<strong>3 vertical parts</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code>
|
||||
@@ -225,25 +217,20 @@ meta:
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroA">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroA" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-primary is-inverted">
|
||||
<span class="icon">
|
||||
@@ -261,12 +248,8 @@ meta:
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -287,7 +270,6 @@ meta:
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture heroNavbarB %}
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-head">
|
||||
@@ -295,25 +277,20 @@ meta:
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroB">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroB" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-info is-inverted">
|
||||
<span class="icon">
|
||||
@@ -330,12 +307,8 @@ meta:
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -367,7 +340,6 @@ meta:
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture heroNavbarC %}
|
||||
<section class="hero is-success is-fullheight">
|
||||
<!-- Hero head: will stick at the top -->
|
||||
@@ -376,25 +348,20 @@ meta:
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroC">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroC" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-success is-inverted">
|
||||
<span class="icon">
|
||||
@@ -412,12 +379,8 @@ meta:
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -438,9 +401,15 @@ meta:
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=heroNavbarA horizontal=true fullwidth=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarC horizontal=true fullwidth=true more=true %}
|
||||
|
||||
{% include components/variables.html type='component' hide_content=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=heroNavbarA
|
||||
horizontal=true fullwidth=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true
|
||||
more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html content=heroNavbarC
|
||||
horizontal=true fullwidth=true more=true
|
||||
%}
|
||||
|
||||
@@ -1,34 +1,30 @@
|
||||
---
|
||||
title: Level
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: layout
|
||||
doc-subtab: level
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-level
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-level
|
||||
---
|
||||
|
||||
{% capture nav_example %}
|
||||
<!-- Main container -->
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
<p class="subtitle is-5"><strong>123</strong> posts</p>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
<input class="input" type="text" placeholder="Find a post" />
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
<button class="button">Search</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,7 +40,6 @@ breadcrumb:
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture nav_centered_example %}
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
@@ -73,7 +68,6 @@ breadcrumb:
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture nav_centered_bis_example %}
|
||||
<nav class="level">
|
||||
<p class="level-item has-text-centered">
|
||||
@@ -83,7 +77,11 @@ breadcrumb:
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 30px;">
|
||||
<img
|
||||
src="{{ site.url }}/assets/images/bulma-type.png"
|
||||
alt=""
|
||||
style="height: 30px"
|
||||
/>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
@@ -93,7 +91,6 @@ breadcrumb:
|
||||
</p>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture nav_mobile_example %}
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-item has-text-centered">
|
||||
@@ -129,7 +126,7 @@ breadcrumb:
|
||||
<li>
|
||||
<code>level</code>: main container
|
||||
<ul>
|
||||
<li><code>level-left</code> for the left side
|
||||
<li><code>level-left</code> for the left side</li>
|
||||
<li>
|
||||
<code>level-right</code> for the right side
|
||||
<ul>
|
||||
@@ -139,25 +136,41 @@ breadcrumb:
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
|
||||
<p>
|
||||
In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text
|
||||
input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be
|
||||
<strong>vertically centered</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=nav_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Centered level" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=nav_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Centered level" %}
|
||||
|
||||
<div class="content">
|
||||
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
|
||||
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as
|
||||
they are <strong>direct</strong> children of the <code>level</code> container.
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=nav_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=nav_centered_bis_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Mobile level" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=nav_centered_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=nav_centered_bis_example horizontal=true more=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Mobile level" %}
|
||||
|
||||
<div class="content">
|
||||
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
|
||||
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as
|
||||
well, add the
|
||||
<code>is-mobile</code> modifier on the <code>level</code> container.
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=nav_mobile_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=nav_mobile_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
@@ -1,28 +1,30 @@
|
||||
---
|
||||
title: Media Object
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: layout
|
||||
doc-subtab: media-object
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-media
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-media
|
||||
---
|
||||
|
||||
{% capture media_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<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.
|
||||
<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">
|
||||
@@ -44,12 +46,11 @@ breadcrumb:
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture media_bis_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
@@ -67,7 +68,7 @@ breadcrumb:
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Press enter to submit
|
||||
<input type="checkbox" /> Press enter to submit
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,21 +76,22 @@ breadcrumb:
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture media_nested_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Barbara Middleton</strong>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
||||
<br>
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros
|
||||
lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris
|
||||
sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
@@ -97,26 +99,32 @@ breadcrumb:
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/96x96.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Sean Brown</strong>
|
||||
<br>
|
||||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
|
||||
<br>
|
||||
<br />
|
||||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque
|
||||
habitant morbi tristique senectus et netus et malesuada fames ac
|
||||
turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis
|
||||
leo feugiat.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
|
||||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem
|
||||
cursus ullamcorper sit amet nec massa.
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
|
||||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue.
|
||||
Praesent malesuada metus sed pharetra euismod. Cras tellus odio,
|
||||
tincidunt iaculis diam non, porta aliquet tortor.
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
@@ -124,16 +132,20 @@ breadcrumb:
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/96x96.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Kayli Eunice </strong>
|
||||
<br>
|
||||
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
|
||||
<br>
|
||||
<br />
|
||||
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel.
|
||||
Maecenas varius felis sit amet magna vestibulum euismod malesuada
|
||||
cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus
|
||||
et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id
|
||||
feugiat.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
@@ -145,7 +157,7 @@ breadcrumb:
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
@@ -164,21 +176,33 @@ breadcrumb:
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
|
||||
<p>
|
||||
The
|
||||
<a
|
||||
href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code"
|
||||
>media object</a
|
||||
>
|
||||
is a UI element perfect for repeatable and nestable content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_example more=true %}
|
||||
{% include docs/elements/snippet.html content=media_example more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons… or even a <strong>navbar</strong>.</p>
|
||||
<p>
|
||||
You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons… or even a
|
||||
<strong>navbar</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_bis_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Nesting" %}
|
||||
{% include docs/elements/snippet.html content=media_bis_example more=true %}
|
||||
{% include docs/elements/anchor.html name="Nesting" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_nested_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=media_nested_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
|
||||
@@ -1,59 +1,68 @@
|
||||
---
|
||||
title: Section
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
fullwidth: true
|
||||
doc-tab: layout
|
||||
doc-subtab: section
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-section
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-section
|
||||
---
|
||||
|
||||
{% capture section_example %}
|
||||
<section class="section">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
A simple container to divide your page into <strong>sections</strong>, like
|
||||
the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture section_medium_example %}
|
||||
<section class="section is-medium">
|
||||
<h1 class="title">Medium section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
A simple container to divide your page into <strong>sections</strong>, like
|
||||
the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture section_large_example %}
|
||||
<section class="section is-large">
|
||||
<h1 class="title">Large section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
A simple container to divide your page into <strong>sections</strong>, like
|
||||
the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>section</code> components are simple layout elements with responsive padding. They are best used as <strong>direct</strong> children of <code>body</code>.
|
||||
The <code>section</code> components are simple layout elements with responsive padding. They are best used as
|
||||
<strong>direct</strong> children of <code>body</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=section_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=section_example horizontal=true
|
||||
fullwidth=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||
<p>
|
||||
You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=section_medium_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/snippet.html content=section_large_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include components/variables.html %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=section_medium_example
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=section_large_example horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
@@ -1,907 +0,0 @@
|
||||
---
|
||||
title: Tiles powered by Flexbox
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: tiles
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-tiles
|
||||
---
|
||||
|
||||
{% capture tile_empty %}
|
||||
<div class="tile">
|
||||
<!-- The magical tile element! -->
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_default %}
|
||||
<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>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_ancestor %}
|
||||
<div class="tile is-ancestor">
|
||||
<!-- All other tile elements -->
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_horizontal %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile">
|
||||
<!-- Add content or other tiles -->
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!-- Add content or other tiles -->
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_resize %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4">
|
||||
<!-- 1/3 -->
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!-- This tile will take the rest: 2/3 -->
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_vertical %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4 is-vertical">
|
||||
<div class="tile">
|
||||
<!-- Top tile -->
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!-- Bottom tile -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!-- This tile will take up the whole vertical space -->
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_123 %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4 is-vertical is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
</div>
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_lorem %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4 is-vertical is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture md_3_levels %}
|
||||
tile is-ancestor
|
||||
|
|
||||
└───tile is-parent
|
||||
|
|
||||
└───tile is-child
|
||||
{% endcapture %}
|
||||
|
||||
{% capture md_nesting %}
|
||||
tile is-ancestor
|
||||
|
|
||||
├───tile is-vertical is-8
|
||||
| |
|
||||
| ├───tile
|
||||
| | |
|
||||
| | ├───tile is-parent is-vertical
|
||||
| | | ├───tile is-child
|
||||
| | | └───tile is-child
|
||||
| | |
|
||||
| | └───tile is-parent
|
||||
| | └───tile is-child
|
||||
| |
|
||||
| └───tile is-parent
|
||||
| └───tile is-child
|
||||
|
|
||||
└───tile is-parent
|
||||
└───tile is-child
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_any_content %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_3_columns %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Hello World</p>
|
||||
<p class="subtitle">What is up?</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Foo</p>
|
||||
<p class="subtitle">Bar</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Third column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Top box</p>
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Bottom box</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Wide column</p>
|
||||
<p class="subtitle">Aligned with the right column</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Tall column</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Side column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-8">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Main column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_4_columns %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Four</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-9">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Five</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-8 is-vertical">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Six</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Seven</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Eight</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile is-8 is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Nine</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Ten</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Eleven</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Twelve</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-6">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Thirteen</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Fourteen</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_empty }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Example" %}
|
||||
|
||||
<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 %}{{ tile_default }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/anchor.html name="How it works: Nesting" %}
|
||||
|
||||
<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 %}{{ tile_ancestor }}{% 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 %}{{ tile_horizontal }}{% 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 %}{{ tile_resize }}{% 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 %}{{ tile_vertical }}{% 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 %}{{ tile_123 }}{% 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 %}{{ tile_lorem }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Nesting requirements" %}
|
||||
|
||||
<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 %}{{ md_3_levels }}{% 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 %}{{ md_nesting }}{% 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 %}{{ tile_any_content }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="3 columns" %}
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Hello World</p>
|
||||
<p class="subtitle">What is up?</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Foo</p>
|
||||
<p class="subtitle">Bar</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Third column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Top box</p>
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Bottom box</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Wide column</p>
|
||||
<p class="subtitle">Aligned with the right column</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Tall column</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Side column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-8">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Main column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_3_columns }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="4 columns" %}
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Four</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-9">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Five</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-8 is-vertical">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Six</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Seven</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Eight</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile is-8 is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Nine</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Ten</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Eleven</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Twelve</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-6">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Thirteen</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Fourteen</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_4_columns }}{% endhighlight %}
|
||||
Reference in New Issue
Block a user