Helpers
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; |
Display
Allow you to control the display of content.
| CSS Class | Description |
|---|---|
| .show | Add the property display: block | .hide | Add the property display: none |
Text
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 |
Shadow
Add the default shadow style.
| CSS Class | Description |
|---|---|
| .b-shadow | Add the defualt box shadow property to specific element |