The document discusses establishing a pattern library for documentation purposes. It emphasizes that a pattern library is simply documentation and not something to be anxious about. The library should include small reusable elements, groups of elements, and page templates. Examples are provided of patterns combining elements and styles. Considerations for naming patterns to reflect their functions rather than aesthetics in a way that can be reflected in code are also discussed. Next steps include making the library ongoing and collaborative.

1. February 2017
EBI Pattern Libraries

2. It’s just documentation.
Don’t panic

3. - 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?

4. What makes up a library?

5. It’s just documentation.
It can fit your (shared, agreed) way of thinking.
Don’t panic
(once more)

6. What makes up a library?
- Small atoms
(buttons, tiles, input elements, etc.)
- Groups
(slideshows, forms, news items, etc.)
- Pages
(contact page, front page)

7. You don’t have to do everything!
- Leverage the EBI Pattern Library!
http://lmgtfy.com/?q=EBI+Pattern+Library

8. How we’re using
Now for some examples on ebi.ac.uk...

9. Examples - combining
“input-group”
Icon label Button

10. Examples
“Image shortcut”

11. Examples
“Images with tinting”
Builds off “Image shortcut” pattern

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

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

14. 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)

15. 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)

16. What to focus on?
- Small atoms
(buttons, tiles, input elements, etc.)
- Groups
(slideshows, forms, news items, etc.)
- Pages
(contact page, front page)

17. What to focus on?
- Small atoms
(buttons, tiles, input elements, etc.)
- Groups
(slideshows, forms, news items, etc.)
- Pages
(contact page, front page)

18. Intermission

19. 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)

20. End