Edit meta-pattern Edit layout

Sample pages and templates for v1.3

These demonstrate a range of ways you can make use of the styles and framework.

These samples are for v1.3 of the EBI Visual Framework. Looking for v1.2?

On this page


Boilerplate templates

You can use these as templates for your code.

  1. Blank
    big, empty space between header and footer
  2. Ultra wide
    for content with large table or graphics that benefit from using as much screen space as they can get
  3. Right sidebar
    for content-driven pages deeper in your site's hierarchy, the sidebar could contain secondary navigation
  4. Search results
    an example page with filters or facets for your results in a left-hand sidebar, and a right-hand sidebar for global results
  5. Theme your site
    massage the look and feel

Technical integrations

Don't want to use Foundation JS, jQuery, use Boostrap instead, jQuery UI, or power your site with a poodle? Find inspiration below.

  1. No jQuery or Foundation JS
    You won't benefit from many of the reusable components, but here's a bare bones visual implentation.
  2. Latest jQuery
    Want to use jQuery 2.x?
  3. Lite version
    Load just the basic styling and skip formatting for things like tabs, tables, and custome JS.
  4. Bootstrap
    If you're a Bootstrap user unable or not interested in using the bundled Foundation Framework CSS+JS, here we bunndle the bare-bones lite version with Bootstrap.
  5. jQuery UI
    Use jQuery UI.
  6. JS Frameworks like AngularJS, React, Ember.js, Vue.js
    Basic guidance with dos and don'ts.
  7. Angular 4
    A simple boilerplate that does the basics.
  8. Poodles

Sample Level 1 implementations

Live sites using the full version of the EBI Framework.

  1. EMBL-EBI Homepage
  2. Expression Atlas

Sample 3rd party implementations

Live sites that don't show EBI as a parent organisation but utilise the EBI Visual Framework.

  1. IMEX (International Molecular Exchange Consortium)
  2. PDX Finder
See the Code