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.

Transcript

1. Reducing duplication and driving consistency at the BBC Front End North 15th November 2014
2. Shaun Bent Front End Developer Specialising in CSS for large sites Look 12 without this ginger beard! @shaunbent
3. SPORT
4. LIVE
7. NEWS SPORT LIVE WEATHER SEARCH HOMEPAGE ABOUT THE BBC TRAVEL MUSIC Bitesize ARTS FOOD NEWSBEAT PROGRAMMES Radio
8. GEL
9. Global Experience Language
16. GEL Responsive Typography
18. Where this all began… Responsive Typography
19. Bridging the language gap Responsive Typography
21. 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
22. SPORT
24. LIVE
27. Abstract a standard typography implementation Works out of the box Pulled into Sport using a package manager Responsive Typography
28. /** * 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); } }
29. NEWS
31. Rebuild from scratch Allow for complete customisation of the typography values Continues to work out of the box Responsive Typography
32. // 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 ), … ) );
33. // 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 ), … ) );
34. So how are we doing? Responsive Typography
35. SPORT LIVE
36. SPORT LIVE
37. SPORT LIVE SEARCH & HOMEPAGE
38. GEL as Code
39. Highly configurable code abstraction of a foundational GEL guideline GEL as Code
40. 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
41. Reduced development effort Increasing re-use across the business Ease of rolling out updates GEL as Code
42. Where next?
43. Proof of concept Build more foundations Increase adoption around the BBC Where next?
44. Settings Tools Typography Grid Where next?
45. Settings Tools Typography Grid Where next?
46. Settings Tools Typography Grid Where next?
47. Settings Tools Typography Grid Where next?
48. Make it Open Source Where next?
49. Al Jones (@itsaljones) Will Bamford (@WebSeed) Joe Walker (@josephwalker) GEL, Sport & Live Team Credit where credits due!
50. Thank You