mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Fix tiles
This commit is contained in:
Jeremy Thomas
parent
25d0ea1136
commit
03c13488a6
@ -16,6 +16,7 @@
|
||||
{% if include.clipped %}bd-is-clipped{% endif %}
|
||||
{% if include.size %}bd-is-{{ include.size }}{% 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 %}">
|
||||
{{ include.content }}
|
||||
|
||||
@ -81,6 +81,10 @@
|
||||
.bd-snippet-code
|
||||
overflow: auto
|
||||
|
||||
.bd-snippet.bd-is-fullwidth
|
||||
border-radius: 0
|
||||
border-width: 1px 0
|
||||
|
||||
+desktop
|
||||
.bd-snippet.bd-is-vertical
|
||||
align-items: stretch
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.bd-typo
|
||||
margin-top: 3rem
|
||||
&:not(:first-child)
|
||||
margin-top: 3rem
|
||||
|
||||
.bd-has-text-rss
|
||||
color: $rss
|
||||
|
||||
@ -10402,7 +10402,7 @@ svg {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bd-typo {
|
||||
.bd-typo:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@ -10939,6 +10939,11 @@ svg {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bd-snippet.bd-is-fullwidth {
|
||||
border-radius: 0;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.bd-snippet.bd-is-vertical {
|
||||
align-items: stretch;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
---
|
||||
title: Footer
|
||||
subtitle: "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc."
|
||||
layout: documentation
|
||||
hide_carbon: true
|
||||
doc-tab: layout
|
||||
doc-subtab: footer
|
||||
---
|
||||
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
{% capture footer_example %}
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
@ -21,15 +21,10 @@ doc-subtab: footer
|
||||
</footer>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<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 layout/main-close.html show_carbon=true %}
|
||||
|
||||
{% 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 %}
|
||||
</div>
|
||||
</section>
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
@ -1,20 +1,13 @@
|
||||
---
|
||||
title: Hero
|
||||
subtitle: "An imposing <strong>hero banner</strong> to showcase something"
|
||||
layout: documentation
|
||||
hide_carbon: true
|
||||
doc-tab: layout
|
||||
doc-subtab: hero
|
||||
---
|
||||
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<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>
|
||||
{% include layout/main-close.html show_carbon=true %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
@ -31,6 +24,7 @@ doc-subtab: hero
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero">
|
||||
@ -654,3 +648,5 @@ doc-subtab: hero
|
||||
{% include snippet.html content=heroNavbarB horizontal=true more=true %}
|
||||
{% include snippet.html content=heroNavbarC horizontal=true more=true %}
|
||||
</section>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Level
|
||||
subtitle: "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element"
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: level
|
||||
@ -118,96 +119,84 @@ doc-subtab: level
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Level</h1>
|
||||
<h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The <strong>structure</strong> of a level is the following:</p>
|
||||
<div class="content">
|
||||
<p>The <strong>structure</strong> of a level is the following:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>level</code>: main container
|
||||
<ul>
|
||||
<li><code>level-left</code> for the left side
|
||||
<li>
|
||||
<code>level</code>: main container
|
||||
<code>level-right</code> for the right side
|
||||
<ul>
|
||||
<li><code>level-left</code> for the left side
|
||||
<li>
|
||||
<code>level-right</code> for the right side
|
||||
<ul>
|
||||
<li><code>level-item</code> for each individual element</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>level-item</code> for each individual element</li>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="bd-structure">
|
||||
<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-item">
|
||||
<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">
|
||||
</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>
|
||||
<div class="bd-structure">
|
||||
<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-item">
|
||||
<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">
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Published</a>
|
||||
</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 class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=nav_example horizontal=true more=true %}
|
||||
|
||||
{% include 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.
|
||||
<div class="level-right bd-structure-item" title="level-right">
|
||||
<p class="level-item">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Published</a>
|
||||
</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>
|
||||
</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">
|
||||
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_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=nav_mobile_example horizontal=true more=true %}
|
||||
{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include 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.
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=nav_mobile_example horizontal=true more=true %}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Media Object
|
||||
subtitle: "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context"
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: media-object
|
||||
@ -156,69 +157,57 @@ doc-subtab: media-object
|
||||
</article>
|
||||
{% 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="container">
|
||||
<h1 class="title">Media Object</h1>
|
||||
<h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-structure">
|
||||
<article class="media">
|
||||
<figure class="media-left bd-structure-item" title="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<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 class="bd-structure">
|
||||
<article class="media">
|
||||
<figure class="media-left bd-structure-item" title="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<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>
|
||||
<div class="media-right bd-structure-item" title="media-right">
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
</article>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=media_example horizontal=true more=true %}
|
||||
|
||||
<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 class="media-right bd-structure-item" title="media-right">
|
||||
<button class="delete"></button>
|
||||
</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">
|
||||
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
||||
</div>
|
||||
{% include snippet.html content=media_bis_example horizontal=true more=true %}
|
||||
|
||||
{% include snippet.html content=media_nested_example horizontal=true more=true %}
|
||||
{% include anchor.html name="Nesting" %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<div class="content">
|
||||
<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
|
||||
subtitle: "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading"
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: section
|
||||
---
|
||||
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<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 %}
|
||||
{% capture section_example %}
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
@ -31,13 +17,16 @@ doc-subtab: section
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
{% highlight html %}{{ section_example }}{% endhighlight %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user