food.gov.uk style guide

About

This style guide is intended to assist front-end developers and designers who work on food.gov.uk in the future. It aims to provide introductory information around the three following areas:

  • The front-end structure and tooling used throughout the site
  • The coding style and approaches to development
  • Visual examples of the components and colours used

Many of the components have been built in isolation, with CSS and JS tightly coupled with the HTML. Where this is the case, you can see the corresponding CSS and JS for that component by clicking on the respective tab. Where this is not the case, try inspecting the element in devtools to see where any styles have cascaded from.

This style guide is best viewed at desktop resolutions (>1000px). Since the actual site is served by a Drupal backend, and this style guide is a static html file, some component functionalities (such as form submissions, links etc) are restricted.

Developer Workflow

Requirements

FSA Theme uses ES6 features, so it is recommended to have a recent version of Node.js installed globally (v5.0 minimum required, for package-lock.json support). Node.js is the only global requirement as this project uses Webpack in lieu of task runners.

Installation

To get the started with theming, complete the following steps:

  1. Install Node.js

  2. Install project dependencies by running npm install

Workflow summary

When developing, run npm run watch to automatically compile assets.

Build for production before committing any changes, with npm run build. This will create a dist folder, into which the required assets will be created. In addition to assets for the site itself, the style guide will also be built (as a static html file) at dist/styleguide/index.html.

JavaScript development

JavaScript Style Guide

This theme uses the 'Standard' JavaScript code style as linked above. It is recommended to use an appropriate linting tool to ensure this is followed, such as the 'JavaScript Standard Style' VS Code extension, or appropriate ESLint rule.

The file index.js is the entry point for all the assests used by this theme. This file contains require function for style and image files. This function should not be removed ever.

NPM dependencies and theme related modular JavaScript files can be imported at the beginning of every JavaScript file with following line of code:

import defaultMember from 'module-name'

This project uses Babel to transpile modern JavaScript into a form that can be used across browsers.

ES6 import syntax. To export a JavaScript module use ES6 export syntax such as module.exports = myFunction.

There are number of other really useful ES6 features that can be also used, like:

CSS development

This theme uses number of postCSS plugins with postCSS-cssnext plugin collection. Cssnext allows developers to use the latest CSS syntax today. Active plugins of the cssnext collection can be managed inside of a postcss.config.js file and available features can be browsed on GitHub.

All the css files are extracted and bundled into one file with Webpack extract-text-webpack-plugin.

Units

The correct unit should be chosen depending on the context. _Em_ is great for responsive values such as paddings and margins while _px_ is good choice for fixed sized icons.

CSS Custom Properties

Related PostCSS plugin: postcss-custom-properties

CSS custom properties can be used in this theme. To support older IE browsers CSS custom properties should only be used inside of a :root selector. Cssnext has been configurated to preserve custom property values.

CSS Custom properties are defined at the beginning of the base.css file with following line of code:

:root {
  --font-size-base: 112.5%;
}

CSS Custom properties can be reused throughout the CSS files using the var() function.

html {
  font-size: var(--font-size-base);
}

Media Queries

Related PostCSS plugin: postcss-custom-media

As this theme uses mobile first approach all media queries should use min-width.

Custom media queries are defined at the beginning of the base.css file with following line of code:

@custom-media --breakpoint-sm (min-width: 50em);

Custom variables can be used inside of a css file like so:

@media (--breakpoint-sm) {
  width: 100%;
}

Mixins

Related PostCSS plugin: postcss-custom-media

Cssnext is providing a PostCSS-apply plugin but it doesn't support arguments. That's why PostCSS-mixin plugin is also used in this theme.

PostCSS Mixin is currently only used for defining one mixin:

@define-mixin responsive-declaration $property, $valueMin, $valueMax {
  $(property): $valueMin;

  @media (--breakpoint-xs) {
    $(property): calc($valueMin + (($valueMax - $valueMin) / 4) * 1);
  }

  @media (--breakpoint-sm) {
    $(property): calc($valueMin + (($valueMax - $valueMin) / 4) * 2);
  }

  @media (--breakpoint-md) {
    $(property): calc($valueMin + (($valueMax - $valueMin) / 4) * 3);
  }

  @media (--breakpoint-lg) {
    $(property): calc($valueMin + (($valueMax - $valueMin) / 4) * 4);
  }
}

