Layout Classes

Layout API

The layout API consists of the set of classes that control both the horizontal and vertical positioning of html elements

Parent containers are normally given one of the following classes to handle vertical and horizontal positon of its child elements respectively

uscb-layout-column
ucsb-layout-row

uscb-layout-column: - Orients child elements vertically inside of their parent container i.e stacking them

uscb-layout-row: - Orients child elements horizontally inside of their parent container i.e next to each other.

Flex API

Child elements are given flex classes to control both the horizontal and vertical space they cover in their parent element. the classes are as follows:

Flex values range from 5% - 100%, and refelcts the amount of space the child element should span inside the parent container

uscb-flex-col-10
uscb-flex-col-25
uscb-flex-row-10
uscb-flex-row-40

Responsive Classes

The layout api supports global responsive breakpoints such as sm, md, lg and xl, see below chart.

Break Point

Media Query

max-width: 576px

gt-sm

min-width: 576px

max-width: 768px

gt-md

min-width: 768px

max-width: 992px

gt-lg

min-width: 992px

max-width: 1200px

Examples

uscb-layout-row-sm
uscb-layout-row-mdm
uscb-flex-col-sm
uscb-flex-col-lg

Layout Scaffolding

I'm position left on desktop width 50% and i'm stacked on tablet and phones width 100%

My class are:

uscb-flex-row-50
uscb-flex-row-md-100

Parent Div Classes: "uscb-flex-row-50" "uscb-flex-row-md-100"

I'm position left on desktop width 50% and i'm stacked on tablet and phones width 100%

My class are:

uscb-flex-row-50
uscb-flex-row-md-100

Parent Div Classes: "uscb-flex-row-50" "uscb-flex-row-md-100"

<div class="uscb-flex-row-50 uscb-flex-row-md-100" >
<p>I'm position left on desktop width 50% and i'm stacked on tablet and phones width 100%</p>
<p>My class are: </p>
<ul>
<li>uscb-flex-row-50 </li>
<li>uscb-flex-row-md-100</li>
</ul>
<p>Parent Div Classes: "uscb-flex-row-50" "uscb-flex-row-md-100" </p>
</div>
<div class="uscb-flex-row-50 uscb-flex-row-md-100">
<p>I'm position left on desktop width 50% and i'm stacked on tablet and phones width 100%</p>
<p>My class are: </p>
<ul>
<li>uscb-flex-row-50 </li>
<li>uscb-flex-row-md-100</li>
</ul>
<p>Parent Div Classes: "uscb-flex-row-50" "uscb-flex-row-md-100" </p>
</div>
</div>

Top of Section

Layout order

I'm First in the DOM but second when Rendered because my Flex-order is 2

My class are:

uscb-flex-row-50
uscb-flex-row-md-100
uscb-flex-order-2

Parent Div Classes: "uscb-flex-row-50" "uscb-flex-row-md-100"

I'm Second in the DOM but First when Rendered because my Flex-order is 1

My class are:

uscb-flex-row-50
uscb-flex-row-md-100
uscb-flex-order-1

Parent Div Classes: "uscb-flex-row-50" "uscb-flex-row-md-100"

<p>I'm First in the DOM but second when Rendered because my Flex-order is 2</p>
<p>My class are: </p>
<ul>
<li>uscb-flex-row-50 </li>
<li>uscb-flex-row-md-100</li>
<li>uscb-flex-order-2</li>
</ul>
<p>Parent Div Classes: "uscb-flex-row-50" "uscb-flex-row-md-100" </p>
</div>
<div style={div2} class="uscb-flex-row-50 uscb-flex-row-md-100 scb-flex-order-1">
<p>I'm Second in the DOM but First when Rendered because my Flex-order is 1</p>
<p>My class are: </p>
<ul>
<li>uscb-flex-row-50 </li>
<li>uscb-flex-row-md-100</li>
<li>uscb-flex-order-1</li>
</ul>
<p>Parent Div Classes: "uscb-flex-row-50" "uscb-flex-row-md-100" </p>
</div>
</div>