Framework sample pages

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


Boilerplates

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

Want to not 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. Poodles
    Yep.
  7. Inject the styles
    If you don't care about performace, we can inject CSS, JS, and HTML for you.

Sample Level 1 implementations

Examples of services aiming for full compliance.

  1. EBI Homepage
    Porting the EBI Homepage.
  2. Research page Drupal
    Porting the EBI Research page.
  3. Brochure page
    A high-impact brochure-style page for technical hiring.
  4. Expression Atlas Bootstrap
    Here we show a sample migration of a service, note that the service's use of bootstrap does not cause issue.