barbican-reset 2.60.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/components/AccountTitle.vue +2 -0
  2. package/components/BrAlert.vue +2 -2
  3. package/components/BrButton/components.js +3 -6
  4. package/components/BrCard.vue +1 -1
  5. package/components/BrCollapse/Button.vue +12 -11
  6. package/components/BrConfirmDone.vue +4 -4
  7. package/components/BrConfirmEmail.vue +4 -4
  8. package/components/BrContainer.vue +2 -0
  9. package/components/BrFormBlock.vue +2 -0
  10. package/components/BrFormCheckboxGroup/Component.vue +1 -1
  11. package/components/BrFormPassword.vue +3 -3
  12. package/components/BrFormRow.vue +2 -2
  13. package/components/BrFormUpdate.vue +1 -1
  14. package/components/BrLoader.vue +1 -1
  15. package/components/EventSummary.vue +3 -1
  16. package/components/SeeInside.vue +4 -2
  17. package/components/VideoContent.vue +4 -2
  18. package/icons/account/index.js +9 -9
  19. package/icons/city_of_london_lockup.vue +1 -1
  20. package/icons/index.js +20 -10
  21. package/icons/stream/index.js +9 -9
  22. package/index.js +34 -34
  23. package/package.json +1 -1
  24. package/patterns/components/samples.pug +1 -1
  25. package/patterns/html/index.html +152 -1
  26. package/patterns/scss/styles.scss +2 -5
  27. package/patterns/static/styles.css +471 -532
  28. package/scss/helpers/variables/colors/_brand.scss +12 -10
  29. package/scss/helpers/variables/index.scss +0 -1
