Branding

Ben Scott / @BPScott

Who?

CSS Responsibilities

Components
Macro-layout
Theming

Design Systems

// _thing.scss
.thing {
  font-size: 16px;
  line-height: 18px;
  margin-bottom: 4px;
  color: #f54997;
}

Design Systems

"Thing is heading-3 and has highlight-color text"

Design Systems

// _variables.scss
$highlight-color: #f54997;

// _common-typography.scss
%heading-3 {
  font-size: 16px;
  line-height: 18px;
  margin-bottom: 4px;
}

// _thing.scss
.thing {
  @extend %heading-3;
  color: $highlight-color;
}

← General

BBC →

BBC Branding

Color Scheme
Imagery
Masthead

Creating a theme

  • A big web form
  • It stores data in the branding database
  • Seriously, it's really boring

Embedding a Theme

  • A stylesheet to add to your <head>
  • A HTML fragment to add above your app content
  • A HTML fragment to add below your app content

Stylesheet URL

http://www.bbc.co.uk/modules/
branding/css/1_5_0/musketeers-1392728488.css

Color Scheme

.br-box-page
.br-box-subtle
.br-box-highlight
.br-box-secondary

Color Scheme

<?php /* common.css.php */ ?>
.br-box-page {
  color: <?=$branding->page_text_color?>;
  background-color: <?=$branding->page_bg_color?>;
}

.br-box-page a {
  color: <?=$branding->page_link_color?>;
}

.br-box-page a:hover {
  color: <?=$branding->page_link_hover_color?>;
}

.br-box-page {
  color: #333333;
  background-color: #dddddd;
}

.br-box-page a {
  color: #0000dd;
}

.br-box-page a:hover {
  color: #0000ff;
}

Color Scheme

<div class="br-box-page">
  <p>
    Hello there,
    here is a <a href="#">link</a>
  </p>
</div>

Hello there, here is a link

Color Scheme

<?php /* common.css.php */ ?>
.br-page-bg-ontext {
  color: <?=$branding->page_bg_color?>;
}

.br-page-link-onbg {
  background-color: <?=$branding->page_link_color?>;
}

.br-page-linkhover-onbg--hover:hover {
  background-color: <?=$branding->page_link_hover_color?>;
}

.br-page-bg-ontext {
  color: #dddddd;
}

.br-page-link-onbg {
  background-color: #0000dd;
}

.br-page-linkhover-onbg--hover:hover {
  background-color: #0000ff;
}

Color Scheme

<div class="br-box-page">
  <p>Regular box</p>
</div>
<div class="br-page-bg-ontext
br-page-text-onbg">
  <p>Inverted styles</p>
</div>
<div class="br-page-bg-ontext
br-page-link-onbg
br-page-linkhover-onbg--hover">
  <p>Block link</p>
</div>

Regular box

Inverted styles

Block link

TL;DR

  • Formalise your design system
  • Implement reusable abstractions
  • You probably don't need to do something so dang complicated

Thank You

Any Questions?

Ben Scott / @BPScott

reload.me.uk/talk-branding-at-the-bbc