February 2017

EBI Pattern Libraries

It’s just documentation.Don’t panic

- reusability/how to/documentation- what do we call things? - testability- consistency for users

Again, it’s documentation — you don’t have to but you really should.

Why a pattern library?

What makes up a library?

It’s just documentation.

It can fit your (shared, agreed) way of thinking.

Don’t panic(once more)

What makes up a library?- Small atoms

(buttons, tiles, input elements, etc.)

- Groups (slideshows, forms, news items, etc.)

- Pages (contact page, front page)

REDUX

You don’t have to do everything!- Leverage the EBI Pattern Library!

http://lmgtfy.com/?q=EBI+Pattern+Library

How we’re usingNow for some examples on ebi.ac.uk...

Examples - combining

“input-group”

Icon label Button

Examples

“Image shortcut”

Examples

“Images with tinting”Builds off “Image shortcut” pattern

Examples

“Intro box”Built with base text styling + “lead” text style

Examples

“Button grid”Made of, you guessed it, buttons.

Considering names• Not too abstract

(shouter < intro box)• Reflect the function over aesthetic

(pink blurb < news highlight)• Avoid HTML tag names

(small text < caption text)• Best if names can be used/reflected in code

(i.e. “caption text” = .caption)

Considering names• Not too abstract

(shouter < intro box)• Reflect the function over aesthetic

(pink blurb < news highlight)• Avoid HTML tag names

(small text < caption text)• Best if names can be used/reflected in code

(i.e. “caption text” = .caption)

Pro tip:You don’t have to make final name today. Gather list of options, pin them to the wall*, revise and vote on them as a team.

*Real, or Slack, or GitHub issue...

What to focus on?

- Small atoms (buttons, tiles, input elements, etc.)

- Groups (slideshows, forms, news items, etc.)

- Pages (contact page, front page)

What to focus on?

- Small atoms (buttons, tiles, input elements, etc.)

- Groups (slideshows, forms, news items, etc.)

- Pages (contact page, front page)

Pretty common across all EBI sites, (soon) you can

leverage the common EBI pattern library.

Very specific to each service

and you likely will only have

one or two of each of these.

But there may be exceptions!

IntermissionFocus on “groups” of

patterns/atomsSlideshows, forms, news

items, etc.

Small atoms are likely too

specific and redundant with

Foundation and EBI

patterns.

Document the best practiceAgree on what things should be like — and deviate as needed.

Don’t redocument everything! Would you re-document the Google Maps API?

Document what is unique to your code and service.

How to name?- Not too abstract- Function over aesthetic- Best if names can be used/reflected in code

Revise & decide tomorrow

You don’t have to make final

name today. Gather list of

options, pin them to the

wall*, revise and vote on

them as a team.

*Real, or Slack, or GitHub

issue...

Next steps- Not a one off, ongoing (like documentation!)- Find a collaborative way to do this. dip in, dip out.

- For ebi we use jekyll + gh-pages- Let us know how you get on

- We’ll hoover in your patterns (where appropriate)

End