76.4 million weekly visitors to BBC News - 64% comes from outside UK
BBC Worldwide 29 Site 58.8 million users 99.3% outside UK
World Service 2020 -- 12 new services / sites
BBC user targets: 2022 half a billion, online target of 170 million.
- what it means
- lots of users
- lots of pages
- what it needs
- easy to rest
- localisable
- lightweight
focussing on lightweight, localisable, easy to use
localisable -- language translation, content, and direction
If you start out by thinking about these needs and building them into the systems as we go - it's easier than shoe-horning them at the end
Grandstand - a Sass based CSS architecture and framework, built by BBC Sport which contains:
- objects
- utilities
- sass tools
- gel grid
- gel typography
- gel iconography
Objects: an example, three patterns:
- live pulse
- timestamp
- media
drilling down to similar parts of these three patterns
- an icon
- spacing
- some text
a bullet pattern, because it looks like bullet points, a shared vocabulary
why pull out this pattern from three patterns?
- don't want components with repeated CSS
"Namespace all the things"
gs- for all grandstand classes gs-o for all objects within grandstand e.g. gs-o-bullet, gs-o-bullet__icon
What else does Grandstand include?
Utilities
gs-u- margin, padding, display, float
gs-u-mr which includes spacing, 4px/6px/8px etc standard spacing units to avoid the odd pixel here and there being implentend - for consistency.
Sass Tools
colour variables - $bw-c-ebon: #222; mixing - flip and calc
GEL Typography, Grid, Iconography
Global Experience Language
typography - canon, trafalgar, double pica, great primer, pica, long primer, brevier, minis
grid
icons
the hierarchy for Grandstand is actually
GEL Grid GEL Typography GEL Iconography Objects Utilities Sass Tools
name-spacing, a set of classes that don't overlap specific for what it does, not what it is (as such)
you add these generic classes different combination to build up your components
gel-waterloo -- typography gs-o-bulldt -- pattern style gs-u-mr -- add margin right
make it smaller by changing the type - gel-pica
Localisation:
- Content!
- Typography
- Layout
how do we allow our design system to cope with localisation
Typography is it enough to just choose a font?
- system fonts aren't that great as they're usually for Latin based language
- line-height - ascenders and descenders in other languages
- vertical rhythm - paragraph spacing (see above)
- at each breakpoint
Grid
direction: ltr; - text-align: left; job done?
use a Sass function to flip the left to right value so you're not duplicating 'all the codes'.
but for localising properties ... margin-right?
use Sass variables and interpolation -
#{$padding-right}: $gel-spacing-unit;
How to build your own Grandstand ...
localisation: Use Sass mixin & variables typography style & size
setup: standard spacing units breakpoints colour palette
lightweight: choose object patterns carefully do you really need that variation? communicate with others.
patterns.perchcms.com
Perch is 8 years old - the redesign
Perch allows for additional third-party add-ons so they sometimes have no control on how it looks.
"The Perch UI had to exist as a set of independent components that can be displayed in any order."
started with just HTML:
lots of duplication slow to make changes had to encode for display and keep up to date ... would we be likely to keep it up to date after launch as changes were painful?
Pattern library tooling: research showed that most were build to make a website -- not an 'app' or collection of components for an app.
what did we want?
- somewhere to document design decisions
- a system to organise and separate components
- something that would remain up to date
- something we could make available to third party add-on developers as a reference for add-ons
Fractal ... <3
it's pretty agnostic about what you're building, it doesn't really care what you're creating.
- it doesn't assume the shape of your projects
- leaves the organisation of components an naming to us
- it didn't dictate build tools
- allow documentation to be stored alongside
- could export to HTML
Pattern Library - as a source of truth
making a 'quick change' to the app -- I'll add that to the pattern library at the end of the week
Because of how fractal works - decided to use it as the single source of truth.
Fractal is where the CSS for the perch UI is built - you cannot edit it in the perch environment - it pulls the CSS from the pattern library. Stops temptation from quickly changing something.
Now moving everything to Fractal and having the CSS from within Fractal being the source of truth
Naming this is hard
had no better ideas - so started with Brad Frost's Atomic Design naming conventions.
Found that as Perch had so many little things - it was difficult to find things
Deciding on organising things by the 'type' of thing - typography, icons, forms, tables, etc.
Fractal helped build the UI without needing to build it into the application.
"Don't stress about naming. It will become clearer as you build."
Make sure you have a tool that lets you do this, let's you move things if/when you need to. (hot take - Fractal does this well)
Reduced Test Case First development
By working with a pattern library we've started to build the up to date experience with the up to date methods (grid/flexbox) ... if you build a float based layout and add grid on top you might as well not bother.
With a pattern library, when faced with a confusing broken mess, it allows us to strip it back to a reduced test case. The patterns in your pattern library are your reduced test case. Already.
Browser testing
work in the pattern library to test and fix each component in turn, starting with the smallest version. When you get to the main layouts you should find it 'just works'
Keep fallback code with the component in the pattern library. It ensures we don't end up moving the fallback after the new fun codes. Also, in the future, it will be easier to see what can be removed as browser support improves.
Pattern Libraries have transformed how I make websites.
- (as a developer) Designing a component seems less overwhelming than designing a whole site.
- Developing CSS in the Pattern Library makes CSS more manageable.
- Pattern Library first keeps the build process and the runtime process separate.
- Components are reduced test case. Allowing you to more easily embrace new techniques and deal with old browsers.
- Choose tools that allow you to refactor the pattern library as things change.
- Make the pattern library the spruce of truth nd it can't get out of date.