mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 03:14:30 -07:00
Fix tiles
This commit is contained in:
Jeremy Thomas
@@ -16,6 +16,7 @@
|
|||||||
{% if include.clipped %}bd-is-clipped{% endif %}
|
{% if include.clipped %}bd-is-clipped{% endif %}
|
||||||
{% if include.size %}bd-is-{{ include.size }}{% endif %}
|
{% if include.size %}bd-is-{{ include.size }}{% endif %}
|
||||||
{% if include.one_fifth %}bd-is-one-fifth{% endif %}
|
{% if include.one_fifth %}bd-is-one-fifth{% endif %}
|
||||||
|
{% if include.fullwidth %}bd-is-fullwidth{% endif %}
|
||||||
">
|
">
|
||||||
<div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
|
<div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
|
||||||
{{ include.content }}
|
{{ include.content }}
|
||||||
|
|||||||
@@ -81,6 +81,10 @@
|
|||||||
.bd-snippet-code
|
.bd-snippet-code
|
||||||
overflow: auto
|
overflow: auto
|
||||||
|
|
||||||
|
.bd-snippet.bd-is-fullwidth
|
||||||
|
border-radius: 0
|
||||||
|
border-width: 1px 0
|
||||||
|
|
||||||
+desktop
|
+desktop
|
||||||
.bd-snippet.bd-is-vertical
|
.bd-snippet.bd-is-vertical
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
.bd-typo
|
.bd-typo
|
||||||
margin-top: 3rem
|
&:not(:first-child)
|
||||||
|
margin-top: 3rem
|
||||||
|
|
||||||
.bd-has-text-rss
|
.bd-has-text-rss
|
||||||
color: $rss
|
color: $rss
|
||||||
|
|||||||
@@ -10402,7 +10402,7 @@ svg {
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-typo {
|
.bd-typo:not(:first-child) {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -10939,6 +10939,11 @@ svg {
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-snippet.bd-is-fullwidth {
|
||||||
|
border-radius: 0;
|
||||||
|
border-width: 1px 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1024px) {
|
@media screen and (min-width: 1024px) {
|
||||||
.bd-snippet.bd-is-vertical {
|
.bd-snippet.bd-is-vertical {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
---
|
---
|
||||||
title: Footer
|
title: Footer
|
||||||
|
subtitle: "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc."
|
||||||
layout: documentation
|
layout: documentation
|
||||||
|
hide_carbon: true
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: footer
|
doc-subtab: footer
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav/subnav-layout.html %}
|
|
||||||
|
|
||||||
{% capture footer_example %}
|
{% capture footer_example %}
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -21,15 +21,10 @@ doc-subtab: footer
|
|||||||
</footer>
|
</footer>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
<section class="section">
|
{% include layout/main-close.html show_carbon=true %}
|
||||||
<div class="container">
|
|
||||||
<h1 class="title">Footer</h1>
|
|
||||||
<h2 class="subtitle">
|
|
||||||
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{% include snippet.html content=footer_example horizontal=true more=true %}
|
{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include layout/main-open.html %}
|
||||||
</div>
|
|
||||||
</section>
|
{% include variables.html %}
|
||||||
|
|||||||
@@ -1,20 +1,13 @@
|
|||||||
---
|
---
|
||||||
title: Hero
|
title: Hero
|
||||||
|
subtitle: "An imposing <strong>hero banner</strong> to showcase something"
|
||||||
layout: documentation
|
layout: documentation
|
||||||
|
hide_carbon: true
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: hero
|
doc-subtab: hero
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav/subnav-layout.html %}
|
{% include layout/main-close.html show_carbon=true %}
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="title">Hero</h1>
|
|
||||||
<h2 class="subtitle">
|
|
||||||
An imposing <strong>hero banner</strong> to showcase something
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section is-fullwidth">
|
<section class="section is-fullwidth">
|
||||||
<div class="bd-example">
|
<div class="bd-example">
|
||||||
@@ -31,6 +24,7 @@ doc-subtab: hero
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
@@ -654,3 +648,5 @@ doc-subtab: hero
|
|||||||
{% include snippet.html content=heroNavbarB horizontal=true more=true %}
|
{% include snippet.html content=heroNavbarB horizontal=true more=true %}
|
||||||
{% include snippet.html content=heroNavbarC horizontal=true more=true %}
|
{% include snippet.html content=heroNavbarC horizontal=true more=true %}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{% include layout/main-open.html %}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Level
|
title: Level
|
||||||
|
subtitle: "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element"
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: level
|
doc-subtab: level
|
||||||
@@ -118,96 +119,84 @@ doc-subtab: level
|
|||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include subnav/subnav-layout.html %}
|
<div class="content">
|
||||||
|
<p>The <strong>structure</strong> of a level is the following:</p>
|
||||||
<section class="section">
|
<ul>
|
||||||
<div class="container">
|
<li>
|
||||||
<h1 class="title">Level</h1>
|
<code>level</code>: main container
|
||||||
<h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>The <strong>structure</strong> of a level is the following:</p>
|
|
||||||
<ul>
|
<ul>
|
||||||
|
<li><code>level-left</code> for the left side
|
||||||
<li>
|
<li>
|
||||||
<code>level</code>: main container
|
<code>level-right</code> for the right side
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>level-left</code> for the left side
|
<li><code>level-item</code> for each individual element</li>
|
||||||
<li>
|
|
||||||
<code>level-right</code> for the right side
|
|
||||||
<ul>
|
|
||||||
<li><code>level-item</code> for each individual element</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
</li>
|
||||||
</div>
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bd-structure">
|
<div class="bd-structure">
|
||||||
<nav class="level bd-structure-item bd-is-structure-container" title="level">
|
<nav class="level bd-structure-item bd-is-structure-container" title="level">
|
||||||
<div class="level-left bd-structure-item" title="level-left">
|
<div class="level-left bd-structure-item" title="level-left">
|
||||||
<div class="level-item">
|
<div class="level-item">
|
||||||
<p class="subtitle is-5">
|
<p class="subtitle is-5">
|
||||||
<strong>123</strong> posts
|
<strong>123</strong> posts
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="level-item">
|
<div class="level-item">
|
||||||
<div class="field has-addons">
|
<div class="field has-addons">
|
||||||
<p class="control">
|
<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>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="level-right bd-structure-item" title="level-right">
|
|
||||||
<p class="level-item">
|
|
||||||
<strong>All</strong>
|
|
||||||
</p>
|
</p>
|
||||||
<p class="level-item">
|
<p class="control">
|
||||||
<a>Published</a>
|
<button class="button">
|
||||||
</p>
|
Search
|
||||||
<p class="level-item">
|
</button>
|
||||||
<a>Drafts</a>
|
|
||||||
</p>
|
|
||||||
<p class="level-item">
|
|
||||||
<a>Deleted</a>
|
|
||||||
</p>
|
|
||||||
<p class="level-item">
|
|
||||||
<a class="button is-success">
|
|
||||||
New
|
|
||||||
</a>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="level-right bd-structure-item" title="level-right">
|
||||||
{% include snippet.html content=nav_example horizontal=true more=true %}
|
<p class="level-item">
|
||||||
|
<strong>All</strong>
|
||||||
{% include anchor.html name="Centered level" %}
|
</p>
|
||||||
|
<p class="level-item">
|
||||||
<div class="content">
|
<a>Published</a>
|
||||||
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.
|
</p>
|
||||||
|
<p class="level-item">
|
||||||
|
<a>Drafts</a>
|
||||||
|
</p>
|
||||||
|
<p class="level-item">
|
||||||
|
<a>Deleted</a>
|
||||||
|
</p>
|
||||||
|
<p class="level-item">
|
||||||
|
<a class="button is-success">
|
||||||
|
New
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=nav_centered_example horizontal=true more=true %}
|
{% include snippet.html content=nav_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
|
{% include anchor.html name="Centered level" %}
|
||||||
|
|
||||||
{% include anchor.html name="Mobile 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.
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
{% include snippet.html content=nav_centered_example horizontal=true more=true %}
|
||||||
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 snippet.html content=nav_mobile_example horizontal=true more=true %}
|
{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
|
||||||
|
|
||||||
</div>
|
{% include anchor.html name="Mobile level" %}
|
||||||
</section>
|
|
||||||
|
<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.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include snippet.html content=nav_mobile_example horizontal=true more=true %}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Media Object
|
title: Media Object
|
||||||
|
subtitle: "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context"
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: media-object
|
doc-subtab: media-object
|
||||||
@@ -156,69 +157,57 @@ doc-subtab: media-object
|
|||||||
</article>
|
</article>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include subnav/subnav-layout.html %}
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="bd-structure">
|
||||||
<div class="container">
|
<article class="media">
|
||||||
<h1 class="title">Media Object</h1>
|
<figure class="media-left bd-structure-item" title="media-left">
|
||||||
<h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
|
<p class="image is-64x64">
|
||||||
|
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||||
<hr>
|
</p>
|
||||||
|
</figure>
|
||||||
<div class="content">
|
<div class="media-content bd-structure-item bd-is-structure-right" title="media-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>
|
<div class="content">
|
||||||
</div>
|
<p>
|
||||||
|
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||||
<div class="bd-structure">
|
<br>
|
||||||
<article class="media">
|
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.
|
||||||
<figure class="media-left bd-structure-item" title="media-left">
|
</p>
|
||||||
<p class="image is-64x64">
|
</div>
|
||||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
<nav class="level">
|
||||||
</p>
|
<div class="level-left">
|
||||||
</figure>
|
<a class="level-item">
|
||||||
<div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
|
<span class="icon is-small"><i class="fas fa-reply"></i></span>
|
||||||
<div class="content">
|
</a>
|
||||||
<p>
|
<a class="level-item">
|
||||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
|
||||||
<br>
|
</a>
|
||||||
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.
|
<a class="level-item">
|
||||||
</p>
|
<span class="icon is-small"><i class="fas fa-heart"></i></span>
|
||||||
</div>
|
</a>
|
||||||
<nav class="level">
|
|
||||||
<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>
|
</div>
|
||||||
<div class="media-right bd-structure-item" title="media-right">
|
</nav>
|
||||||
<button class="delete"></button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="media-right bd-structure-item" title="media-right">
|
||||||
{% include snippet.html content=media_example horizontal=true more=true %}
|
<button class="delete"></button>
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=media_bis_example horizontal=true more=true %}
|
{% include snippet.html content=media_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Nesting" %}
|
<div class="content">
|
||||||
|
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
{% include snippet.html content=media_bis_example horizontal=true more=true %}
|
||||||
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% include snippet.html content=media_nested_example horizontal=true more=true %}
|
{% include anchor.html name="Nesting" %}
|
||||||
|
|
||||||
</div>
|
<div class="content">
|
||||||
</section>
|
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include snippet.html content=media_nested_example horizontal=true more=true %}
|
||||||
|
|||||||
@@ -1,26 +1,12 @@
|
|||||||
---
|
---
|
||||||
title: Section
|
title: Section
|
||||||
|
subtitle: "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading"
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: section
|
doc-subtab: section
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav/subnav-layout.html %}
|
{% capture section_example %}
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="title">Section</h1>
|
|
||||||
<h2 class="subtitle">
|
|
||||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}
|
|
||||||
<body>
|
<body>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -31,13 +17,16 @@ doc-subtab: section
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
{% endhighlight %}
|
{% endcapture %}
|
||||||
|
|
||||||
<div class="content">
|
<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>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html %}
|
{% highlight html %}{{ section_example }}{% endhighlight %}
|
||||||
|
|
||||||
</div>
|
<div class="content">
|
||||||
</section>
|
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user