It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

If you need to modify or add element globally, use the /helpers folfer. IF NOT, overwrite styles using the stylesheet of each page.

Margin and Paddings

There are 16 size templates for margin and paddings (e.g., mt-6).

CSS Class Description
.mt-{*} Margin top.
.mt-10 for instance, indicate margin-top:10px;
.mb-{*} Margin bottom.
.mb-10 for instance, indicate margin-bottom:10px;
.ms-{*} Margin Start or Margin left.
.ms-10 for instance, indicate margin-left:10px;
.me-{*} Margin End or Margin right.
.me-10 for instance, indicate margin-right:10px;
.pt-{*} Padding top.
.pt-10 for instance, indicate padding-top:10px;
.pb-{*} Padding bottom.
.pb-10 for instance, indicate padding-bottom:10px;
.ps-{*} Padding Start or Padding left.
.ps-10 for instance, indicate padding-left:10px;
.pe-{*} Padding End or Padding right.
.pe-10 for instance, indicate padding-right:10px;


Allow you to control the display of content.

CSS Class Description
.show Add the property display: block
.hide Add the property display: none


Allow you to add style over text elements.

CSS Class Description
.text-center Add the property text-align: center
.text-right Add the property text-align: right
.color--main-blue Add the property color: $main--blue-color
.text-bold Add the property font-weight: 600


Add the default shadow style.

CSS Class Description
.b-shadow Add the defualt box shadow property to specific element