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
Loading...
Boilerplate templates
You can use these as templates for your code.
- Blank
big, empty space between header and footer - Ultra wide
for content with large table or graphics that benefit from using as much screen space as they can get - Right sidebar
for content-driven pages deeper in your site's hierarchy, the sidebar could contain secondary navigation - 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 - Theme your site
massage the look and feel
Technical integrations
Don't want to use Foundation JS, jQuery, use Bootstrap instead, jQuery UI, or power your site with a poodle? Find inspiration below.
- No jQuery or Foundation JS
You won't benefit from many of the reusable components, but here's a bare bones visual implementation. - Latest jQuery
Want to use jQuery 2.x? - Lite version
Load just the basic styling and skip formatting for things like tabs, tables, and custom JS. - 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. - jQuery UI
Use jQuery UI. - JS Frameworks like AngularJS, React, Ember.js, Vue.js
Basic guidance with dos and don'ts. - Angular 4
A simple boilerplate that does the basics. - Poodles
Yep.
Sample Level 1 implementations
Live sites using the full version of the EBI Framework.
Sample 3rd party implementations
Live sites that don't show EBI as a parent organisation but utilise the EBI Visual Framework.