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
When and how best to use Google Analytics, Piwik, or server side tracking
Ebi search indexing
The EBI provides a global search service across most of the data sources available at the institute.
Guidance on structuring form layouts, tips, submission verification and much more!
This grab bag of odds-and-ends classes will help you create a layout that works for your page's needs.
The layout used by the Framework is a wrapper that helps structure your page.
These demonstrate a range of ways you can make use of the EBI styles and framework.
How large are most user screens? Where is the 'fold'?
Search seo guidelines
Search Engine Optimization (SEO) is a process of increasing exposure of the online content of a web site in Search Engine Result Pages (SERPs).
These guideline and recommendations help users to use all the search services at EMBl-EBI with consistency and fewer interface-driven complexities. This speeds development and increase the overall user experience (UX).
A user experience consists of how a person feels. It is primarily made up of usability, branding, functionality and content.
Build an arangement of buttons as a clickable matrix.
If you need to showcase snippets of code, here's how to.
Showcase a lot or a little amount of numbers, images, graphics.
A quick index of styles. With a variety of text comes the need for many formatting styles, use this table as a helper.
Formatting content layout
The fonts.css stylesheet automatically loads a range of icon fonts that you can use
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.
Images with tinting
You can enhance the "Images with captions" pattern by adding class .with-overlay for a darkened effect with a text overlay.
Highlight the key narrative.
Use a label to signify a section.
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
Also known as a "blockquote", use this to draw attention to text
Use these patterns to add search your project or subsite.
Configurable select box/text input
A table is a table, and sometimes, you just need to use a table.
Here's a simple tab implementation.