The framework uses modern best practices and targets browsers shipped within the past three years (<ahref="{{root}}websites/meta-patterns/browser-compatibility.html"class="">more on browser support</a>); though other browsers will function through the an implementation of [graceful degradation](https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement).
We use best practices and targets browsers shipped within the past three years (<ahref="{{root}}websites/meta-patterns/browser-compatibility.html"class="">more on browser support</a>); though other browsers will function through the an implementation of [graceful degradation](https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement).
To help us help you, we've used the [Foundation Framework](https://foundation.zurb.com/sites/docs/kitchen-sink.html#accordion) (version 6) as a baseline. Using this we get a robust baseline (tool tips, forms, sliders, and modal boxes) as well as technical guidance and extensive open source community testing -- and, perhaps, you'll be fortunate enough to already be (or have) a developer with Foundation experience.
Foundation is bundled by default, but [is not required]({{root}}websites/sample-site/integrations/lite.html).
### Framework components
This framework functions similar to many front-end solutions: several files and structures are used and generally can be implemented separately so you can use what you can or your own solution if required. We also leverage a NPM build process so there's no need to use all of the Foundation framework, if you don't need it.
<aclass="button secondary columns small-6 small-push-1"href="css/theme-embl-petrol.css">Custom CSS<br/><small> Colours and patterns specific to your service/site</small></a>
<!-- todo: come up with a pattern to bottom align columns, or do we hold out for v1.2 and switch to flex gird? http://foundation.zurb.com/sites/docs/flex-grid.html -->
<aclass="button primary columns small-12"href="{{root}}websites/meta-patterns/page-structure.html">Core HTML structure<br/><small>The basic HTML tag structure for the page (global-nav black bar, local-nav area, main content div, footer, etc)</small></a>
</div>
</div>
<p>
<small>Stack legend</small><spanclass="tag secondary-background white-color">Optional, but recommended</span><spanclass="tag white-color">Required</span>
</p>
### Implementing the EBI Visual Framework
{{/markdown}}
...
...
@@ -71,57 +119,6 @@ Foundation is bundled by default, but [is not required]({{root}}websites/sample-
{{#markdown}}
### Framework components
This framework functions similar to many front-end solutions: several files and structures are used and generally can be implemented separately so you can use what you can or your own solution if required. We also leverage a NPM build process so there's no need to use all of the Foundation framework, if you don't need it.
<aclass="button secondary columns small-6 small-push-1"href="css/theme-embl-petrol.css">Custom CSS<br/><small> Colours and patterns specific to your service/site</small></a>
<aclass="button secondary columns small-8"href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-extras.css">Optional foundation styles<br/>
<small>Additional styling for modals, buttons, etc.</small></a>
<!-- todo: come up with a pattern to bottom align columns, or do we hold out for v1.2 and switch to flex gird? http://foundation.zurb.com/sites/docs/flex-grid.html -->
<aclass="button primary columns small-12"href="{{root}}websites/meta-patterns/page-structure.html">Core HTML structure<br/><small>The basic HTML tag structure for the page (global-nav black bar, local-nav area, main content div, footer, etc)</small></a>