This responsive-declaration mixin is used throughout the CSS files to create both mobile and desktop styles with one line of code. This is great for declaring paddings, margins, font sizes etc.

The mixin takes three arguments: Property name, Minimum value and Maximum value. It can be used like this:

h1 {
  @mixin responsive-declaration font-size, 2.2em, 3.333em;
}

Selectors and nesting

Related PostCSS plugins: postcss-nesting and postcss-custom-selectors

Custom selectors can be declared like this:

@custom-selector :--not-js html:not(.js);

And used as a selector like this:

:--not-js .toggle-content {
  display: inherit;
}

Selectors can also be nested:

ul {
  margin-top: 0.5em;

  & li:not(:last-child) {
    margin-bottom: 1em;
  }
}

CSS Naming conventions

This theme uses BEM as much as possible.

Bitmap and vector assets

Webpack loaders check for bitmap and vector images separately. Bitmap images are compressed and copied to dist/img/ directory. All the vector images on the other hand are turned into one sprite (dist/sprite.svg). Specific vector images can be referenced like this:

<div class="svg">
  <svg><use xlink:href="/themes/custom/fsa/dist/sprite.svg#name-of-the-svg-file"></use></svg>
</div>

To polyfill browsers that don't support <use> tags, every svg reference will be turned into an inline svg by the browser with the svg4everybody JavaScript plugin.

Remember to restart varnish with sudo systemctl restart varnish after generating a new sprite, in order to rebuild the cache.

CSS Custom Properties

These are custom properties, which are defined in the file `custom-property.css`. They can be used with var() function. There are also some examples of this function being used in the code below.

/* CSS Custom properties
Using postcss-custom-properties
Plugin documentation:
  https://github.com/postcss/postcss-custom-properties */

