Flex Element
Element type
Class
Element code
content-flex-container
Child elements
.content-flex-container { display: flex; }
.content-flex-row { flex-direction: row; }
.content-flex-column { flex-direction: column; }
.content-flex-container.flex-start { justify-content: flex-start; }
.content-flex-container.flex-end { justify-content: flex-end; }
.content-flex-container.flex-end { justify-content: flex-end; }
.content-flex-container.center { justify-content: center; }
.content-flex-container.space-between { justify-content: space-between; }
.content-flex-container.space-around { justify-content: space-around; }
.content-flex-container.space-evenly { justify-content: space-evenly; }
.content-flex-container.align-top { align-items: flex-start; }
.content-flex-container.align-center { align-items: center; }
.content-flex-container.align-bottom { align-items: flex-end; }
.content-flex-container.flex-start { align-items: flex-start; }
.content-flex-container.flex-wrap { flex-wrap: wrap; }
.content-flex-container.flex-nowrap { flex-wrap: nowrap; }
.content-flex-container.flex-wrap-reverse { flex-wrap: wrap-reverse; }
Action
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Example code
<div class="content-flex-container" >..Text..</div>

Alignment
Element type
Class
Element code
align-{{..subfix..}}, float-{{..subfix..}}
Classes
.align-right { text-align: right; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-middle { vertical-align: middle; }
.align-top { vertical-align: top; }
.align-bottom { vertical-align: bottom; }
.float-right { float: right; }
.float-left { float: left; }
Action
To control the object alignment.
Example code
<div class="align-center" >..Text..</div>

Text colour
Element type
Class
Classes
.gray { color: grey; }
.blue { color: blue; }
.red { color: red; }
.pink { color: pink; }
.green { color: green; }
.blue { color: blue; }
.yellow { color: yellow; }
.green { color: green; }
.orange { color: orange; }
.white { color: #ffffff; }
.skyblue { color: skyblue; }
Action
Text colour template.
Background colour
Element type
Class
Classes
.bg-white { background: #ffffff; }
.bg-red { background: red; }
.bg-pink { background: pink; }
.bg-green { background: green; }
.bg-blue { background: blue; }
.bg-yellow { background: yellow; }
.bg-green { background: green; }
.bg-orange { background: orange; }
.bg-skyblue { background: skyblue; }
.bg-redlight { background: rgba(255, 0, 0, 0.2); }
.bg-grey { background: #f6f6f5; }
.dark-grey { background: #2D2E2C; }
.bg-transferent { background: transparent; }
Action
Background colour template.
Round corner element
Element type
Class
Classes
.rcorner-5 { border-radius: 5px; }
.rcorner-10 { border-radius: 10px; }
.rcorner-20 { border-radius: 20px; }
.circle { border-radius: 50%; }
Action
Round corner template.
Width element
Element type
Class
Classes
.bx-col-1 { width: 100%; }
.bx-col-2 { width: 50%; }
.bx-col-3 { width: 33.33%; }
.bx-col-4 { width: 25%; }
.bx-col-3-7 { width: 30%; }
.bx-col-7-3 { width: 70%; }
.bx-col-4-6 { width: 40%; }
.bx-col-6-4 { width: 60%; }
Action
Width element template.
Width element (Mobile max-width: 767px)
Element type
Class
Classes
.m-col-1 { width: 100%; }
.m-col-2 { width: 50%; }
.m-col-3 { width: 33.33%; }
.m-col-4 { width: 25%; }
Action
Width element template specific for Mobile (max-width: 767px).
Text style
Element type
Class
Classes
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
Action
Text style template.
Element Position (item-{{..subfix..}})
Element type
Class
Classes
.item-absolute { position: absolute; }
.item-relative { position: relative; }
.item-fixed { position: fixed; }
.item-block { display: block; }
.item-inline-block { display: inline-block; }
Action
Elelement positioning.
Selected radio box
<div class="select-item">
<input type="checkbox" id="inp_cancel_request_0">
<label for="inp_cancel_request_0"></label>
<span class="chk-box"></span>
</div>


.select-item input[type=checkbox] { box-sizing: border-box; padding: 0; display:none;} 
.select-item label span.chk-box{width: 18px;height: 18px;border-radius: 50%;-webkit-transition: all 0.25s linear;text-transform: uppercase;border: 2px solid #90918D;color: #90918D;text-align: center;display: inline-block;cursor: pointer;}
.select-item input[type=checkbox]:checked ~ label span.chk-box{position: relative;width: 20px;height: 20px;background: url(../images/icon-radio-red-selected.svg) center center no-repeat;border: 1px solid #EE3536;-webkit-transition: none;}