Barbican Reset

Introduction

Barbican Reset is an NPM package that provides a shared design system for Barbican digital projects — including SCSS utilities, Vue components, icons, animations, logos, and JS helpers.

Contents

• Barbican Reset
  • Introduction
  • Contents
  • 1. Setup
  • 2. Component library
  • 3. SCSS
    • Full stylesheet
    • Individual stylesheets
    • Mixins
    • SCSS documentation
  • 4. Icons
  • 5. Animations
  • 6. Logos
  • 7. Scripts
  • 8. Pattern library
    • Setup
    • New pages
    • Extending layouts
    • Including components (mixins)
  • 9. Font library

1. Setup

Install the package into any project:

npm i barbican-reset

Import a component:

import { BrAlert } from 'barbican-reset'

2. Component library

The component library is Vue 3 only.

Many components are registered globally within the Barbican ticketing app. Check main.js to see which are available without an additional import.

| Component | File | | --------------------------- | ------------------------------- | | <br-alert> | BrAlert.vue | | <br-anchor> | BrAnchor.vue | | <br-button> | BrButton.vue | | <br-card> | BrCard.vue | | <br-card-body> | BrCardBody.vue | | <br-card-subtitle> | BrCardSubtitle.vue | | <br-card-tearoff> | BrCardTearoff.vue | | <br-card-text> | BrCardText.vue | | <br-card-title> | BrCardTitle.vue | | <br-collapse-button> | BrCollapse/Button.vue | | <br-collapse-content> | BrCollapse/Content.vue | | <br-confirm-done> | BrConfirmDone.vue | | <br-confirm-email> | BrConfirmEmail.vue | | <br-container> | BrContainer.vue | | <br-details> | BrDetails.vue | | <br-footer-lower> | BrFooterLower.vue | | <br-footer-upper> | BrFooterUpper.vue | | <br-form-block> | BrFormBlock.vue | | <br-form-checkbox> | BrFormCheckbox.vue | | <br-form-checkbox-group> | BrFormCheckboxGroup.vue | | <br-form-date> | BrFormDate.vue | | <br-form-edit> | BrFormEdit.vue | | <br-form-email> | BrFormEmail.vue | | <br-form-fieldset> | BrFormFieldset.vue | | <br-form-input> | BrFormInput.vue | | <br-form-password> | BrFormPassword.vue | | <br-form-radio> | BrFormRadio.vue | | <br-form-radio-group> | BrFormRadioGroup.vue | | <br-form-row> | BrFormRow.vue | | <br-form-tel> | BrFormTel.vue | | <br-form-textarea> | BrFormTextarea.vue | | <br-form-toggle> | BrFormToggle.vue | | <br-form-update> | BrFormUpdate.vue | | <br-form-visible> | BrFormVisible.vue | | <br-link> | BrLink.vue | | <br-loader> | BrLoader.vue | | <br-overlay> | BrOverlay.vue | | <br-skiplink> | BrSkiplink.vue | | <br-status-bars> | BrStatusBars.vue | | <br-table-header> | BrTableHeader.vue | | <br-wrap> | BrWrap.vue |

The br- prefix makes it immediately clear that a component is from Barbican Reset and not native to the app. It also ensures two-word component names, which is the recommended format for custom elements (e.g. <br-header> rather than <header>).

3. SCSS

Full stylesheet

// Vite / webpack (resolves from node_modules automatically)
@import 'barbican-reset/scss';

// Explicit node_modules path (e.g. Drupal)
@import '../node_modules/barbican-reset/scss';

Individual stylesheets

The package exposes several standalone stylesheets:

| Export | Description | | ------------------------------- | ---------------------------------- | | barbican-reset/scss | Full stylesheet | | barbican-reset/reset | CSS reset only | | barbican-reset/typography | Typography styles | | barbican-reset/lists | List styles | | barbican-reset/supreme | Supreme font styles |

Mixins

// Vite / webpack
@import 'barbican-reset/scss/mixins';

// Explicit node_modules path
@import '../node_modules/barbican-reset/scss/mixins';

The Barbican ticketing site makes SCSS mixins globally available via vue.config.js, so individual component files do not need to import them explicitly.

SCSS documentation

We use SassDoc to document SCSS. To generate and watch for changes:

npm run build:css

Open sassdoc/index.html in your browser to view the output.

4. Icons

Icons are Vue components exported from the barbican-reset/icons path.

import { Cart, Close } from 'barbican-reset/icons'

Icon sub-groups are available at their own export paths:

import { Edit } from 'barbican-reset/icons/account'
import { Done }  from 'barbican-reset/icons/confirm'
import { Live }  from 'barbican-reset/icons/stream'

5. Animations

GSAP animation helpers are exported from barbican-reset/animations.

import { confirm } from 'barbican-reset/animations'

6. Logos

SVG logo files are located in the logos/ directory:

• barbican.svg
• arts-council-england.svg
• city-of-london.svg
• lso.svg

7. Scripts

JS helper utilities are available at two export paths:

// Top-level helpers barrel
import helpers from 'barbican-reset/scripts/helpers'

// Vue composition API mixins (input helpers)
import { useInput } from 'barbican-reset/mixins'

8. Pattern library

The pattern library provides a single source of truth for all SCSS styles and lets you view the full family of Barbican styles alongside each other.

Setup

If this is your first time, navigate to the patterns subfolder and run npm i.

From the root folder:

npm run serve:patterns

Then open http://localhost:3000 in your browser.

New pages

Run the following from the patterns subfolder.

Navigate to the views subfolder and duplicate index.pug, then rename it.

Extending layouts

The first line of your page reads:

extends ../layouts/main

The layouts/main.pug file defines block content — the area your page can write into. Layouts are useful for page templates, removing the need for repetitive scaffolding code.

Including components (mixins)

The second line of your page reads:

include ../components/samples

The components/samples.pug file defines mixin Samples(). Call it from your page like so:

+Samples('Contemporary', 'contemporary-music')

Mixins are useful for rendering repetitive markup. For more flexibility, extend a layout instead.

9. Font library

The package includes a font-face SCSS mixin that defaults font URLs to https://static.barbican.org.uk/systems-public/fonts/subset/, so no digital project needs to host its own font files.