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
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
340
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
380
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
340
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Visualization
eitanlees
148
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
The Language of Interfaces
destraynor
161
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
BBQ
matthewcrist
89
9.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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