barbican-reset 2.33.0 → 2.35.0

package/README.md

@@ -0,0 +1,159 @@
+# Barbican Reset
+
+## Introduction
+
+The Barbican Reset is an NPM module created to maintain consistency between the various digital projects run by the Barbican.
+
+## Contents
+
+1. Setup
+2. Component library
+3. SCSS documentation
+4. JS documentation
+5. Pattern library
+6. Font library
+
+## 1. Setup
+
+You can install the Barbican Reset into any project by running `npm i barbican-reset` inside your project root folder.
+
+You can then manually import a component using `import { BrExample } from barbican-reset`
+
+#### SCSS Stylesheet
+
+Vue.js: `@import '~barbican-reset';`
+
+> Use the ~ in Vue.js to import assets from the project root
+
+Drupal: `@import "../node_modules/barbican-reset/scss/index";`
+
+Spektrix iframe development: `@import "../../node_modules/barbican-reset/scss/index.scss";`
+
+#### SCSS Mixins
+
+Vue.js: `@import "~barbican-reset/scss/helpers";`
+
+> The Barbican ticketing site makes SCSS mixins globally available via the `vue.config.js` file
+
+Drupal: `@import "../node_modules/barbican-reset/scss/helpers/index";`
+
+... fonts
+
+## 2. Component library
+
+The component library is **only available to Vue.js** apps.
+
+> Many components are available globally within the Barbican ticketing app. Check the main.js file to see which components are currently available. These won't need an additional import statement.
+
+> When manually importing components into Vue.js, be sure to declare the import as a Vue component as well
+
+You can reference any of the following components:
+
+| Component            | Filename             | SCSS Class           | SCSS Mixin       | Previously    |
+| -------------------- | -------------------- | -------------------- | ---------------- | ------------- |
+| `<br-alert>`         | br_alert.vue         | .br-alert            | br-alert--setup  | -             |
+| `<br-anchor>`        | br_anchor.vue        | .btn                 | setup-button     | -             |
+| `<br-button>`        | br_button.vue        | .br-checkbox         | br-checkbox      | -             |
+| `<br-confirm-done>`  | br_confirm_done.vue  | -                    | -                | -             |
+| `<br-confirm-email>` | br_confirm_email.vue | -                    | -                | -             |
+| `<br-container>`     | br_container.vue     | .br-container--outer | -                | -             |
+| `<br-footer-lower>`  | br_footer_lower.vue  | .br-footer-lower     | br-footer-lower  | -             |
+| `<br-footer-upper>`  | br_footer_upper.vue  | .br-footer-upper     | br-footer-upper  | -             |
+| `<br-form-block>`    | br_form_block.vue    | -                    | -                | -             |
+| `<br-form-password>` | br_form_password.vue | .br-form-password    | br-form-password | -             |
+| `<br-form-row>`      | br_form_row.vue      | .br-form-row         | br-form-row      | -             |
+| `<br-form-update>`   | br_form_update.vue   | .br-form-update      | br-form-update   | -             |
+| `<br-loader>`        | br_loader.vue        | .br-loader           | -                | -             |
+| `<br-skiplink>`      | br_skiplink.vue      | -                    | -                | `<skip-link>` |
+| `<br-wrap>`          | br_wrap.vue          | .br-wrap             | -                | -             |
+
+The following component titles are deprecated. You can still use them, but they will migrate to the BR naming convention in future.
+
+| Component         | Filename          | SCSS Class | SCSS Mixin |
+| ----------------- | ----------------- | ---------- | ---------- |
+| `<account-title>` | account_title.vue | -          | -          |
+| `<card-display>`  | card_display.vue  | -          | -          |
+| `<event-summary>` | event_summary.vue | -          | -          |
+| `<fluid-iframe>`  | fluid_iframe.vue  | -          | -          |
+| `<help-row>`      | help_row.vue      | -          | -          |
+| `<placeholder>`   | placeholder.vue   | -          | -          |
+| `<payment-logo>`  | payment_logo.vue  | -          | -          |
+| `<related-card>`  | related_card.vue  | -          | -          |
+| `<related-title>` | related_title.vue | -          | -          |
+| `<related-row>`   | related_row.vue   | -          | -          |
+| `<type-text>`     | type_text.vue     | -          | -          |
+| `<video-content>` | video_content.vue | -          | -          |
+
+```
+The BR naming convention imitates the Bootstrap example. This format is useful for two reasons:
+
+1. It is immediately obvious that the component is imported from the Barbican Reset and is not native to the app.
+
+2. It forces components to use a two word syntax, which is the recommended format for custom components. For example, <br-header> instead of <header>, which avoids clashing with native HTML5 components.
+```
+
+## 3. SCSS documentation
+
+We use SassDoc to document our SCSS. Here's some useful commands for working with this documentation:
+
+- To output the latest documentation and watch for changes to scss, run `gulp watch:css`
+- To view the documentation, open the file `sassdoc/index.html` in your browser. You will need to refresh this page to view any additional changes that you make.
+
+Most components have corresponding SCSS classes (and mixins) which allow us to implement consistent styling across our various frontends, irrespective of their HTML structure.
+
+## 4. JS documentation
+
+We use JSDoc to document our Javascript. Here's some useful commands for working with this documentation:
+
+- To output the latest documentation and watch for changes to javascript, run `gulp watch:js`
+- To manually output documentation using gulp, run `gulp doc:js`
+- To manually output documentation using jsdoc, run `jsdoc gulpfile.js`
+- To view the documentation, open the file `out/index.html` in your browser. You will need to refresh this page to view any additional changes that you make.
+
+## 5. Pattern library
+
+The Barbican Reset includes a pattern library. This provides a single source of truth for all the SCSS contained within and allows us to view a whole family of Barbican styles alongside each other.
+
+#### Setup
+
+> If this is your first time viewing the pattern library, navigate to the **patterns** subfolder and run `npm i`
+
+From the root folder, run `npm run serve:patterns` and visit `https://localhost:3000` in the web browser
+
+#### New pages
+
+> Begin instructions from the **patterns** subfolder.
+
+To create a new page in the pattern library, navigate to the **views** subfolder.
+
+Duplicate the `index.pug` file and rename it.
+
+#### Extending layouts
+
+The first line of your new page reads `extends ../layouts/main`
+
+If you navigate to the `layouts` subfolder you will see a `main.pug` file. Pug syntax looks like abbreviated HTML markup but also includes `block content`. Blocks describe which areas the page can use to output content.
+
+Layouts are useful for creating page templates, allowing pages to focus on content and removing the need for repetitive scafolding code.
+
+#### Including components (mixins)
+
+The second line of your new page reads `include ../components/samples`
+
+If you navigate to the `components` subfolder you will see a `samples.pug` file. Pug syntax looks like abbreviated HTML markup but also includes `mixin Samples()`. Mixins can accept parameters, which they use to print HTML markup on the page.
+
+To call the samples mixin from your new page, you might write `+Samples('Contemporary','contemporary-music')`
+
+Mixins are useful for printing repetitive code, such as loops to the page. The parameters they accept are quite narrow though, so if you need more flexibility, it's best to extend a layout instead.
+
+#### Future intent
+
+The pattern library was created as a single source of truth for Barbican styles and components. Unfortunately the components are only compatible with Vue.js currently and so the HTML markup is duplicated.
+
+## 6. Font library
+
+The Barbican Reset includes a SCSS mixin called `font-face` which constructs font paths...
+
+#### Future intent
+
+To have this available on a url for assets... ie. assets.barbican.org.uk/supreme

