EBI Pattern libraries overview
Download as PPTX, PDF0 likes164 views
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.
More Related Content
Viewers also liked (9)
Similar to EBI Pattern libraries overview (20)
Recently uploaded (20)
EBI Pattern libraries overview
- 1. February 2017 EBI Pattern Libraries
- 2. Its just documentation. Dont panic
- 3. - reusability/how to/documentation - what do we call things? - testability - consistency for users Again, its documentation you dont have to but you really should. Why a pattern library?
- 4. What makes up a library?
- 5. Its just documentation. It can fit your (shared, agreed) way of thinking. Dont 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 dont have to do everything! - Leverage the EBI Pattern Library! http://lmgtfy.com/?q=EBI+Pattern+Library
- 8. How were using Now for some examples on ebi.ac.uk...
- 9. Examples - combining input-group Icon label Button
- 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 - Well hoover in your patterns (where appropriate)
- 20. End