Body classnames
Note: In HTML to make SPF UI Kit works, all SPF elements must be wrapped in an element with the following classnames:
- "uikit-body" for Govau UI Kit components, and also because SPF UI Kit is built based on Govau UI Kit
- "spf-body"
Grid system
SPF's grid system is taken from Govau UI Kit which is similar to Bootstrap's 12 column grid system. To apply the grid system"
- wrap the section of the page that uses the grid system with an element with classname "uikit-grid"
- Assign Bootstrap grid classnames to children elements
- Example: SPF's grid system
Styles glossary
The following table is a glossary of all SPF UI Kit classnames that are not covered in patterns.
| Class name | Description |
|---|---|
| spf-body | Main SPF UI Kit classname. All SPF elements must be wrapped by an element with this classname |
| spf-page-content | Using for content elements in page, works well in combination with sidebar class names. Example: content part in Template 03 |
| spf-page-content--right | An extention of spf-page-content when the page has a sidebar on the left and content is on the right side of the page. Example: Template 03 |
| spf-page-content--left | An extention of spf-page-content when the page has a sidebar on right and content is on the left side of the page. Example: Template 04 |
| spf-page-sidebar--left | Used for a sidebar next to content element, when sidebar is on the left. Example: Template 03 |
| spf-page-sidebar--right | Used for a sidebar next to content element, when sidebar is on the right. Example: Template 04 |