Layout
We define layout in our structure as the way we align, arrange, and structure components on a page. Prefix with l-
Align
Mostly used for centering and some assume a flex parent.
l-align-<position>
.l-align-center-x
Uses auto side margin for horizontal center
www.wbez.org 2
.l-align-center-y
Absolutely positioned for vertical vertical center
ferris-ds 1
.l-align-center-self
Used on children of flex parent for vertical center
ferris-ds 1
.l-align-center-children
Apply to parent to center children. Centers x and y.
ferris-ds 2
www.wbez.org 5
Clearfix
Clear out everything after a float.
www.wbez.org 2
.l-clearfix
HTML Example
<div style="border:2px solid black;">
<div class="p-b has-bg-red {{className}}">
<span class="p-b has-bg-black-off has-text-white" style="float:left; "
>Floated div</span
>
</div>
</div>
Columns Experimental
Experimental: A library of column width classes, meant to play well with column-setter. For example, l-col-4@bp-l, l-col-2-from-bp-xl, l-col-1-until-bp-s, etc.
l-col-<size>-<bp>
Container Experimental
Experimental: Max width container, centered with margin auto. Note: Demo is best viewed in standalone preview.
ferris-ds 6
www.wbez.org 14
.l-container
HTML Example
<div
style="border: 2px solid black"
class="l-container {{ className }} p-b container-demo"
>
<strong>l-container {% if className %}{{ className }}{%endif%}</strong> (<span
></span>)
</div>
Width
Defines width settings. Helpful for responsive images.
l-width-<size>
.l-width-full
Width is 100% of parent
ferris-ds 2
.l-width-max
Max-width: 100%. Never greater than parent, but not stretched beyond its natural size.
.l-width-story
Max-width: Never greater than a story