package/components/AccountTitle.vue CHANGED
@@ -21,6 +21,8 @@ export default {
21
21
  </script>
22
22
 
23
23
  <style lang="scss" module>
24
+ @use "../scss/helpers/index.scss" as *;
25
+
24
26
  @mixin title {
25
27
  margin-bottom: 1.25rem;
26
28
 
package/components/BrAlert.vue CHANGED
@@ -18,8 +18,8 @@
18
18
  </template>
19
19
 
20
20
  <script>
21
- import { CloseIcon } from "barbican-reset/icons/stream";
22
- import BrButton from "./BrButton";
21
+ import CloseIcon from "../icons/stream/close.vue";
22
+ import BrButton from "./BrButton.vue";
23
23
 
24
24
  export default {
25
25
  components: {
package/components/BrButton/components.js CHANGED
@@ -1,7 +1,4 @@
1
- import RemoveTicket from './remove_ticket'
2
- import DotTyping from './dot_typing'
1
+ import RemoveTicket from "./remove_ticket.vue";
2
+ import DotTyping from "./dot_typing.vue";
3
3
 
4
- export {
5
- RemoveTicket,
6
- DotTyping
7
- };
4
+ export { RemoveTicket, DotTyping };
package/components/BrCard.vue CHANGED
@@ -15,7 +15,7 @@
15
15
  </template>
16
16
 
17
17
  <script>
18
- import BrCardBody from "./BrCardBody";
18
+ import BrCardBody from "./BrCardBody.vue";
19
19
 
20
20
  export default {
21
21
  components: { BrCardBody },
package/components/BrCollapse/Button.vue CHANGED
@@ -3,34 +3,35 @@
3
3
  :variant="variant"
4
4
  :aria-controls="controls"
5
5
  :aria-expanded="expanded"
6
- @click="toggleCollapse">
6
+ @click="toggleCollapse"
7
+ >
7
8
  <slot></slot>
8
9
  </br-button>
9
10
  </template>
10
11
 
11
12
  <script>
12
- import BrButton from '../BrButton'
13
+ import BrButton from "../BrButton.vue";
13
14
 
14
15
  export default {
15
16
  components: {
16
- BrButton
17
+ BrButton,
17
18
  },
18
- props: ['controls', 'variant'],
19
+ props: ["controls", "variant"],
19
20
  data() {
20
21
  return {
21
- expanded: 'false',
22
- }
22
+ expanded: "false",
23
+ };
23
24
  },
24
25
  methods: {
25
26
  toggleCollapse() {
26
- let isExpanded = this.expanded == 'true'
27
+ let isExpanded = this.expanded == "true";
27
28
 
28
- this.expanded = isExpanded ? 'false' : 'true'
29
+ this.expanded = isExpanded ? "false" : "true";
29
30
 
30
- let content = document.getElementById(this.controls)
31
+ let content = document.getElementById(this.controls);
31
32
 
32
- content.classList.toggle('expanded')
33
+ content.classList.toggle("expanded");
33
34
  },
34
35
  },
35
- }
36
+ };
36
37
  </script>
package/components/BrConfirmDone.vue CHANGED
@@ -9,12 +9,12 @@
9
9
  </template>
10
10
 
11
11
  <script>
12
- import BrCard from "./BrCard";
13
- import BrCardTitle from "./BrCardTitle";
14
- import BrCardText from "./BrCardText";
12
+ import BrCard from "./BrCard.vue";
13
+ import BrCardTitle from "./BrCardTitle.vue";
14
+ import BrCardText from "./BrCardText.vue";
15
15
 
16
16
  import Animations from "barbican-reset/animations";
17
- import { DoneIcon } from "barbican-reset/icons/confirm";
17
+ import DoneIcon from "../icons/confirm/done.vue";
18
18
 
19
19
  export default {
20
20
  mixins: [Animations],
package/components/BrConfirmEmail.vue CHANGED
@@ -11,12 +11,12 @@
11
11
  </template>
12
12
 
13
13
  <script>
14
- import BrCard from "./BrCard";
15
- import BrCardTitle from "./BrCardTitle";
16
- import BrCardText from "./BrCardText";
14
+ import BrCard from "./BrCard.vue";
15
+ import BrCardTitle from "./BrCardTitle.vue";
16
+ import BrCardText from "./BrCardText.vue";
17
17
 
18
18
  import Animations from "barbican-reset/animations";
19
- import { EmailIcon } from "barbican-reset/icons/confirm";
19
+ import EmailIcon from "../icons/confirm/email.vue";
20
20
 
21
21
  export default {
22
22
  mixins: [Animations],
package/components/BrContainer.vue CHANGED
@@ -64,6 +64,8 @@ export default {
64
64
  </script>
65
65
 
66
66
  <style lang="scss" module>
67
+ @use "../scss/helpers/index.scss" as *;
68
+
67
69
  .outer {
68
70
  padding-right: 5%;
69
71
  padding-left: 5%;
package/components/BrFormBlock.vue CHANGED
@@ -5,6 +5,8 @@
5
5
  </template>
6
6
 
7
7
  <style lang="scss" module>
8
+ @use "../scss/helpers/index.scss" as *;
9
+
8
10
  .container {
9
11
  padding: 0.875rem 0.75rem 0.625rem 0.75rem;
10
12
  border-left: 0.25rem solid;
package/components/BrFormCheckboxGroup/Component.vue CHANGED
@@ -18,7 +18,7 @@
18
18
  </template>
19
19
 
20
20
  <script>
21
- import BrFormCheckbox from "../BrFormCheckbox/Component";
21
+ import BrFormCheckbox from "../BrFormCheckbox/Component.vue";
22
22
 
23
23
  export default {
24
24
  props: ["modelValue", "options", "name", "id"],
package/components/BrFormPassword.vue CHANGED
@@ -26,9 +26,9 @@
26
26
  </template>
27
27
 
28
28
  <script>
29
- import BrButton from "./BrButton";
30
- import HidePasswordIcon from "../icons/password/hide";
31
- import ShowPasswordIcon from "../icons/password/show";
29
+ import BrButton from "./BrButton.vue";
30
+ import HidePasswordIcon from "../icons/password/hide.vue";
31
+ import ShowPasswordIcon from "../icons/password/show.vue";
32
32
 
33
33
  export default {
34
34
  inheritAttrs: false, // Allow us to put attributes on the input.
package/components/BrFormRow.vue CHANGED
@@ -15,8 +15,8 @@
15
15
  </template>
16
16
 
17
17
  <script>
18
- import BrButton from "./BrButton";
19
- import { EditIcon } from "../icons/account";
18
+ import BrButton from "./BrButton.vue";
19
+ import EditIcon from "../icons/account/edit.vue";
20
20
 
21
21
  export default {
22
22
  components: {
package/components/BrFormUpdate.vue CHANGED
@@ -8,7 +8,7 @@
8
8
  </template>
9
9
 
10
10
  <script>
11
- import BrButton from "./BrButton";
11
+ import BrButton from "./BrButton.vue";
12
12
 
13
13
  export default {
14
14
  components: {
package/components/BrLoader.vue CHANGED
@@ -12,7 +12,7 @@
12
12
  </template>
13
13
 
14
14
  <script>
15
- import BrCard from "./BrCard";
15
+ import BrCard from "./BrCard.vue";
16
16
 
17
17
  export default {
18
18
  components: {
package/components/EventSummary.vue CHANGED
@@ -27,7 +27,7 @@
27
27
  </template>
28
28
 
29
29
  <script>
30
- import SeeInside from "./SeeInside";
30
+ import SeeInside from "./SeeInside.vue";
31
31
 
32
32
  export default {
33
33
  components: { SeeInside },
@@ -61,6 +61,8 @@ export default {
61
61
  </script>
62
62
 
63
63
  <style lang="scss" module>
64
+ @use "../scss/helpers/index.scss" as *;
65
+
64
66
  @mixin title {
65
67
  letter-spacing: $headings-letter-spacing;
66
68
  line-height: $line-height-sm;
package/components/SeeInside.vue CHANGED
@@ -46,8 +46,8 @@
46
46
  </template>
47
47
 
48
48
  <script>
49
- import BrButton from "./BrButton";
50
- import { CloseIcon } from "barbican-reset/icons/stream";
49
+ import BrButton from "./BrButton.vue";
50
+ import CloseIcon from "../icons/stream/close.vue";
51
51
 
52
52
  export default {
53
53
  components: {
@@ -74,6 +74,8 @@ export default {
74
74
  </script>
75
75
 
76
76
  <style lang="scss" module>
77
+ @use "../scss/helpers/index.scss" as *;
78
+
77
79
  .SeeInside_content {
78
80
  padding: 1rem;
79
81
  border: 1px solid $c-grey-l87;
package/components/VideoContent.vue CHANGED
@@ -32,8 +32,8 @@
32
32
  </template>
33
33
 
34
34
  <script>
35
- import { FluidIframe } from "barbican-reset";
36
- import BrAlert from "./BrAlert";
35
+ import FluidIframe from "./FluidIframe.vue";
36
+ import BrAlert from "./BrAlert.vue";
37
37
  import { DateTime } from "luxon";
38
38
 
39
39
  export default {
@@ -64,6 +64,8 @@ export default {
64
64
  </script>
65
65
 
66
66
  <style lang="scss" module>
67
+ @use "../scss/helpers/index.scss" as *;
68
+
67
69
  .brightcove {
68
70
  border-radius: $br-border-radius-lg;
69
71
  margin-bottom: 2rem;
package/icons/account/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import PersonalIcon from './personal'
2
- import MembershipIcon from './membership'
3
- import VideoIcon from './video'
4
- import PaymentIcon from './payment'
5
- import OrdersIcon from './orders'
6
- import SupportIcon from './support'
7
- import EditIcon from './edit'
1
+ import PersonalIcon from "./personal.vue";
2
+ import MembershipIcon from "./membership.vue";
3
+ import VideoIcon from "./video.vue";
4
+ import PaymentIcon from "./payment.vue";
5
+ import OrdersIcon from "./orders.vue";
6
+ import SupportIcon from "./support.vue";
7
+ import EditIcon from "./edit.vue";
8
8
 
9
9
  export {
10
10
  PersonalIcon,
@@ -13,5 +13,5 @@ export {
13
13
  PaymentIcon,
14
14
  OrdersIcon,
15
15
  SupportIcon,
16
- EditIcon
17
- }
16
+ EditIcon,
17
+ };
package/icons/city_of_london_lockup.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  </template>
14
14
 
15
15
  <script>
16
- import CityOfLondonLogo from "./city_of_london";
16
+ import CityOfLondonLogo from "./city_of_london.vue";
17
17
 
18
18
  export default {
19
19
  components: {
package/icons/index.js CHANGED
@@ -1,11 +1,21 @@
1
- import ArrowBack from './arrow_back'
2
- import ArrowIcon from './arrow'
3
- import ArrowForward from './arrow_forward'
4
- import BackArrow from './back_arrow'
5
- import BarbicanLogo from './barbican'
6
- import CartIcon from './cart'
7
- import CityOfLondonLogo from './city_of_london'
8
- import CityOfLondonLockup from './city_of_london_lockup'
9
- import InformationIcon from './information'
1
+ import ArrowBack from "./arrow_back.vue";
2
+ import ArrowIcon from "./arrow.vue";
3
+ import ArrowForward from "./arrow_forward.vue";
4
+ import BackArrow from "./back_arrow.vue";
5
+ import BarbicanLogo from "./barbican.vue";
6
+ import CartIcon from "./cart.vue";
7
+ import CityOfLondonLogo from "./city_of_london.vue";
8
+ import CityOfLondonLockup from "./city_of_london_lockup.vue";
9
+ import InformationIcon from "./information.vue";
10
10
 
11
- export { ArrowBack, ArrowIcon, ArrowForward, BackArrow, BarbicanLogo, CartIcon, CityOfLondonLogo, CityOfLondonLockup, InformationIcon }
11
+ export {
12
+ ArrowBack,
13
+ ArrowIcon,
14
+ ArrowForward,
15
+ BackArrow,
16
+ BarbicanLogo,
17
+ CartIcon,
18
+ CityOfLondonLogo,
19
+ CityOfLondonLockup,
20
+ InformationIcon,
21
+ };
package/icons/stream/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import AirplayIcon from './airplay'
2
- import CastIcon from './cast'
3
- import ChatIcon from './chat'
4
- import CogIcon from './cog'
5
- import VolumeIcon from './volume'
6
- import LiveIcon from './live'
7
- import CloseIcon from './close'
1
+ import AirplayIcon from "./airplay.vue";
2
+ import CastIcon from "./cast.vue";
3
+ import ChatIcon from "./chat.vue";
4
+ import CogIcon from "./cog.vue";
5
+ import VolumeIcon from "./volume.vue";
6
+ import LiveIcon from "./live.vue";
7
+ import CloseIcon from "./close.vue";
8
8
 
9
9
  export {
10
10
  AirplayIcon,
@@ -13,5 +13,5 @@ export {
13
13
  ChatIcon,
14
14
  CogIcon,
15
15
  VolumeIcon,
16
- LiveIcon
17
- }
16
+ LiveIcon,
17
+ };
package/index.js CHANGED
@@ -1,45 +1,45 @@
1
- import BrAlert from "./components/BrAlert";
2
- import BrAnchor from "./components/BrAnchor";
3
- import BrButton from "./components/BrButton";
1
+ import BrAlert from "./components/BrAlert.vue";
2
+ import BrAnchor from "./components/BrAnchor.vue";
3
+ import BrButton from "./components/BrButton.vue";
4
4
 
5
- import BrCard from "./components/BrCard";
6
- import BrCardBody from "./components/BrCardBody";
7
- import BrCardText from "./components/BrCardText";
8
- import BrCardTitle from "./components/BrCardTitle";
9
- import BrCardSubTitle from "./components/BrCardSubTitle";
5
+ import BrCard from "./components/BrCard.vue";
6
+ import BrCardBody from "./components/BrCardBody.vue";
7
+ import BrCardText from "./components/BrCardText.vue";
8
+ import BrCardTitle from "./components/BrCardTitle.vue";
9
+ import BrCardSubTitle from "./components/BrCardSubTitle.vue";
10
10
 
11
- import BrCollapseButton from "./components/BrCollapse/Button";
12
- import BrCollapseContent from "./components/BrCollapse/Content";
11
+ import BrCollapseButton from "./components/BrCollapse/Button.vue";
12
+ import BrCollapseContent from "./components/BrCollapse/Content.vue";
13
13
 
14
- import BrConfirmDone from "./components/BrConfirmDone";
15
- import BrConfirmEmail from "./components/BrConfirmEmail";
14
+ import BrConfirmDone from "./components/BrConfirmDone.vue";
15
+ import BrConfirmEmail from "./components/BrConfirmEmail.vue";
16
16
 
17
- import BrContainer from "./components/BrContainer";
17
+ import BrContainer from "./components/BrContainer.vue";
18
18
 
19
- import BrFooterLower from "./components/BrFooterLower";
20
- import BrFooterUpper from "./components/BrFooterUpper";
19
+ import BrFooterLower from "./components/BrFooterLower.vue";
20
+ import BrFooterUpper from "./components/BrFooterUpper.vue";
21
21
 
22
- import BrFormBlock from "./components/BrFormBlock";
23
- import BrFormCheckbox from "./components/BrFormCheckbox/Component";
24
- import BrFormCheckboxGroup from "./components/BrFormCheckboxGroup/Component";
25
- import BrFormGroup from "./components/BrFormGroup/Component";
26
- import BrFormInput from "./components/BrFormInput/Component";
27
- import BrFormPassword from "./components/BrFormPassword";
28
- import BrFormRadio from "./components/BrFormRadio/Component";
29
- import BrFormRadioGroup from "./components/BrFormRadioGroup/Component";
30
- import BrFormRow from "./components/BrFormRow";
31
- import BrFormTextarea from "./components/BrFormTextarea/Component";
32
- import BrFormUpdate from "./components/BrFormUpdate";
22
+ import BrFormBlock from "./components/BrFormBlock.vue";
23
+ import BrFormCheckbox from "./components/BrFormCheckbox/Component.vue";
24
+ import BrFormCheckboxGroup from "./components/BrFormCheckboxGroup/Component.vue";
25
+ import BrFormGroup from "./components/BrFormGroup/Component.vue";
26
+ import BrFormInput from "./components/BrFormInput/Component.vue";
27
+ import BrFormPassword from "./components/BrFormPassword.vue";
28
+ import BrFormRadio from "./components/BrFormRadio/Component.vue";
29
+ import BrFormRadioGroup from "./components/BrFormRadioGroup/Component.vue";
30
+ import BrFormRow from "./components/BrFormRow.vue";
31
+ import BrFormTextarea from "./components/BrFormTextarea/Component.vue";
32
+ import BrFormUpdate from "./components/BrFormUpdate.vue";
33
33
 
34
- import BrLoader from "./components/BrLoader";
35
- import BrSkiplink from "./components/BrSkiplink";
36
- import BrWrap from "./components/BrWrap";
34
+ import BrLoader from "./components/BrLoader.vue";
35
+ import BrSkiplink from "./components/BrSkiplink.vue";
36
+ import BrWrap from "./components/BrWrap.vue";
37
37
 
38
- import AccountTitle from "./components/AccountTitle";
39
- import EventSummary from "./components/EventSummary";
40
- import FluidIframe from "./components/FluidIframe";
41
- import SeeInside from "./components/SeeInside";
42
- import VideoContent from "./components/VideoContent";
38
+ import AccountTitle from "./components/AccountTitle.vue";
39
+ import EventSummary from "./components/EventSummary.vue";
40
+ import FluidIframe from "./components/FluidIframe.vue";
41
+ import SeeInside from "./components/SeeInside.vue";
42
+ import VideoContent from "./components/VideoContent.vue";
43
43
 
44
44
  export {
45
45
  BrAlert,
package/package.json CHANGED
@@ -112,5 +112,5 @@
112
112
  "style:patterns": "cd patterns && gulp build:css",
113
113
  "build:patterns": "cd patterns && rm -rf html && pug views --out html"
114
114
  },
115
- "version": "2.60.0"
115
+ "version": "3.0.0"
116
116
  }
package/patterns/components/samples.pug CHANGED
@@ -7,6 +7,6 @@ mixin Samples(title, className)
7
7
  li.item.item-palette
8
8
  li.item.item-palette.tint-40
9
9
  li.item.item-palette.tint-70
10
- li.item.item-palette.tint-85
10
+ li.item.item-palette.tint-88
11
11
  li.item.item-palette.tint-95
12
12
  li.item.item-palette.tint-98
package/patterns/html/index.html CHANGED
@@ -1 +1,152 @@
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>
1
+ <html>
2
+ <head>
3
+ <title>Pattern Library | Barbican Reset</title>
4
+ <link rel="stylesheet" href="/styles.css" />
5
+ </head>
6
+ <body>
7
+ <div class="topbar">
8
+ <div class="information"></div>
9
+ <div class="sections">
10
+ <a href="/"> <h3>Items</h3></a><a href="/blocks"> <h3>Blocks</h3></a
11
+ ><a href="/layouts"> <h3>Layouts</h3></a>
12
+ </div>
13
+ <div class="search"></div>
14
+ </div>
15
+ <div class="br-container--outer">
16
+ <div class="br-container--inner">
17
+ <div class="section-header"><h3>Colors</h3></div>
18
+ <div class="page">
19
+ <h3>Grey</h3>
20
+ <ul class="list list-palette grey">
21
+ <li class="item item-palette l11"></li>
22
+ <li class="item item-palette l21"></li>
23
+ <li class="item item-palette l44"></li>
24
+ <li class="item item-palette l65"></li>
25
+ <li class="item item-palette l87"></li>
26
+ <li class="item item-palette l96"></li>
27
+ </ul>
28
+ <h3 class="title title-palette">Contemporary</h3>
29
+ <ul class="list list-palette brand-contemporary-music">
30
+ <li class="item item-palette shade-65"></li>
31
+ <li class="item item-palette shade-20"></li>
32
+ <li class="item item-palette shade-10"></li>
33
+ <li class="item item-palette"></li>
34
+ <li class="item item-palette tint-40"></li>
35
+ <li class="item item-palette tint-70"></li>
36
+ <li class="item item-palette tint-88"></li>
37
+ <li class="item item-palette tint-95"></li>
38
+ <li class="item item-palette tint-98"></li>
39
+ </ul>
40
+ <h3 class="title title-palette">Theatre</h3>
41
+ <ul class="list list-palette brand-theatre--dance">
42
+ <li class="item item-palette shade-65"></li>
43
+ <li class="item item-palette shade-20"></li>
44
+ <li class="item item-palette shade-10"></li>
45
+ <li class="item item-palette"></li>
46
+ <li class="item item-palette tint-40"></li>
47
+ <li class="item item-palette tint-70"></li>
48
+ <li class="item item-palette tint-88"></li>
49
+ <li class="item item-palette tint-95"></li>
50
+ <li class="item item-palette tint-98"></li>
51
+ </ul>
52
+ <h3 class="title title-palette">Talks</h3>
53
+ <ul class="list list-palette brand-talks--events">
54
+ <li class="item item-palette shade-65"></li>
55
+ <li class="item item-palette shade-20"></li>
56
+ <li class="item item-palette shade-10"></li>
57
+ <li class="item item-palette"></li>
58
+ <li class="item item-palette tint-40"></li>
59
+ <li class="item item-palette tint-70"></li>
60
+ <li class="item item-palette tint-88"></li>
61
+ <li class="item item-palette tint-95"></li>
62
+ <li class="item item-palette tint-98"></li>
63
+ </ul>
64
+ <h3 class="title title-palette">Art</h3>
65
+ <ul class="list list-palette brand-art--design">
66
+ <li class="item item-palette shade-65"></li>
67
+ <li class="item item-palette shade-20"></li>
68
+ <li class="item item-palette shade-10"></li>
69
+ <li class="item item-palette"></li>
70
+ <li class="item item-palette tint-40"></li>
71
+ <li class="item item-palette tint-70"></li>
72
+ <li class="item item-palette tint-88"></li>
73
+ <li class="item item-palette tint-95"></li>
74
+ <li class="item item-palette tint-98"></li>
75
+ </ul>
76
+ <h3 class="title title-palette">Programme</h3>
77
+ <ul class="list list-palette brand-programme">
78
+ <li class="item item-palette shade-65"></li>
79
+ <li class="item item-palette shade-20"></li>
80
+ <li class="item item-palette shade-10"></li>
81
+ <li class="item item-palette"></li>
82
+ <li class="item item-palette tint-40"></li>
83
+ <li class="item item-palette tint-70"></li>
84
+ <li class="item item-palette tint-88"></li>
85
+ <li class="item item-palette tint-95"></li>
86
+ <li class="item item-palette tint-98"></li>
87
+ </ul>
88
+ <h3 class="title title-palette">Cinema</h3>
89
+ <ul class="list list-palette brand-cinema">
90
+ <li class="item item-palette shade-65"></li>
91
+ <li class="item item-palette shade-20"></li>
92
+ <li class="item item-palette shade-10"></li>
93
+ <li class="item item-palette"></li>
94
+ <li class="item item-palette tint-40"></li>
95
+ <li class="item item-palette tint-70"></li>
96
+ <li class="item item-palette tint-88"></li>
97
+ <li class="item item-palette tint-95"></li>
98
+ <li class="item item-palette tint-98"></li>
99
+ </ul>
100
+ <h3 class="title title-palette">Shop</h3>
101
+ <ul class="list list-palette brand-shop">
102
+ <li class="item item-palette shade-65"></li>
103
+ <li class="item item-palette shade-20"></li>
104
+ <li class="item item-palette shade-10"></li>
105
+ <li class="item item-palette"></li>
106
+ <li class="item item-palette tint-40"></li>
107
+ <li class="item item-palette tint-70"></li>
108
+ <li class="item item-palette tint-88"></li>
109
+ <li class="item item-palette tint-95"></li>
110
+ <li class="item item-palette tint-98"></li>
111
+ </ul>
112
+ <h3 class="title title-palette">Generic / Library / Tours / Hire</h3>
113
+ <ul class="list list-palette brand-generic">
114
+ <li class="item item-palette shade-65"></li>
115
+ <li class="item item-palette shade-20"></li>
116
+ <li class="item item-palette shade-10"></li>
117
+ <li class="item item-palette"></li>
118
+ <li class="item item-palette tint-40"></li>
119
+ <li class="item item-palette tint-70"></li>
120
+ <li class="item item-palette tint-88"></li>
121
+ <li class="item item-palette tint-95"></li>
122
+ <li class="item item-palette tint-98"></li>
123
+ </ul>
124
+ <h3 class="title title-palette">Classical</h3>
125
+ <ul class="list list-palette brand-classical-music">
126
+ <li class="item item-palette shade-65"></li>
127
+ <li class="item item-palette shade-20"></li>
128
+ <li class="item item-palette shade-10"></li>
129
+ <li class="item item-palette"></li>
130
+ <li class="item item-palette tint-40"></li>
131
+ <li class="item item-palette tint-70"></li>
132
+ <li class="item item-palette tint-88"></li>
133
+ <li class="item item-palette tint-95"></li>
134
+ <li class="item item-palette tint-98"></li>
135
+ </ul>
136
+ <h3 class="title title-palette">Membership</h3>
137
+ <ul class="list list-palette brand-membership--support">
138
+ <li class="item item-palette shade-65"></li>
139
+ <li class="item item-palette shade-20"></li>
140
+ <li class="item item-palette shade-10"></li>
141
+ <li class="item item-palette"></li>
142
+ <li class="item item-palette tint-40"></li>
143
+ <li class="item item-palette tint-70"></li>
144
+ <li class="item item-palette tint-88"></li>
145
+ <li class="item item-palette tint-95"></li>
146
+ <li class="item item-palette tint-98"></li>
147
+ </ul>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </body>
152
+ </html>