All EMBL-EBI Patterns

Meta patterns

These are documentation-style patterns that affect how, where, and when you should use general patterns.

Accessibility
General guidelines for making your site and service accessible basic guidelines
Analytics
When and how best to use Google Analytics, Piwik, or server side tracking usability
Browser and device compatibility
What browsers, mobile phones, tablet, and ponies you need to support usability devices
Forms
Guidance on structuring form layouts, tips, submission verification and much more! layout forms
Helper classes
This grab bag of odds-and-ends classes will help you create a layout that works for your page's needs. typography layout
Masthead compact
For pages where the interface needs to get out of the way so users can focus on the data. navigation layout
Page structure
The layout used by the Framework is a wrapper that helps structure your page. layout navigation
Sample pages
These demonstrate a range of ways you can make use of the EBI styles and framework. layout
Screen sizes
How large are most user screens? Where is the 'fold'? layout usability devices
Usability
A user experience consists of how a person feels. It is primarily made up of usability, branding, functionality and content. usability

General patterns

Animations
Oooo, pretty. visuals usability
Badges and buttons
All buttons are badges, but not all badges are buttons buttons links labels
Button grid
Build an arangement of buttons as a clickable matrix. buttons links layout organisms
Code highlighting
If you need to showcase snippets of code, here's how to. typography
Colours (embl-ebi)
Core EMBL-EBI colours visuals
Custom spacing
Utility classes to space out your elements grid layout
Data tables
Showcase a lot or a little amount of numbers, images, graphics. tables data visulisation
Favicons
To come visuals
Formatting
A quick index of styles. With a variety of text comes the need for many formatting styles, use this table as a helper. typography writing
Grid
Formatting content layout grid layout
Headlines
To come typography writing
Icons
The fonts.css stylesheet automatically loads a range of icon fonts that you can use typography visuals
Image shortcuts
To come layout visuals images
Images with captions
For images inserted inside text areas, you can use make a div.thumbnail wrap an image and a div.caption to add subtle padding and spacing. layout visuals images
Images with tinting
You can enhance the "Images with captions" pattern by adding class .with-overlay for a darkened effect with a text overlay. layout visuals images
Intro unit
Highlight the key narrative. typography layout
Labels
Use a label to signify a section. labels
Lists - pulse
To come typography lists
Lists
To come typography lists
Live filtering
If you have mutliple rows of data you'd like the use to be able to quickly sift through (perhaps combining with table sorting) we bundle the aptly named LiveFilter plugin. It is not loaded by default and you'll need to load LiveFilter/js/jquery.liveFilter.js. typography search
Meta copy
To come search writing visuals
Pullquotes
Also known as a "blockquote", use this to draw attention to text typography organisms
Responsive tables
Want to make your table mo-betta on small screens? tables
Select box
Configurable select box/text input forms
Sorting tables
A prescriped solution to sort your tables tables
Tables
A table is a table, and sometimes, you just need to use a table. typography tables
Tabs
Here's a simple tab implementation. layout navigation
Tags
Evolved from a label, is a tag. Meant to be linked and used in sequence. labels

All patterns

See also

These resources will help you engage and understand the EBI Framework.