Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reducing duplication and driving consistency at...
Search
Shaun Bent
November 15, 2014
Technology
1
180
Reducing duplication and driving consistency at the BBC - Front End North 2014
Reducing duplication and driving consistency at the BBC through shared common CSS abstractions.
Shaun Bent
November 15, 2014
Tweet
Share
More Decks by Shaun Bent
See All by Shaun Bent
CSS Trickery at the BBC - 2016 - MMU
shaunbent
2
110
GEL: Laying the Foundation
shaunbent
0
41
Responsive Web Design at the BBC - 2015 - Lancaster University
shaunbent
0
180
Introduction to Responsive Web Design at the BBC - 2014 - Lancaster University
shaunbent
1
120
Other Decks in Technology
See All in Technology
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
テストを軸にした生き残り術
kworkdev
PRO
0
220
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
人工衛星のファームウェアをRustで書く理由
koba789
15
8.3k
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
260
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
660
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
roppongirb_20250911
igaiga
1
250
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
570
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Faster Mobile Websites
deanohume
309
31k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
A better future with KSS
kneath
239
17k
Become a Pro
speakerdeck
PRO
29
5.5k
BBQ
matthewcrist
89
9.8k
Rails Girls Zürich Keynote
gr2m
95
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Music & Morning Musume
bryan
46
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Navigating Team Friction
lara
189
15k
Transcript
Reducing duplication and driving consistency at the BBC Front End
North 15th November 2014
Shaun Bent Front End Developer Specialising in CSS for large
sites Look 12 without this ginger beard! @shaunbent
SPORT
LIVE
None
None
NEWS SPORT LIVE WEATHER SEARCH HOMEPAGE ABOUT THE BBC TRAVEL
MUSIC Bitesize ARTS FOOD NEWSBEAT PROGRAMMES Radio
GEL
Global Experience Language
None
None
None
None
None
None
GEL Responsive Typography
None
Where this all began… Responsive Typography
Bridging the language gap Responsive Typography
None
Trafalgar (.gel-trafalgar) Double Pica (.gel-double-pica) Great Primer (.gel-great-primer) Pica (.gel-pica)
Long Primer (.gel-long-primer) Brevier (.gel-brevier) Minion (.gel-minion) Responsive Typography
SPORT
None
LIVE
None
None
Abstract a standard typography implementation Works out of the box
Pulled into Sport using a package manager Responsive Typography
/** * Trafalgar - typically used for the main page
heading or article heading. */ .#{$gel-namespace}trafalgar, %#{$gel-namespace}trafalgar { @include font-size(20px, 24px); @include rem('letter-spacing', -1px); font-weight: bold; } /** * Group B - Sizes applied are applied at 320px */ @include mq($from: $gel-group-b-breakpoint) { .#{$gel-namespace}trafalgar, %#{$gel-namespace}trafalgar { @include font-size(24px, 28px); } }
NEWS
None
Rebuild from scratch Allow for complete customisation of the typography
values Continues to work out of the box Responsive Typography
// Default GEL typography configuration $gel-type-settings: ( 'trafalgar': ( 'group-a':
( 'font-size': 20px, 'line-height': 24px, '-bold': ( 'font-weight': bold, 'letter-spacing': -1px ) ), 'group-b': ( 'font-size': 24px, 'line-height': 28px ), … ) );
// Burmese GEL typography configuration $gel-type-settings: ( 'trafalgar': ( 'group-a':
( 'font-size': 22px, 'line-height': 30px, '-bold': ( 'font-weight': bold, 'letter-spacing': -1px ) ), 'group-b': ( 'font-size': 26px, 'line-height': 36px ), … ) );
So how are we doing? Responsive Typography
SPORT LIVE
SPORT LIVE
SPORT LIVE SEARCH & HOMEPAGE
GEL as Code
Highly configurable code abstraction of a foundational GEL guideline GEL
as Code
Standalone implementation which can be versioned and used by all
BBC products Encouraging a standardised approach to type Delivering a consistant typographic experience to the audience GEL as Code
Reduced development effort Increasing re-use across the business Ease of
rolling out updates GEL as Code
Where next?
Proof of concept Build more foundations Increase adoption around the
BBC Where next?
Settings Tools Typography Grid Where next?
Settings Tools Typography Grid Where next?
Settings Tools Typography Grid Where next?
Settings Tools Typography Grid Where next?
Make it Open Source Where next?
Al Jones (@itsaljones) Will Bamford (@WebSeed) Joe Walker (@josephwalker) GEL,
Sport & Live Team Credit where credits due!
Thank You