Pattern library with styles, templates and js to create Barnardos services

npm install @barnardos/barnardos-elements@0.5.2


Barnardos Elements

Front end pattern library for Barnardos Digital

What does Barnardos Elements provide?

The primary goal of the Barnardos Elements project it to provide front-end resources for developers creating web sites and services for Barnardos. The toolkit consists of an NPM package and a pattern library available to view online

NPM Package

The Frontend toolkit currently

the npm package has a 'dist' folder containing pre-processed files. The 'dist' folder contains:

File/Folder Description
css Compiled CSS for users who do not want to use the sass styles. Also contains compiled css used by base layouts
javascripts A folder to add to your static assets mappings in node to host the javascript bundle to add behaviour to the page. This folder contains barnardos-elements-components.js, this is the code that enhances parts of a page, such as readio buttons. The cookie and component scripts in this folder are called by the base layout by default.
nunjucks/filters Helpful filters for nunjucks, such as date formatting and console logging
nunjucks/layouts Base page layouts for pages to provide a consistant layout, header and footer.
nunjucks/macros/barnardos.html A collection of macros for nunjucks for generating layout. Using the macros produces consistent markup designed to be used in conjuction with the sass styles.
sass The sass folder contains all the sass source for styling a site to be consistent with Barnardos.

Online Gallery

The Online Gallery demonstrates the layouts, components and styles that make up the Barnardos Elements toolkit. The gallery includes:

  • Pattern name
  • Descriptiong
  • A working example
  • Static markup
  • Macro call example



You download and install this application as normal for node by checking the code out then you can either use NPM or Yarn (recommended) to install dependencies and then use the following npm scripts to do something, enter npm/yarn run scriptname

  • start - run the server and access via http://localhost:3050/ and listens for changes and rebuilds them
  • build - assemble all the assets and compile js and sass
  • test - Run unit tests for js components
  • lint - Check sass and JS conform to required syntax standards


Use docker and docker compose to start or develop components without having to install NodeJS. Simply docker-compose up and you can connect to the sever via http://localhost:3050/