The MyGov Assets repository provides static web assets for websites and web applications for the Scottish Government and other Scottish public sector bodies.
More detailed documentation and usage notes for individual pieces of MyGov Assets can be found in the
Source Sass files can be found in the
scss folder along with a sample “main” SCSS file,
mygov-assets.scss, that you can use as a base for your own site’s CSS.
To download dependencies required to build this project:
npm install. This will install dependencies into the
To build CSS files from the Sass sources:
mygov-assets.scss using a Sass compiler.
We have provided a Compass config file if Compass is your tool of choice. Run
compass compile from the
mygov-assets directory to compile
Anatomy of MyGov Assets
mygov-assets.scss is broken up into a few important pieces: grid, core, form elements, components, and trumps.
MyGov currently uses CSSWizardry Grids for its grid system. Its syntax is slightly fiddly since you need to eliminate whitespace between grid elements. See https://github.com/csswizardry/csswizardry-grids on GitHub for implementation notes.
Regardless of the grid system you use, in the vast majority of cases you should use additional elements for your grid structure. This keeps your pages’ layout and content separate, helping flexibility and maintainability.
A trivial example
You do not want this:
<div class="grid"><!-- --><h1 class="grid__item tablet--nine-twelfths">A title</h1><!-- --><form class="grid__item tablet--three-twelfths"> </form><!-- --></div>
You do want this:
<div class="grid"><!-- --><div class="grid__item tablet--nine-twelfths"> <h1>A title</h1> </div><!-- --><div class="grid__item tablet--three-twelfths"> <form> </form> </div><!-- --></div>
In the second example the content (the
form and the
h1) is not in any way tied to the grid and can be freely moved.
MyGov Assets core contains styles that are required for correct display of all of the MyGov Assets components. Everything else in MyGov Assets is optional depending on your project’s requirements, but you should always include
MyGov Assets form elements contains styling for form-related elements. You should include
_form-elements.scss if your project uses forms in any way.
MyGov Assets components are discrete pieces of SCSS required for the display of particular components of a site, such as styling for multi-page navigation or search results. Include all of them or pick and choose the ones that you need.
MyGov Assets trumps provide overrides for styles defined in component files where a more specific implementation of a component is desired. They typically extend or augment an existing component.