After six months of EMBL-EBI community planning, development, and testing, today v1.2 of the EMBL-EBI Visual Framework is ready for production.

The new version builds atop v1.1 released in Dec 2016 and brings a great deal of polishing and improvements to the distributed tooling that allows EMBL-EBI websites and services to adopt the EMBL-EBI look and share tested functionality.

Some highlight changes in v1.2:

• Wider desktop default: from 75rem (1180px) to 80rem (1260px)
• A new “lite” version that pairs well with Bootstrap, Angular, or other opinionated front end systems/tools
• Improvements to `.is-visible` classes
• Compressible masthead
• Improve stickiness of menu bar
• Optimise foot.js script loading
• less spacing on black tab in global nav
• Less theming based on HTML IDs
• Nesting of the global and local masthead has been semantically improved and will make working with JS framework easier (like Angular, React)
• Updated to Foundation 6.3
• Removal of redundant Modernizr script
• General optimisation for speed and less HTML bloat
• Better data table support
• Added a multi-select UI component
• Added EBI Visual Framework to NPM
• `script.js` is now modular

Details on these at: https://github.com/ebiwd/EBI-Framework/issues/61

If you’re interested in migrating your site or service, check out the sample migration to v1.2. For sites on v1.1 it’s not mandated that you update, however bug fix efforts will be focused on v1.2 and no new features will come to v1.1. All new services should use v1.2.

You can see v1.2 in action now, it’s on the EMBL-EBI homepage or you can checkout the HTML boilerplates.

What’s next?

• Sharing patterns and guidance:
  We’re developing a new Style Lab to be a one-stop destination for all questions around the EMBL-EBI look and feel and reusable web patterns — learn more and get involved in the collaboration at http://www.ebi.ac.uk/style-lab/
• EMBL-EBI agnostic tooling:
  Perhaps coming as “v1.2.5”, we know there’s a lot of demand for EMBL-EBI affiliated teams that want to use the Framework’s tooling but politically don’t want to (or can’t) use the EMBL-EBI look. So we’ll be looking at how we can implement a “vanilla” variant, and provide guidance on how to change the look.
• The next version:
  We’re going to start roadmapping features for the next version (likely v1.3). If you have an idea or concern, post it to the GitHub issue queue.

Closing thought

The EMBL-EBI Visual Framework is partly about visual consistency across all EMBL-EBI sites and EMBL-EBI affiliated services, but it’s mostly about discovering, sharing, and collaborating on common use cases. It’s about making the tooling around buttons, tabs, tables, and forms consistent so we can focus on and pool efforts to solve more complicated front-end problems on the web.

Now that we have a more solid and shared “visual framework” we can start to look at creating and leveraging common interface elements. So we’re looking at making a solid pattern library for common HTML + JS and more complex things like Angular.

Interested? Post a note to GitHub or drop a note to me (Ken Hawkins, khawkins@ebi.ac.uk) and we can all pool thoughts online or book a meeting.