LGSS frontend toolkit

A collection of Sass and JavaScript files for using as part of your application's frontend.

This project is not tied to a specific language and is designed to be used as a dependency in as many different languages as needed.

There's a Gemfile and a package.json in this directory, but they are only for running tests and are not an indication that this project prefers Ruby or Node.js.

Installing

Node.js

lgss-frontend-toolkit is an NPM package that can be installed or included in your package.json.

If you are using a build tool that depends on Libsass then you may need to upgrade to a more recent version to use the grid helpers. Minimal compatible versions include node-sass 1.0.0, grunt-sass 0.16.0, gulp-sass 1.2.0 and libsass 3.0.0.

Running tests

Tests for this project use Jasmine for the JavaScript and Ruby's scss and scss-lint to check the stylesheets.

The requirements are Node.js 0.8 or higher and PhantomJS, and Ruby:

bundle install
npm install
npm test

Standard JavaScript

lgss-frontend-toolkit uses standardjs, an opinionated JavaScript linter. All JavaScript files follow its conventions. Read more

Using the local test runner

The test suite can be run by opening the ./spec/support/LocalTestRunner.html file in a browser for a more detailed trace of errors.

The files for unit tests and any supporting JavaScript should be added to ./spec/manifest.js file.

Usage

At the top of a Sass file in your project you should use an @import rule to include the file for the mixins you require, eg if you want the conditionals and typography mixins you should add:

@import '_conditionals';
@import '_typography';

You may need to include the relative path to the toolkit if it is installed as a submodule:

@import '../toolkit/_conditionals';

If you are compiling Sass from the command-line tool, here are some options we recommend.

In development:

sass --style expanded --line-numbers --load-path [path to]/govuk_frontend_toolkit/stylesheets input.scss output.css

In production:

sass --style compressed --load-path [path to]/govuk_frontend_toolkit/stylesheets input.scss output.css

Documentation

• Mixin-sets
  • Grid layout
  • Conditionals
  • Colours
  • Typography
  • CSS3
  • Buttons
  • Phase banner
  • Phase tags
• JavaScript
  • Modules
  • Media player
  • Multivariate test framework
  • Primary links
  • Stick at top when scrolling
  • Selection buttons
  • Shim links with button role
  • Show/Hide content
• Analytics
  • Create an analytics tracker
  • Virtual pageviews
  • Custom events
  • Custom dimensions and custom variables
  • Print tracking
  • Error tracking
  • External link tracking
  • Download link tracking
  • Mailto link tracking

Licence

Released under the MIT Licence, a copy of which can be found in the file LICENCE.