All EMBL-EBI Patterns

Meta patterns

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

General guidelines for making your site and service accessible basic guidelines
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
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
A user experience consists of how a person feels. It is primarily made up of usability, branding, functionality and content. usability

General patterns

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
To come visuals
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
Formatting content layout grid layout
To come typography writing
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
Use a label to signify a section. labels
Lists - pulse
To come typography 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
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
A table is a table, and sometimes, you just need to use a table. typography tables
Here's a simple tab implementation. layout navigation
Evolved from a label, is a tag. Meant to be linked and used in sequence. labels