Edit meta-pattern Edit layout

Sample pages and templates for v1.2

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

There is a newer version of these templates

These samples reference v1.2 of the EBI Visual Framework. See the newer samples here

On this page

Loading...

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 implementation.
  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 custom JS.
  4. Bootstrap
    If you're a Bootstrap user unable or not interested in using the bundled Foundation Framework CSS+JS, here we bundle the bare-bones lite version with Bootstrap.
  5. jQuery UI
    Use jQuery UI.
  6. Angular
    Use jQuery UI.
  7. Poodles
    Yep.

Sample Level 1 implementations

Live sites using the full version of the EBI Framework.

  1. EMBL-EBI Homepage
  2. EMBL-EBI Research page Drupal

Sample 3rd party implementations

Live sites that don't show EBI as a parent organisation.

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