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 the BBC - Front End North 2014
Search
Shaun Bent
November 15, 2014
Technology
1
160
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
98
GEL: Laying the Foundation
shaunbent
0
30
Responsive Web Design at the BBC - 2015 - Lancaster University
shaunbent
0
170
Introduction to Responsive Web Design at the BBC - 2014 - Lancaster University
shaunbent
1
99
Other Decks in Technology
See All in Technology
Autify Company Deck
autifyhq
1
30k
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
21
4.1k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.6k
AFTを運用していたらAWS Configの課金が急増していた件
msato
0
100
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
450
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
490
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
210
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
830
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
What's in a price? How to price your products and services
michaelherold
236
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
A Tale of Four Properties
chriscoyier
150
22k
Done Done
chrislema
178
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Teambox: Starting and Learning
jrom
126
8.4k
Clear Off the Table
cherdarchuk
82
310k
Building Your Own Lightsaber
phodgson
97
5.6k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
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