Commentary
The level element provides horizontal layout of children using flexbox.
Children can be start, centered or end justified. The .level element is the companion to
the .stack element and can also be a child of .stack.
Note also that all children will be vertically centered, hence the tallest child will determine the height of
the level element. .align-top and .align-bottom will vertically align
the content inside the level.
A child can be another .level, .level-left, .level-centered or .level-right
element and will layout its children accordingly. The .stack layout control can be a child of .level
in order to vertically align elements.
For device viewports less than (nominally) 576px, the children will be stacked vertically and left adjusted.
By using the .is-mobile modifier, the children will maintain their layout set by their parent.
The .level element can be used to house navigation items that have both an icon and associated text.
The .icon-nav modifier can control an anchor a containing icons and text.
At the nominal breakpoint, the anchor text will be hidden in order to afford more room for navigation icons and to keep
them from wrapping.
Background and text colours can be set for each level element using the colour element classes such as .is-secondary,
.is-secondary-light etc.
Usage
| Classes: | |
|---|---|
.level |
Builds horizontal (row direction) flexbox element. |
.level-centered |
Flexbox with centered children. |
.level-start |
Flexbox with start adjusted children. |
.level-end |
Flexbox with end adjusted children. |
.align-top .align-bottom |
Optional modifier to vertically align children of a level. |
.has-nowrap |
Optional modifier that prevents children from wrapping to a new row. |
.is-mobile |
Reverts to vertical block layout if viewport width is less then (nominally) 576px. |
.icon-nav |
Controls a child if it is used as a navigation link. |
| Dependencies: | |
|---|---|
| File: | level.css |
| Variables: | --gap-col, --gap-row, --pad-horz, --pad-vert |
Examples
Basic .level
<div class="level is-grey">
<div class="is-secondary">
<div>Lorem Ipsum 1</div>
<div>item one</div>
</div>
<div class="is-secondary">
<div>Lorem Ipsum 2</div>
<div>item two</div>
</div>
<div class="is-secondary">
<div>Lorem Ipsum 3</div>
<div>item three</div>
</div>
<div class="is-secondary">
<div>Lorem Ipsum 4</div>
<div>item four</div>
</div>
</div>
Basic .level-centered
<div class="level-centered is-grey">
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-bookmark"></span>
<p>Bookmark</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-clock"></span>
<p>Clock</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-film"></span>
<p>Film</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-mail is-large"></span>
<p>Mail Large</p>
</a>
</div>
.level + [.level-start, .level-centered, .level-end]
<div class="level is-grey">
<div class="level-start is-secondary-light">
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-bookmark"></span>
<p>Bookmark</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-clock"></span>
<p>Clock</p>
</a>
</div>
<div class="level-centered is-secondary-light">
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-film"></span>
<p>Film</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-mail is-large"></span>
<p>Mail Large</p>
</a>
</div>
<div class="level-end is-secondary-light">
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-music"></span>
<p>Music</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-share"></span>
<p>Share</p>
</a>
</div>
</div>
.level-centered and .is-mobile
<div class="level-centered is-grey is-mobile">
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-bookmark"></span>
<p>Bookmark</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-clock"></span>
<p>Clock</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-film"></span>
<p>Film</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-mail"></span>
<p>Mail</p>
</a>
</div>
.level + [.level-start, .level-centered, .level-end] and .is-mobile
<div class="level is-mobile is-grey">
<div class="level-start is-mobile is-secondary-light">
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-bookmark"></span>
<p>Bookmark</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-clock"></span>
<p>Clock</p>
</a>
</div>
<div class="level-centered is-mobile is-secondary-light">
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-film"></span>
<p>Film</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-mail"></span>
<p>Mail</p>
</a>
</div>
<div class="level-end is-mobile is-secondary-light">
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-music"></span>
<p>Music</p>
</a>
<a class="icon-nav is-dark" href="#core-layout_level">
<span class="icon-bg-share"></span>
<p>Share</p>
</a>
</div>
</div>