EBI Pattern library

Browse through this guide to become familiar with the EMBL-EBI website “personality” and refer to it for guidance and code examples when building and extending your site’s functionality.

You won’t find prescriptive solutions for every scenario, but examples and guidance on a wide range of pull quotes, form boxes, menus, and more to show you how things should be done, including more complex things like analytics[coming soon] and page structure.

On the right you’ll find a list of the patterns, and below your can read background on the pattern library.

Implementing

There are two likely scenarios:

Implementing a new project?

If you’re starting from scratch, check out the collection of boilerplate code, check out the source, and get going. To the sample pages Learn about the EMBL-EBI page structure

Updating an existing site?

If you’re updating an EBI Compliance theme site, you’ll just need to replace a few JS/CSS files, change some layout classes, and make minore tweaks. It could take as little as 30 minutes. Run your own sample auto-migration

Requirements and what you get

Do as I do, not as I say. This pattern library

The framework uses modern best practices and targets browsers shipped within the past three years (more on browser support); though other browsers will function through the an implementation of graceful degradation. The framework is also mobile responsive (Responsive Web Design), so you won’t have to spend too much time adapting for mobile.

To help us help you, we’ve used the Foundation Framework (version 6) as a baseline. Using this we get a robust baseline (tool tips, forms, sliders, and modal boxes) as well as technical guidance and extensive open source community testing – and, perhaps, you’ll be fortunate enough to already be (or have) a developer with Foundation experience.

We’ve taken care to make the implementation very passive, so if you don’t want to use these features they won’t likely get in your way.

The easiest way to implement the style guide is to follow the EBI boilerplate – use those HTML files as a template for your own pages. It contains the HTML for the EBI header, footer, place holders for your project name/logo and page content. And be sure to read up on the EMBL-EBI page strucutre

Framework components

This framework functions similar to many front-end solutions: several files and structures are used and generally can be implemented separately so you can use what you can or your own solution if required. We also leverage a NPM build process so there’s no need to use all of the Foundation framework, if you don’t need it.

In short: add header markup, footer markup, CSS and JS. Then add content.

To get started check out the structure of the sample boiler plate page.

FAQs

JavaScript

The framework does not require jQuery, but using it will get more nice to haves easing your life. The boilerplate includes jQuery functionality by default, if you do not wish to use jQuery you will also need to remove references to foundation.js and FoundationExtendEBI.js files.

Foundation

If you aren’t able to use the included Foundation base CSS, we do provide some support for other frameworks (such as Bootstrap), but we’ve picked Foundation as the “recommended implementation” as it offers a path for more graceful integration of EBI styles and requirements.

If you’re unable to make use of the Frameworks JS or CSS tooling, use this page as a guide for how your site should look, feel, function. There’s no reason that can’t be done with any framework be it Angular, Material Design, or vanilla CSS3.

For new websites or major reworks, we recommend you consider using the included Foundation CSS and JS, as you’ll get more benefit from the work done in this framework, encounter fewer bugs, and help EBI web services have a more consistent function and feel.

Bootstrap

While the front-end framework provides a robust set of tooling and a broader use base, its base styling is more opinionated (121KB vs 43KB of minified baseline CSS). Foundation allows us to provide a slimmer and faster EBI theme layer. Further, non-jQuery using developers will find more benefit in a Foundation-powered ecosystem. For Bootstrap users unfamiliar with Foundation, you might read this comparison (note that it references the slightly older version of Foundation 5, but is substantially the same for the article’s proposes).

Need help?