GEL: Laying the Foundation

GEL is the BBC's shared design language. This presentation guides you through the process of turning the GEL Foundations from PDF guidelines into reusable code libraries used across the BBC.

Transcript

1. GEL: Laying the Foundations { develop: BBC } 2016 Al Jones & Shaun Bent
3. Chapter 1. 
 A recipe for typography
4. LIVE Menu LIVE News Sub Navigation Sub Navigation Synoptical index text 16/20. Description of live event event goes here. Description of live event event goes here. 05 Sep 2013 | 19:00 BST Sub header 20/24 Coverage Info All times BST 00:00 – Coverage info 14/16 18:00 – BBC ONE, Programme 18:00 – Five Live, Programme Live event title 24/28 Tab 14px Tab 14px Tab 14px Programme name 14px | CHANNEL 12PX Live event titl Programme name 14px | C 18:00 – Five Live, Programm Synoptical index text 16/ here. Description of live e 05 Sep 2013 | 19:00 B Sub header 20/24 Coverage Info All times B 00:00 – Coverage info 14/16 18:00 – BBC ONE, Program 18:00 – Five Live, Programm Tab 1 Event Info 72px height #000000 72px height #000000 50% opacity Media CTA Hover / focus state The Redline 
 Document
5. 28/32 32/36 52/56 44/48 20/24 24/28 36/40 32/36 20/24 20/24 20/24 26/30 24/28 18/22 18/22 21/24 20/24 15/20 16/20 18/24 16/20 15/18 15/18 15/20 14/18 14/16 14/18 14/18 13/16 13/16 12/16 12/16 12/16 15/20 16/22 18/24 16/22
7. Canon Trafalgar Double Pica Great Primer Pica Long Primer Brevier Minion
8. .gel-canon .gel-trafalgar .gel-double-pica .gel-great-primer .gel-pica .gel-long-primer .gel-brevier .gel-minion
9. Chapter 2. 
 Reducing duplication
10. SPORT
12. LIVE
15. A typography abstraction
16. /** * 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); } }
17. Chapter 3. 
 GEL Typography
18. NEWS
19. ~30 Languages
20. ~30 Languages ~15 Non Latin Languages
21. Start from scratch!
22. // 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 ), … ) );
23. // 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 ), … ) );
24. Chapter 4. 
 Growth
25. github.com/bbc
26. Why build your own?
27. HOMEPAGE SEARCH TRAVEL LIVE ACADEMY FOOD MyBBC R&D
28. Contributions
29. Contributions 21 developers, across 11 different teams
30. Chapter 5. 
 GEL Foundations
35. Open Source
36. Done!