How-Tos

Download code

There are two ways to download the source code:

• Cloning using GIT: Clone from the repository
• Download zip file repository: Clone from the repository downloads

Install

Installing required packages to run SPF UIkit can be done using NPM. Simply:

• After downloaing/extracting the source code, open terminal and navigate to the root directory.
• run npm install

Start/Build

Both GRUNT and NPM can be used to run and build SPF UI Kit.

• Navigate the root directory.
• GRUNT
  • To start UI Kit and watch the changes run: grunt patternlab:serve
  • To build run: grunt patternlab:build
• NPM
  • To start UI Kit and watch the changes run: npm run patternlab:serve
  • To build run: npm run patternlab:build

Themes

In SPF UI Kit, multiple themes can be defined and used. Themes might be different in color schemes, or default padding and margins. This can be done by defining different values for SASS global variables that are uses in SPF UI Kit.

When running or building only one theme can be selected. Theme name can be passed as a parameter in command. As example "actgov" theme can be selected as following:

• Navigate the root directory.
• GRUNT
  • To start UI Kit and watch the changes run: grunt patternlab:serve --theme=actgov
  • To build run: grunt patternlab:build --theme=actgov
• NPM
  • To start UI Kit and watch the changes run: npm run patternlab:serve -- --theme=actgov
  • To build run: npm run patternlab:build -- --theme=actgov

Adding a theme

Theme files are located in theme folder (More information on file structure) Follow these steps to make a new theme:

1. Make a folder named as your new theme.
2. Copy the following files from actgov folder to your new theme's folder:
   • _colors.scss
   • _cariables.scss
3. Make required changes to the new theme files.
4. To start/build with new theme use parameter "theme=themename" when runnung the command.

Use SPF UI Kit in projects

After build command runs, all needs to be done is to copy the files in dist folder and import them to the project. Dist folder contains the followings.

• SPF style files
  • style.css : SPF style file. Includes Govau UI Kit styles so there is no need to import it separately.
  • style.min.css and style.css.map :Minified version of style.css and related source map file
• SPF JS files
  • spf.js : SPF JS file. required to be used if SPF JS components are being used in project
  • spf.min.js and spf.min.js.map :Minified version of spf.css and related source map file
• Govau JS files
  • uikit.js : Govau UI Kit's JS file. required to be used if Govau JS components are being used in project
  • uikit.min.js and uikit.min.js.map :Minified version of uikit.css and related source map file