Edit meta-pattern Edit layout

Make websites

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.

Edit section

You won't find prescriptive solutions for every scenario, but you will get 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 and page structure.

On this page

Loading...

Do as I do, not as I say. The Style Lab

We use best practices and targets browsers shipped within the past three years (more on browser support); other browsers will function through graceful degradation.

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.

Custom CSS
Colours and patterns specific to your service/site Additional styles ebi-extras.css
Modals, callouts, tabs: mostly from Foundation. EBI Icons fonts.css
Functional and scientific EBI base CSS styles ebi-lite.css
EMBL-EBI look, colours Base styling ebi-lite.css
The base grid structure, core page styling
FoundationExtendEBI.js
Foundation tweaks, jQuery value adds foundation.js jQuery 1.10.2
Or newer, or slightly older
EBI script.js
JavaScript
Core HTML structure
The basic HTML tag structure for the page (global-nav black bar, local-nav area, main content div, footer, etc)

Stack legend Optional, but recommended Required

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.

Foundation is bundled by default and highly encouraged, but is not required. You can learn more about why we selected Foundation in the FAQ below.

Implementing the EBI Visual Framework

FAQs

  • JavaScript: Do I have to use jQuery?

    The EBI Visual Framework does not require jQuery, but using it will make things far easier. The boilerplate includes jQuery functionality by default, if you do not wish to use jQuery you will also need to remove references to the foundation.js and FoundationExtendEBI.js files.

  • Zurb Foundation Framework and Bootstrap

    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.

    While Bootstrap provides a robust set of tooling and a broader use base, its base styling is more opinionated (121KB vs 43KB of minified baseline CSS). Zurb 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).

    • If you aren't able to use the included Foundation base CSS, use ebi-lite.css
    • 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.
  • Integrating with other CSS and JS frameworks

    We've worked to make the EBI Visual Framework work well alongside other frameworks.

    Users of Angular, Bootstrap, and other opinionated implementations should look at the "Technical Integrations" on the sample pages.

Need help?

For questions about the background of this guide or a philosophical suggestion post to the issue queue for discussion and support.

Note that the EBI Web Guidelines Committee is responsible for the governance and direction of the patterns and framework.

Further reading

These are concepts that will run throughout your website project.

See the Code