ACT Government single public face (SPF) UI Kit 1.0 is an iterative style guide that contains self-contained interface designs and related code. The purpose of the SPF UI Kit 1.0 is to create a consistent style and core functionality across the collective ACT Government online presence. The UI kit itself is structured using atomic design approach and is built in the open source Pattern Lab platform.
Location of ACT Gov Demo Sites
Atomic design
Atomic design is a design methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are: Atoms, Molecules, Organisms, Templates and Pages
Pattern Lab
Pattern Lab is a tool and language agnostic platform used to document interface components and digital style. It facilitates the atomic design approach by documenting interface component structures along side usable code and guiding annotations.
SPF UI 1.0 is the starting point for reinvigorating the ACT Government online presence. The UI kit provides core components that can be used to redesign existing sites. These components are deconstructed into smaller parts allowing them to be used to build other more advanced components when needed. Using these smaller building blocks to create new components will ensure that the ACT Government online style is maintained across different interface elements and sites.
SPF UI Kit also integrates the existing GOVAU UI Kit 2.0. The two kits have been integrated so that further developments from the Digital Transformation Agency (DTA) and other government agencies can be leveraged as part of ACT Government's SPF Kit. This has been achieved by maintaining theme and class naming conventions established in GOVAU UI kit. Updated and new components from GOVAU can be brought into Pattern Lab with minor modifications.
Image bellow shows how atomic approach is being applied using Pattern Lab in SPF UI Kit
What is a pattern?
A pattern is a small, self-contained and reusable UI components. These patterns need to be reusable both from a design and implementation perspective. For this reason, patterns should remain agnostic both in content and code. This is the reason that place holder images and content have been used. The intention is that content will be added when implementing the patterns whilst building a website. If the new component is required for a website, it should be built using the existing ACT Gov SPF patterns. If the new component is valuable and reusable across other ACT Gov sites then it should be added to Pattern Lab so others can utilise it on future projects.
SPF UI Kit 1.0 technology stack
SASS
Syntactically Awesome StyleSheets, is an extension language for CSS. With SASS, you can write clean, sustainable CSS code and solve the common repetition and maintenance challenges present in traditional CSS.
Grunt
Grunt is a task-based command line build tool for JavaScript projects. It is used to compile, build and dynamically update the Pattern Lab instance
Bootstrap
Bootstrap underlying grid system is used in both GOVAU and SPF UI Kit.
Font Awesome/Fort Awesome
Used throughout other ACT Government print and brand resources. Font and fort awesome is a scalable vector icon library and have been used for all UI kit iconography needs.
NPM
npm is the package manager for JavaScript and the world’s largest software registry. Use npm to install, share, and distribute code and manage dependencies in your projects.
Pancake ( ˘▽˘)っ旦
Pancake is a tool to make working with npm on the front end easy and sweet. Pancake manages individually versioned independent modules avoiding interdependancies and helping maintain a flat structure. For more info check out the github source.