Getting started

Our web framework is built on Sass.

What's included

There are two distributions available:

Compiled distribution - webframework only

Download latest release from here

This distribution is available as a zip file. It contains precompiled CSS and font assets that can be incorporated directly into a site and used as indicated in the style guide. This is a minimal distribution intended to be used "as is" with no alteration or extension.

Deployable distribution

Download latest release from here

This is an uncompiled, source distribution that is intended to be customised and extended. It contains unminified Sass files, font and image assets. Before this version of the webframework can be incorporated into a project it will need to be built.

Pre-requisites for a build

• Installations of Git, Node.js and grunt-cli
• Git can be obtained for a number of platforms from https://git-scm.com/downloads
• Node JS can be obtained from https://nodejs.org/download/- this download includes the required NPM package manager
• Once Node is installed grunt-cli can be installed globally (using NPM) with npm install -g grunt-cli
• Unrestricted access to the internet

Running a build

• Change directory to the Build directory
• Run npm install - this only needs to be done for a clean copy of the webframework
• Run grunt build - this will create a dist folder under /webframework containing minified, compiled assets that can be included in a site.

Extending the webframework

Extension of the webframework is primarily expected to be through styling. The src/scss folder contains the base scss files. To extend a style (for example adding another type of notification):

• Create a new scss file (do not edit ony of the base files included with the webframework as this will jeopardise future updates)
• Name the new file similarly to the file you are extending (e.g. _components.<yourproductname>.notifications.scss)
• Add a duplicate block for the style you wish to extend
• Add your customisations to the block
  
  _components.<yourproductname>.notifications.scss // ------------------------------------ // #EXTENDED NOTIFICATIONS // styles // ------------------------------------ .c-notification { &--information { background: #008080; border: 0.075rem solid #4682B4; } }
• This new partial file will need to be included in the project so you should duplicate the main.scss file (call it main.<yourproductname>.scss perhaps) and add any new extension files to it as @imports
• Use this new main file as the root for the sass pre-compile - you will need to edit the sass grunt task in Build/gruntfile.js to specify this
  
  sass: { options: { trace: false }, dist: { files: { '<%= path %>/webframework/src/css/styles.css': '<%= path %>/webframework/src/scss/main.<yourproductname>.scss' } } },
• To see any customisations in action you can edit one of the example files from the examples folder or create your own
• The customisations can then be built using the instructions above