Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reducing duplication and driving consistency at the BBC - Front End North 2014

Shaun Bent
November 15, 2014

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

More Decks by Shaun Bent

Other Decks in Technology

Transcript

  1. Shaun Bent Front End Developer Specialising in CSS for large

    sites Look 12 without this ginger beard! @shaunbent
  2. NEWS SPORT LIVE WEATHER SEARCH HOMEPAGE ABOUT THE BBC TRAVEL

    MUSIC Bitesize ARTS FOOD NEWSBEAT PROGRAMMES Radio
  3. GEL

  4. 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
  5. Abstract a standard typography implementation Works out of the box

    Pulled into Sport using a package manager Responsive Typography
  6. /** * 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); } }
  7. Rebuild from scratch Allow for complete customisation of the typography

    values Continues to work out of the box Responsive Typography
  8. // 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 ), … ) );
  9. // 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 ), … ) );
  10. 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