package/components/br_alert.vue

@@ -9,7 +9,8 @@
         v-if="toggle"
         variant="exit"
         :class="getStatus"
-        @click="$emit('close')">
+        @click="$emit('close')"
+      >
         <close-icon :status="getStatus" />
       </b-button>
     </div>
@@ -17,10 +18,10 @@
 </template>
 
 <script>
-import { BButton } from 'bootstrap-vue'
-import { CloseIcon } from 'barbican-reset/icons/stream'
+import { BButton } from "bootstrap-vue";
+import { CloseIcon } from "barbican-reset/icons/stream";
 export default {
-  name: 'BrAlert',
+  name: "BrAlert",
   components: {
     BButton,
     CloseIcon,
@@ -28,12 +29,12 @@ export default {
   computed: {
     getStatus() {
       if (this.error) {
-        return 'error'
+        return "error";
       }
       if (this.success) {
-        return 'success'
+        return "success";
       }
-      return 'neutral'
+      return "neutral";
     },
   },
   props: {
@@ -59,7 +60,7 @@ export default {
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     flex: {
       type: Boolean,
@@ -70,5 +71,5 @@ export default {
       default: false,
     },
   },
-}
+};
 </script>

package/components/br_skiplink.vue

@@ -0,0 +1,17 @@
+<template>
+  <a :href="href" class="br-skiplink">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "BrSkiplink",
+  props: {
+    href: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

package/components/card_display.vue

@@ -6,7 +6,7 @@
         <live-icon :class="$style.svg" />
       </div>
     </div>
-    <img :class="$style.image" :src="image">
+    <img :class="$style.image" :src="image" />
     <div v-if="expired" :class="$style.title">
       <h4>Expired</h4>
     </div>
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { LiveIcon } from 'barbican-reset/icons/stream'
+import { LiveIcon } from "barbican-reset/icons/stream";
 export default {
   name: "CardDisplay",
   components: { LiveIcon },
@@ -33,28 +33,31 @@ export default {
     },
     type: {
       type: String,
-      default: 'concert',
+      default: "concert",
     },
   },
   computed: {
     styleComponent() {
       const style = this.$style;
       let output = [style.component];
-      if (this.hero) { output.push(style.hero); }
+      if (this.hero) {
+        output.push(style.hero);
+      }
       return output;
     },
     styleButton() {
       const style = this.$style;
       let output = [style.button];
-      if (this.hero) { output.push(style.hero); }
+      if (this.hero) {
+        output.push(style.hero);
+      }
       return output;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
 .btn.btn-secondary {
   &:not(.hero) {
     border-radius: 50%;
@@ -68,12 +71,10 @@ export default {
     gap: 0.5rem;
   }
 }
-
 </style>
 
 <style lang="scss" module>
-
-@import "../helpers";
+@import "../scss/helpers";
 
 .svg {
   fill: white;
@@ -112,12 +113,11 @@ export default {
     right: 1.5rem;
     top: 1.5rem;
   }
-  
+
   .title {
     h4 {
       font-size: $h2-font-size;
     }
   }
 }
-
-</style>
+</style>

package/components/fluid_iframe.vue

@@ -5,26 +5,26 @@
       allowfullscreen
       frameborder="0"
       height="100%"
-      width="100%" 
-      :src="src" />
+      width="100%"
+      :src="src"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'FluidIframe',
+  name: "FluidIframe",
   props: {
     src: {
       type: String,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 };
 </script>
 
 <style lang="scss" module>
-
-@import "../helpers";
+@import "../scss/helpers";
 
 .component {
   border-radius: $border-radius-lg;
@@ -37,5 +37,4 @@ export default {
   position: absolute;
   @include inset(0);
 }
-
 </style>

package/index.js

@@ -1,59 +1,58 @@
-import EventSummary from "./components/event_summary";
-import AccountTitle from "./components/account_title";
-import RelatedTitle from "./components/related_title";
-import RelatedCard from "./components/related_card";
-import RelatedRow from "./components/related_row";
-import TypeText from "./components/type_text";
-import Placeholder from "./components/placeholder";
-import CardDisplay from "./components/card_display";
-import FluidIframe from "./components/fluid_iframe";
-import HelpRow from "./components/help_row";
-import VideoContent from "./components/video_content";
-import PaymentLogo from "./components/payment_logo";
-import SkipLink from "./components/skip_link";
-
 import BrAlert from "./components/br_alert";
 import BrAnchor from "./components/br_anchor";
 import BrButton from "./components/br_button";
 import BrConfirmDone from "./components/br_confirm_done";
 import BrConfirmEmail from "./components/br_confirm_email";
 import BrContainer from "./components/br_container";
+import BrFooterLower from "./components/br_footer/lower";
+import BrFooterUpper from "./components/br_footer/upper";
 import BrFormBlock from "./components/br_form_block";
+import BrFormPassword from "./components/br_form_password";
 import BrFormRow from "./components/br_form_row";
 import BrFormUpdate from "./components/br_form_update";
-import BrFormPassword from "./components/br_form_password";
 import BrLoader from "./components/br_loader";
+import BrSkiplink from "./components/br_skiplink";
 import BrWrap from "./components/br_wrap";
 
-import BrFooterUpper from "./components/br_footer/upper";
-import BrFooterLower from "./components/br_footer/lower";
+import AccountTitle from "./components/account_title";
+import CardDisplay from "./components/card_display";
+import EventSummary from "./components/event_summary";
+import FluidIframe from "./components/fluid_iframe";
+import HelpRow from "./components/help_row";
+import Placeholder from "./components/placeholder";
+import PaymentLogo from "./components/payment_logo";
+import RelatedCard from "./components/related_card";
+import RelatedTitle from "./components/related_title";
+import RelatedRow from "./components/related_row";
+import TypeText from "./components/type_text";
+import VideoContent from "./components/video_content";
 
 export {
-  BrLoader,
   BrAlert,
-  RelatedTitle,
-  RelatedCard,
-  RelatedRow,
-  TypeText,
+  BrAnchor,
+  BrButton,
+  BrConfirmDone,
+  BrConfirmEmail,
   BrContainer,
-  AccountTitle,
-  Placeholder,
+  BrFooterLower,
+  BrFooterUpper,
   BrFormBlock,
-  BrFormUpdate,
   BrFormPassword,
   BrFormRow,
+  BrFormUpdate,
+  BrLoader,
+  BrSkiplink,
+  BrWrap,
+  AccountTitle,
+  CardDisplay,
   EventSummary,
-  BrFooterLower,
-  BrFooterUpper,
   FluidIframe,
   HelpRow,
-  CardDisplay,
-  VideoContent,
+  Placeholder,
   PaymentLogo,
-  SkipLink,
-  BrButton,
-  BrAnchor,
-  BrConfirmDone,
-  BrConfirmEmail,
-  BrWrap,
+  RelatedCard,
+  RelatedTitle,
+  RelatedRow,
+  TypeText,
+  VideoContent,
 };

package/package.json

@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "bootstrap-vue": "^2.21.2",
-    "express": "^4.18.1",
+    "express": "^4.19.2",
     "focus-visible": "^5.2.0",
     "gsap": "^3.7.1",
     "gulp": "^4.0.2",
@@ -64,13 +64,14 @@
     "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify": "^3.0.2",
+    "js-doc": "^0.5.0",
     "luxon": "^3.2.1",
     "node-sass-tilde-importer": "^1.0.2",
-    "placeholder-loading": "^0.4.0",
+    "nodemon": "^3.1.0",
     "pug": "^3.0.2",
     "sass": "^1.41.0",
-    "save-dev": "^0.0.1-security",
-    "vue-slick-carousel": "^1.0.6"
+    "sassdoc": "^2.7.4",
+    "serve-favicon": "^2.5.0"
   },
   "devDependencies": {
     "bootstrap": "^5.1.3"
@@ -81,7 +82,6 @@
     "components/**/*",
     "dist/**/*",
     "fonts/*",
-    "helpers/**/*",
     "icons/**/*",
     "patterns/**/*",
     "logos/*",
@@ -98,10 +98,11 @@
   },
   "sass": "scss/index.scss",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "serve:patterns": "cd patterns && node index",
-    "watch:patterns": "cd patterns && gulp watch"
+    "watch:patterns": "cd patterns && gulp watch",
+    "style:patterns": "cd patterns && gulp build:css",
+    "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.33.0"
+  "version": "2.35.0"
 }

package/patterns/components/alert.pug

@@ -0,0 +1,8 @@
+mixin Alert(title)
+  .br-alert(class=attributes.center && 'center')
+    .wrap(class=attributes.state, class=attributes.inline && 'inline', class=attributes.toggle && 'toggle', class=attributes.flex && 'flex')
+      span(class=attributes.icon && 'icon')
+        .title= title
+      button.btn.btn-exit(class=attributes.state)
+        span Close
+

package/patterns/components/section.pug

@@ -0,0 +1,3 @@
+mixin Section(title)
+  .section-header
+    h3= title

package/patterns/html/blocks.html

@@ -0,0 +1 @@
+<html><head><title>Pattern Library | Barbican Reset</title><link rel="stylesheet" href="/styles.css"/></head><body><div class="topbar"><div class="information"> </div><div class="sections"> <a href="/"> <h3>Items</h3></a><a href="/blocks"> <h3>Blocks</h3></a><a href="/layouts"> <h3>Layouts</h3></a></div><div class="search"></div></div><div class="br-container--outer"><div class="br-container--inner"><div>Blocks</div></div></div></body></html>

package/patterns/html/index.html

@@ -0,0 +1 @@
+<html><head><title>Pattern Library | Barbican Reset</title><link rel="stylesheet" href="/styles.css"/></head><body><div class="topbar"><div class="information"> </div><div class="sections"> <a href="/"> <h3>Items</h3></a><a href="/blocks"> <h3>Blocks</h3></a><a href="/layouts"> <h3>Layouts</h3></a></div><div class="search"></div></div><div class="br-container--outer"><div class="br-container--inner"><div class="section-header"><h3>Colors</h3></div><div class="page"><h3>Grey</h3><ul class="list list-palette grey"><li class="item item-palette l11"></li><li class="item item-palette l21"></li><li class="item item-palette l44"></li><li class="item item-palette l65"></li><li class="item item-palette l87"></li><li class="item item-palette l96"></li></ul><h3 class="title title-palette">Contemporary</h3><ul class="list list-palette brand-contemporary-music"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Theatre</h3><ul class="list list-palette brand-theatre--dance"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Talks</h3><ul class="list list-palette brand-talks--events"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Art</h3><ul class="list list-palette brand-art--design"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Programme</h3><ul class="list list-palette brand-programme"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Cinema</h3><ul class="list list-palette brand-cinema"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Shop</h3><ul class="list list-palette brand-shop"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Generic / Library / Tours / Hire</h3><ul class="list list-palette brand-generic"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Classical</h3><ul class="list list-palette brand-classical-music"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul><h3 class="title title-palette">Membership</h3><ul class="list list-palette brand-membership--support"><li class="item item-palette shade-65"></li><li class="item item-palette shade-20"></li><li class="item item-palette shade-10"></li><li class="item item-palette"></li><li class="item item-palette tint-40"></li><li class="item item-palette tint-70"></li><li class="item item-palette tint-85"></li><li class="item item-palette tint-95"></li><li class="item item-palette tint-98"></li></ul></div></div></div></body></html>

package/patterns/html/layouts.html

@@ -0,0 +1 @@
+<html><head><title>Pattern Library | Barbican Reset</title><link rel="stylesheet" href="/styles.css"/></head><body><div class="topbar"><div class="information"> </div><div class="sections"> <a href="/"> <h3>Items</h3></a><a href="/blocks"> <h3>Blocks</h3></a><a href="/layouts"> <h3>Layouts</h3></a></div><div class="search"></div></div><div class="br-container--outer"><div class="br-container--inner"><div>Layouts</div></div></div></body></html>

package/patterns/index.js

@@ -1,13 +1,25 @@
-const express = require('express')
-const app = express()
-const port = 3000
+const express = require("express");
+const favicon = require("serve-favicon");
+
+const app = express();
+const port = 3000;
 
 // To run server: node index
 
-app.set('view engine', 'pug')
+const routes = [
+  { path: "/", view: "index" },
+  { path: "/blocks", view: "blocks" },
+  { path: "/layouts", view: "layouts" },
+];
+
+app.set("view engine", "pug");
+
+app.use(express.static(__dirname + "/static"));
 
-app.use(express.static(__dirname + '/static'));
+app.use(favicon(__dirname + "/static/favicon.ico"));
 
-app.get('/', (req, res) => res.render('index', { title: 'Hey', message: 'Hello there' }))
+routes.forEach(({ path, view }) => app.get(path, (_, res) => res.render(view)));
 
-app.listen(port, () => console.log(`Example app listening on port ${port}`))
+app.listen(port, function () {
+  console.log(`Pattern library listening on port ${port}`);
+});

package/patterns/layouts/main.pug

@@ -0,0 +1,21 @@
+include ../components/section
+
+html
+  head
+    title Pattern Library | Barbican Reset
+    link(rel="stylesheet" href="/styles.css")
+    link(rel="icon" href="favicon.ico")
+  body
+    .topbar
+      .information 
+      .sections 
+        a(href="/") 
+          h3 Items
+        a(href="/blocks") 
+          h3 Blocks
+        a(href="/layouts") 
+          h3 Layouts
+      .search
+    .br-container--outer
+      .br-container--inner
+        block content

package/patterns/layouts/page.pug

@@ -0,0 +1,2 @@
+.page
+  block content

package/patterns/pages/alerts.pug

@@ -0,0 +1,9 @@
+extends ../layouts/page
+
+include ../components/alert
+
+block content
+
+  +Alert("Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce vel dui.")(flex=true, state="neutral")
+
+  +Alert("Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce vel dui.")(flex=true, state="error")

package/patterns/pages/colors.pug

@@ -0,0 +1,25 @@
+extends ../layouts/page
+
+include ../components/samples
+
+block content
+
+  h3 Grey
+  ul.list.list-palette.grey
+    li.item.item-palette.l11
+    li.item.item-palette.l21
+    li.item.item-palette.l44
+    li.item.item-palette.l65
+    li.item.item-palette.l87
+    li.item.item-palette.l96
+
+  +Samples('Contemporary','contemporary-music')
+  +Samples('Theatre','theatre--dance')
+  +Samples('Talks','talks--events')
+  +Samples('Art','art--design')
+  +Samples('Programme','programme')
+  +Samples('Cinema','cinema')
+  +Samples('Shop','shop')
+  +Samples('Generic / Library / Tours / Hire','generic')
+  +Samples('Classical','classical-music')
+  +Samples('Membership','membership--support')