:root {
  --fsa-primary_dark-green: #006F51;
  --fsa-primary_mid-green: #6CB33F;
  --fsa-primary_light-green: #A9C47F;
  --fsa-primary_dark-grey: #53565A;
  --fsa-primary_mid-grey: #97999B;
  --fsa-primary_light-grey: #D9D9D6;
  --fsa-secondary_mid-red: #E31837;
  --fsa-secondary_orange: #F15D22;
  --fsa-secondary_mid-yellow: #FDB913;
  --fsa-secondary_mid-purple: #49176D;
  --fsa-secondary_light-purple: #9F218B;
  --fsa-secondary_mid-blue: #007FB2;
  --fsa-tertiary_dark-red: #B04A5A;
  --fsa-tertiary_light-red: #EF3340;
  --fsa-tertiary_light-yellow: #F1C400;
  --fsa-tertiary_teal: #00B2A9;
  --fsa-tertiary_light-blue: #8DC8E8;
  --fsa-tertiary_dark-purple: #51284F;
  /* End of FSA Branding Guidelines colours */
  --color-black: #000;
  --color-white: #fff;
  --color-dark-gray: #2c3a40;
  --color-gray: #70787A;
  --color-light-gray: #dee2e5;
  --color-lighter-gray: #f0f3f5;
  --color-darker-teal: #005e59;
  --color-dark-teal: #007c75;
  --color-teal: #00938c;
  --color-light-teal: #00b2a9;
  --color-dark-purple: #2a0247;
  --color-purple: #49176d;
  --color-light-purple: #5b178c;
  --color-lighter-purple: #8c0178;
  --color-dark-red: #a91f2d;
  --color-red: #e31837;
  --color-siren: #84003c;
  --color-orange: #ffb200;
  --color-yellow: #ffbf47;
  --color-light-yellow: #ffdfa2;
  --color-green: #6cb33d;
  --color-dark-blue: #18262c;
  --color-blue: #007fb2;
  --color-lighter-blue: #fafcfd;

  /* Usage colors */
  --darker-primary-color: var(--color-darker-teal);
  --dark-primary-color: var(--color-dark-teal);
  --primary-color: var(--color-teal);
  --light-primary-color: var(--color-light-teal);
  --dark-secondary-color: var(--color-dark-purple);
  --secondary-color: var(--color-purple);
  --light-secondary-color: var(--color-light-purple);

  /* Typography */
  --font-size-base: 112.5%;
  --font-family-heading: 'Fira Sans', sans-serif;
  --font-family-content: 'Open Sans', sans-serif;

  /* Z-Index */
  --z-under: -1;
  --z-bottom: 1;
  --z-middle: 10;
  --z-top: 20;
  --z-topmost: 30;

  /* Transitions */
  --transition-enter: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  --transition-enter-fast: 0.2s cubic-bezier(0.19, 1, 0.22, 1);

  /* Misc */
  --box-shadow: 0 0 2em 0 color(#000 a(10%));
  --box-shadow-active: 0 1em 3em 0 color(#000 a(10%));
  --max-width: 80em;
  --max-width-medium: 55em;
  --max-width-small: 51em;
  --content-max-width: 47em;

  /* Icons */
  --icon-arrow-right-primary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='26px' height='10px' viewBox='0 0 26 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Earrow green%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='minimal-box-2row' transform='translate%28-320.000000, -245.000000%29' fill='%23007C75'%3E%3Cg id='news'%3E%3Cg id='arrow-teal' transform='translate%28320.000000, 245.000000%29'%3E%3Cpath d='M22.4123574,4.25350761 L0,4.25350761 L0,5.74574019 L22.4133093,5.74574019 L18.3523999,8.95481035 L19.6747928,10 L26,5.00001791 L19.6747928,0 L18.3523999,1.04518965 L22.4123574,4.25350761 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-arrow-right-white: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='26px' height='10px' viewBox='0 0 26 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Earrow green%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='minimal-box-2row' transform='translate%28-320.000000, -245.000000%29' fill='%23fff'%3E%3Cg id='news'%3E%3Cg id='arrow-teal' transform='translate%28320.000000, 245.000000%29'%3E%3Cpath d='M22.4123574,4.25350761 L0,4.25350761 L0,5.74574019 L22.4133093,5.74574019 L18.3523999,8.95481035 L19.6747928,10 L26,5.00001791 L19.6747928,0 L18.3523999,1.04518965 L22.4123574,4.25350761 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-arrow-left-primary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='26px' height='10px' viewBox='0 0 26 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Earrow green%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='arrow-green' transform='translate%2813.000000, 5.000000%29 rotate%28-180.000000%29 translate%28-13.000000, -5.000000%29 ' fill-rule='nonzero' fill='%23007C75'%3E%3Cpolygon id='Shape' points='22.4123574 4.25350761 0 4.25350761 0 5.74574019 22.4133093 5.74574019 18.3523999 8.95481035 19.6747928 10 26 5.00001791 19.6747928 0 18.3523999 1.04518965'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-dropdown-down-primary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='7px' height='4px' viewBox='0 0 7 4' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Enav-arrow%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='FHRS' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='FHRS-content-page-map' transform='translate%28-310.000000, -179.000000%29' fill='%23007c75'%3E%3Cg id='Header'%3E%3Cg id='content-links' transform='translate%2883.000000, 169.000000%29'%3E%3Cg id='Group' transform='translate%2866.000000, 0.000000%29'%3E%3Cpath d='M164.499965,14 C164.374458,14 164.248957,13.9517682 164.152982,13.8555781 L161.144167,10.840018 C160.951944,10.6473643 160.951944,10.3368705 161.144167,10.1444903 C161.33639,9.95183656 161.646189,9.95183656 161.836767,10.1444903 L164.5,12.8136931 L167.163233,10.1444903 C167.355456,9.95183656 167.665255,9.95183656 167.855833,10.1444903 C168.048056,10.3371441 168.048056,10.6476379 167.855833,10.840018 L164.847018,13.8555781 C164.751043,13.9517682 164.625535,14 164.500035,14 L164.499965,14 Z' id='nav-arrow'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-dropdown-top-black: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='7px' height='4px' viewBox='0 0 7 4' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Enav-arrow%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='FHRS' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='FHRS-content-page-map' transform='translate%28-310.000000, -179.000000%29' fill='%23000'%3E%3Cg id='Header'%3E%3Cg id='content-links' transform='translate%2883.000000, 169.000000%29'%3E%3Cg id='Group' transform='translate%2866.000000, 0.000000%29'%3E%3Cpath d='M164.499965,14 C164.374458,14 164.248957,13.9517682 164.152982,13.8555781 L161.144167,10.840018 C160.951944,10.6473643 160.951944,10.3368705 161.144167,10.1444903 C161.33639,9.95183656 161.646189,9.95183656 161.836767,10.1444903 L164.5,12.8136931 L167.163233,10.1444903 C167.355456,9.95183656 167.665255,9.95183656 167.855833,10.1444903 C168.048056,10.3371441 168.048056,10.6476379 167.855833,10.840018 L164.847018,13.8555781 C164.751043,13.9517682 164.625535,14 164.500035,14 L164.499965,14 Z' id='nav-arrow'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-dropdown-down-white: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='7px' height='4px' viewBox='0 0 7 4' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Enav-arrow%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='FHRS' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='FHRS-content-page-map' transform='translate%28-310.000000, -179.000000%29' fill='%23fff'%3E%3Cg id='Header'%3E%3Cg id='content-links' transform='translate%2883.000000, 169.000000%29'%3E%3Cg id='Group' transform='translate%2866.000000, 0.000000%29'%3E%3Cpath d='M164.499965,14 C164.374458,14 164.248957,13.9517682 164.152982,13.8555781 L161.144167,10.840018 C160.951944,10.6473643 160.951944,10.3368705 161.144167,10.1444903 C161.33639,9.95183656 161.646189,9.95183656 161.836767,10.1444903 L164.5,12.8136931 L167.163233,10.1444903 C167.355456,9.95183656 167.665255,9.95183656 167.855833,10.1444903 C168.048056,10.3371441 168.048056,10.6476379 167.855833,10.840018 L164.847018,13.8555781 C164.751043,13.9517682 164.625535,14 164.500035,14 L164.499965,14 Z' id='nav-arrow'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-checkmark-primary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='12px' height='10px' viewBox='0 0 12 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Checkbox-selected' transform='translate%28-4.000000, -5.000000%29' fill='%23FFFFFF'%3E%3Cpolygon id='Page-1' fill='%23007C75' points='14.2341772 5 8.64248101 11.1189694 5.57594937 8.40159604 4 10.335509 7.94936709 13.8264412 8.82278481 14.6 9.62025316 13.7371685 16 6.75530417'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-share-primary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Eshare-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Landing-page-flow' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='HACCP' transform='translate%28-982.000000, -498.000000%29'%3E%3Cg id='Share' transform='translate%28982.000000, 498.000000%29'%3E%3Cg id='share-icon'%3E%3Cpath d='M0,15 C0,6.71572834 6.71572834,0 15,0 C23.2842717,0 30,6.71572834 30,15 C30,23.2842717 23.2842717,30 15,30 C6.71572834,30 0,23.2842717 0,15 Z' id='back' fill='%23007C75'%3E%3C/path%3E%3Cpath d='M18.2548159,17.484631 C17.430907,17.484631 16.6767248,17.8512662 16.1959588,18.4459038 L12.3070063,15.9511546 C12.4213873,15.653378 12.4901943,15.3332589 12.4901943,14.9898818 C12.4901943,14.7377057 12.4446203,14.4864452 12.3758133,14.2575271 L16.3336231,11.7160786 C16.8367163,12.1971729 17.5006748,12.4940338 18.2548571,12.4940338 C19.7650517,12.4940338 21,11.2582425 21,9.74701691 C21,8.23579134 19.7650517,7 18.2548571,7 C16.7446625,7 15.5097142,8.23579134 15.5097142,9.74701691 C15.5097142,10.0215355 15.5552882,10.2737116 15.6240952,10.5249721 L11.6896191,13.0430709 C11.1865259,12.5396343 10.5002402,12.2418577 9.74514289,12.2418577 C8.23494828,12.2418577 7,13.477649 7,14.9888746 C7,16.5001002 8.23494828,17.7358915 9.74514289,17.7358915 C10.4081864,17.7358915 11.0265756,17.4837153 11.5064266,17.0947377 L15.5552836,19.703946 C15.5097096,19.887259 15.5097096,20.0705812 15.5097096,20.2529831 C15.5097096,21.7642087 16.7446579,23 18.2548525,23 C19.7650471,23 20.9999954,21.7642087 20.9999954,20.2529831 C20.9999954,18.7435431 19.764155,17.4844479 18.2548525,17.4844479 L18.2548159,17.484631 Z' id='Page-1' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-print-primary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Eprint-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Landing-page-flow' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='HACCP' transform='translate%28-871.000000, -499.000000%29'%3E%3Cg id='Print' transform='translate%28871.000000, 499.000000%29'%3E%3Cg id='print-icon'%3E%3Ccircle id='Oval' fill='%23007C75' cx='15' cy='15' r='15'%3E%3C/circle%3E%3Cpath d='M20.92,11.96 L8.44,11.96 C7.644992,11.96 7,12.604992 7,13.4 L7,18.68 C7,19.475008 7.644992,20.12 8.44,20.12 L9.4,20.12 L9.4,21.56 C9.4,22.355008 10.044992,23 10.84,23 L18.52,23 C19.315008,23 19.96,22.355008 19.96,21.56 L19.96,20.12 L20.92,20.12 C21.715008,20.12 22.36,19.475008 22.36,18.68 L22.36,13.4 C22.36,12.604992 21.715008,11.96 20.92,11.96 Z M18.04,21.08 L11.32,21.08 L11.32,17.72 L18.04,17.72 L18.04,21.08 Z M19,10.52 L10.36,10.52 L10.36,9.08 C10.36,8.284992 11.004992,7.64 11.8,7.64 L17.56,7.64 C18.355008,7.64 19,8.284992 19,9.08 L19,10.52 Z' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-pdf-primary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Edownload-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Landing-page-flow' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='HACCP' transform='translate%28-680.000000, -499.000000%29'%3E%3Cg id='download' transform='translate%28680.000000, 499.000000%29'%3E%3Cg id='download-icon'%3E%3Ccircle id='Oval' fill='%23007C75' cx='15' cy='15' r='15'%3E%3C/circle%3E%3Cg transform='translate%288.000000, 7.000000%29' fill='%23FFFFFF'%3E%3Cpath d='M12.1832558,5.4832 C12.573693,5.099456 13.2064279,5.099456 13.5975,5.4832 C13.9873023,5.86632 13.9879372,6.488832 13.5975,6.872576 L7.7070814,12.662656 C7.31727907,13.0464 6.6839093,13.045776 6.29347209,12.662656 C5.90303488,12.278912 5.90303488,11.657024 6.29347209,11.27328 L12.1832558,5.4832 Z' id='Fill-1'%3E%3C/path%3E%3Cpath d='M0.402532558,6.87248 C0.0120953488,6.488736 0.0120953488,5.866848 0.402532558,5.48248 C0.792969767,5.098736 1.42570465,5.098736 1.81614186,5.48248 L7.70656047,11.27192 C8.09699767,11.655664 8.09763256,12.277552 7.70656047,12.66192 C7.31612326,13.045664 6.68338837,13.045664 6.29231628,12.66192 L0.402532558,6.87248 Z' id='Fill-2'%3E%3C/path%3E%3Cpath d='M12.7460233,14.03504 C13.2986163,14.03504 13.7456558,14.4744163 13.7456558,15.0175363 C13.7456558,15.5594083 13.2979814,16.0000323 12.7460233,16.0000323 L1.25332558,16.0000323 C0.701367442,16.0000323 0.254327419,15.5600323 0.254327419,15.0175363 C0.254327419,14.4750403 0.702002326,14.03504 1.25332558,14.03504 L12.7460233,14.03504 Z' id='Fill-3'%3E%3C/path%3E%3Cpath d='M6.00030233,0.982496 C6.00030233,0.439376 6.44734186,0 6.99993488,0 C7.55125814,0 7.99956744,0.44 7.99956744,0.982496 L7.99956744,11.967456 C7.99956744,12.509952 7.55189302,12.949952 6.99993488,12.949952 C6.44797674,12.949952 6.00030233,12.509952 6.00030233,11.967456 L6.00030233,0.982496 Z' id='Fill-4'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-search-primary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Esearch-icon-header%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Header-Contact-active' transform='translate%28-1327.000000, -83.000000%29' fill='%23007c75'%3E%3Cg id='Header'%3E%3Cg id='Search' transform='translate%28900.000000, 69.000000%29'%3E%3Cg id='search-icon' transform='translate%28410.000000, 0.000000%29'%3E%3Cpath d='M24.874877,27.4997891 C21.7676755,27.4997891 19.2499648,24.9820784 19.2499648,21.874877 C19.2499648,18.7676755 21.7676755,16.2499648 24.874877,16.2499648 C27.9820784,16.2499648 30.4997891,18.7676755 30.4997891,21.874877 C30.4997891,24.9820784 27.9820784,27.4997891 24.874877,27.4997891 M34.6700989,30.0793738 L31.1759035,26.5851784 C32.1602631,25.2700739 32.7497539,23.6433493 32.7497539,21.874877 C32.7497539,17.5256949 29.224059,14 24.874877,14 C20.5256949,14 17,17.5256949 17,21.874877 C17,26.224059 20.5256949,29.7497539 24.874877,29.7497539 C26.6433493,29.7497539 28.2711989,29.1602631 29.5851784,28.1759035 L33.0793738,31.6700989 C33.5192419,32.109967 34.2302308,32.109967 34.6700989,31.6700989 C35.109967,31.2302308 35.109967,30.5192419 34.6700989,30.0793738' id='search-icon-header'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-search-white: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Esearch-icon-header%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Header-Contact-active' transform='translate%28-1327.000000, -83.000000%29' fill='%23FFFFFF'%3E%3Cg id='Header'%3E%3Cg id='Search' transform='translate%28900.000000, 69.000000%29'%3E%3Cg id='search-icon' transform='translate%28410.000000, 0.000000%29'%3E%3Cpath d='M24.874877,27.4997891 C21.7676755,27.4997891 19.2499648,24.9820784 19.2499648,21.874877 C19.2499648,18.7676755 21.7676755,16.2499648 24.874877,16.2499648 C27.9820784,16.2499648 30.4997891,18.7676755 30.4997891,21.874877 C30.4997891,24.9820784 27.9820784,27.4997891 24.874877,27.4997891 M34.6700989,30.0793738 L31.1759035,26.5851784 C32.1602631,25.2700739 32.7497539,23.6433493 32.7497539,21.874877 C32.7497539,17.5256949 29.224059,14 24.874877,14 C20.5256949,14 17,17.5256949 17,21.874877 C17,26.224059 20.5256949,29.7497539 24.874877,29.7497539 C26.6433493,29.7497539 28.2711989,29.1602631 29.5851784,28.1759035 L33.0793738,31.6700989 C33.5192419,32.109967 34.2302308,32.109967 34.6700989,31.6700989 C35.109967,31.2302308 35.109967,30.5192419 34.6700989,30.0793738' id='search-icon-header'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-search-gray: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Esearch-icon-header%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Header-Contact-active' transform='translate%28-1327.000000, -83.000000%29' fill='%23848B8E'%3E%3Cg id='Header'%3E%3Cg id='Search' transform='translate%28900.000000, 69.000000%29'%3E%3Cg id='search-icon' transform='translate%28410.000000, 0.000000%29'%3E%3Cpath d='M24.874877,27.4997891 C21.7676755,27.4997891 19.2499648,24.9820784 19.2499648,21.874877 C19.2499648,18.7676755 21.7676755,16.2499648 24.874877,16.2499648 C27.9820784,16.2499648 30.4997891,18.7676755 30.4997891,21.874877 C30.4997891,24.9820784 27.9820784,27.4997891 24.874877,27.4997891 M34.6700989,30.0793738 L31.1759035,26.5851784 C32.1602631,25.2700739 32.7497539,23.6433493 32.7497539,21.874877 C32.7497539,17.5256949 29.224059,14 24.874877,14 C20.5256949,14 17,17.5256949 17,21.874877 C17,26.224059 20.5256949,29.7497539 24.874877,29.7497539 C26.6433493,29.7497539 28.2711989,29.1602631 29.5851784,28.1759035 L33.0793738,31.6700989 C33.5192419,32.109967 34.2302308,32.109967 34.6700989,31.6700989 C35.109967,31.2302308 35.109967,30.5192419 34.6700989,30.0793738' id='search-icon-header'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-home-white: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Ehome-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Navigation' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Header-1440-open' transform='translate%28-80.000000, -161.000000%29' fill='%23FFFFFF'%3E%3Cg id='content-links' transform='translate%280.000000, 140.000000%29'%3E%3Cpath d='M89,21 L80,27.5853659 L80,39 L86.075,39 L86.075,34.3902439 C86.075,32.8090756 87.3793025,31.5365854 89,31.5365854 C90.6206975,31.5365854 91.925,32.8090756 91.925,34.3902439 L91.925,39 L98,39 L98,27.5853659 L89,21 Z' id='home-icon'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-gear-primary: url("data:image/svg+xml,%3Csvg id='289876db-f877-4184-9dc1-5abc47a6a77c' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Emanage-icon%3C/title%3E%3Cpath fill='%23007c75' d='M12,17.83A5.83,5.83,0,1,1,17.83,12,5.83,5.83,0,0,1,12,17.83ZM24,14V10a.65.65,0,0,0-.65-.65H21.63a10,10,0,0,0-.93-2.26l1.21-1.21a.65.65,0,0,0,0-.93L19.06,2.09a.65.65,0,0,0-.93,0L16.93,3.3a9.89,9.89,0,0,0-2.26-.93V.65A.65.65,0,0,0,14,0H10a.65.65,0,0,0-.65.65V2.37a10,10,0,0,0-2.26.93L5.86,2.09a.65.65,0,0,0-.93,0L2.09,4.94a.65.65,0,0,0,0,.93L3.3,7.08a9.89,9.89,0,0,0-.93,2.26H.65A.65.65,0,0,0,0,10v4a.65.65,0,0,0,.65.66H2.37a10,10,0,0,0,.93,2.26L2.09,18.14a.65.65,0,0,0,0,.93l2.85,2.85a.65.65,0,0,0,.93,0L7.07,20.7a9.89,9.89,0,0,0,2.26.93v1.72A.66.66,0,0,0,10,24h4a.65.65,0,0,0,.66-.65V21.63a10,10,0,0,0,2.26-.93l1.21,1.21a.65.65,0,0,0,.93,0l2.85-2.85a.65.65,0,0,0,0-.93L20.7,16.93a9.89,9.89,0,0,0,.93-2.26h1.72A.65.65,0,0,0,24,14Z' transform='translate%280 0%29'/%3E%3C/svg%3E%0A");
  --icon-gear-white: url("data:image/svg+xml,%3Csvg id='289876db-f877-4184-9dc1-5abc47a6a77c' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Emanage-icon%3C/title%3E%3Cpath fill='%23ffffff' d='M12,17.83A5.83,5.83,0,1,1,17.83,12,5.83,5.83,0,0,1,12,17.83ZM24,14V10a.65.65,0,0,0-.65-.65H21.63a10,10,0,0,0-.93-2.26l1.21-1.21a.65.65,0,0,0,0-.93L19.06,2.09a.65.65,0,0,0-.93,0L16.93,3.3a9.89,9.89,0,0,0-2.26-.93V.65A.65.65,0,0,0,14,0H10a.65.65,0,0,0-.65.65V2.37a10,10,0,0,0-2.26.93L5.86,2.09a.65.65,0,0,0-.93,0L2.09,4.94a.65.65,0,0,0,0,.93L3.3,7.08a9.89,9.89,0,0,0-.93,2.26H.65A.65.65,0,0,0,0,10v4a.65.65,0,0,0,.65.66H2.37a10,10,0,0,0,.93,2.26L2.09,18.14a.65.65,0,0,0,0,.93l2.85,2.85a.65.65,0,0,0,.93,0L7.07,20.7a9.89,9.89,0,0,0,2.26.93v1.72A.66.66,0,0,0,10,24h4a.65.65,0,0,0,.66-.65V21.63a10,10,0,0,0,2.26-.93l1.21,1.21a.65.65,0,0,0,.93,0l2.85-2.85a.65.65,0,0,0,0-.93L20.7,16.93a9.89,9.89,0,0,0,.93-2.26h1.72A.65.65,0,0,0,24,14Z' transform='translate%280 0%29'/%3E%3C/svg%3E%0A");
  --icon-external-link-white: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='12px' height='12px' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 %2845422%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Eexternal-link-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='external-link-icon' fill='%23007C75'%3E%3Cg%3E%3Cpolygon id='Fill-1' points='0 2.0001 0 12.0001 10 12.0001 10 6.0001 9 6.0001 9 11.0001 1 11.0001 1 3.0001 6 3.0001 6 2.0001'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' points='7.0002 0.0003 7.0002 1.0003 10.2932 1.0003 3.5002 7.7933 4.2062 8.5003 11.0002 1.7063 11.0002 4.9993 11.9992 4.9993 11.9992 0.0003'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

Colours

The colours used throughout this project are based on the FSA Brand Guidelines. Any further modifications to this site should consult this document and/or the FSA design team. Below, colours from the FSA Brand Guidelines are shown. These are all present in the `custom-property.css` file, along with other colours used throughout the site.

--fsa-primary_dark-green

#006F51

--fsa-primary_mid-green

#6CB33F

--fsa-primary_light-green

#A9C47F

--fsa-primary_dark-grey

#53565A

--fsa-primary_mid-grey

#97999B

--fsa-primary_light-grey

#D9D9D6

--fsa-secondary_mid-red

#E31837

--fsa-secondary_orange

#F15D22

--fsa-secondary_mid-yellow

#FDB913

--fsa-secondary_mid-purple

#49176D

--fsa-secondary_light-purple

#9F218B

--fsa-secondary_mid-blue

#007FB2

--fsa-tertiary_dark-red

#B04A5A

--fsa-tertiary_light-red

#EF3340

--fsa-tertiary_light-yellow

#F1C400

--fsa-tertiary_teal

#00B2A9

--fsa-tertiary_light-blue

#8DC8E8

--fsa-tertiary_dark-purple

#51284F

Typography

Here are some examples of the typography used throughout the site. The font family is Fira Sans for headings and Open Sans for content. Font styles are set with mixins and custom properties as shown above, and are overridden with more specific styles where appropriate.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

This is standard text within a paragraph

This is a link

This is strong text

This text has added emphasis

  • lists
  • look
  • like
  • this

Tables look like this.
Product code 7855462
Pack size 12x100g
Best before All dates

'This is an example of a quotation. You'll often see it below a photograph of the person being quoted - for example, it's used extensively on the "people who protect your plate" page.'

This grey box is used for additional important information. There are several variations of this, such as information specific to different regions. Examples of these are below.
Regional variation: England
Regional variation: Wales
Regional variation: Northern Ireland
Regional variation: Multiple regions (e.g. England and Wales)

Components

Breadcrumb

Button

Contact-links

Feedback

Is this page useful?

Footer

Form

Report suspected food poisoning

Step 2 of 5
Please tell us what you ate before falling ill.
Have you visited your GP?

Header

Hero

Home
About us

About us

Our job is to use our expertise and influence so that people can trust that the food they buy and eat is safe and honest.

Infobox

My subscriptions

Allergy alerts

  • Fish
  • Milk
  • Sesame

News

  • Northern Ireland news
  • Science news
  • Wales news

Consultations

  • Help shape our policies
  • Rapidly developing policies

Landing-links

Are you looking for specific business guidance?

Farming and animal feed
Imports and exports
Fish and shellfish
Meat and slaughterhouses
Wine

Landing-promo

Eating out?

Food hygiene ratings help you choose where to eat out or shop for food by telling you how seriously the business takes their food hygiene standards.
Find a food hygiene rating

Introduction to food allergies

What causes food allergies? What is the difference between allergy and intolerance?
Allergy and intolerance

Language-bar

BETA This is a new service – your feedback will help us to improve it.

Latest-news

Latest news and alerts

Link-list

Animal feed

We aim to help protect consumer and animal health and make sure that those buying the feed have enough information to make informed choices.

In this section

Listing

Showing 1-5 of 1000

Navigation

Pagination

Promo

Starting up

You will need to register and know how to manage your business.

Food safety

Knowing what you and your staff need to do to keep your food safe for consumption.

Labelling

You must make sure that you follow the correct labelling and packaging guidance and regulations.

Share

View PDF