EBI Pattern libraries overview
-
Upload
embl-ebi-web-development -
Category
Design
-
view
81 -
download
0
Transcript of EBI Pattern libraries overview
![Page 1: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/1.jpg)
February 2017
EBI Pattern Libraries
![Page 2: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/2.jpg)
It’s just documentation.Don’t panic
![Page 3: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/3.jpg)
- 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?
![Page 4: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/4.jpg)
What makes up a library?
![Page 5: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/5.jpg)
It’s just documentation.
It can fit your (shared, agreed) way of thinking.
Don’t panic(once more)
![Page 6: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/6.jpg)
What makes up a library?- Small atoms
(buttons, tiles, input elements, etc.)
- Groups (slideshows, forms, news items, etc.)
- Pages (contact page, front page)
REDUX
![Page 7: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/7.jpg)
You don’t have to do everything!- Leverage the EBI Pattern Library!
http://lmgtfy.com/?q=EBI+Pattern+Library
![Page 8: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/8.jpg)
How we’re usingNow for some examples on ebi.ac.uk...
![Page 9: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/9.jpg)
Examples - combining
“input-group”
Icon label Button
![Page 10: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/10.jpg)
Examples
“Image shortcut”
![Page 11: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/11.jpg)
Examples
“Images with tinting”Builds off “Image shortcut” pattern
![Page 12: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/12.jpg)
Examples
“Intro box”Built with base text styling + “lead” text style
![Page 13: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/13.jpg)
Examples
“Button grid”Made of, you guessed it, buttons.
![Page 14: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/14.jpg)
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)
![Page 15: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/15.jpg)
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...
![Page 16: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/16.jpg)
What to focus on?
- Small atoms (buttons, tiles, input elements, etc.)
- Groups (slideshows, forms, news items, etc.)
- Pages (contact page, front page)
![Page 17: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/17.jpg)
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!
![Page 18: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/18.jpg)
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...
![Page 19: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/19.jpg)
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)
![Page 20: EBI Pattern libraries overview](https://reader034.fdocument.pub/reader034/viewer/2022051520/58cf46431a28ab254a8b6435/html5/thumbnails/20.jpg)
End