diff --git a/content/pages/websites/sample-site/integrations/lite.html b/content/pages/websites/sample-site/integrations/lite.html
index 929d9b357b00c736b079bd0590b77c1e0f73867b..c50316f05d83e27812f17ca7745391975fe8ca47 100644
--- a/content/pages/websites/sample-site/integrations/lite.html
+++ b/content/pages/websites/sample-site/integrations/lite.html
@@ -278,7 +278,6 @@ layout: blank
<script defer="defer" src="//www.ebi.ac.uk/web_guidelines/js/script.js"></script>
-->
-
<script defer="defer" src="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.3/js/script.js"></script>
<!-- The Foundation theme JavaScript -->
@@ -289,7 +288,6 @@ layout: blank
<script type="text/JavaScript">$(document).foundationExtendEBI();</script>
-->
-
<!-- Google Analytics details... -->
<!-- Change UA-XXXXX-X to be your site's ID -->
<!--
@@ -300,6 +298,5 @@ layout: blank
});
</script>
-->
-
</body>
</html>
diff --git a/content/sections/websites_about.html b/content/sections/websites_about.html
index aaf4994e646af2c493df2fd50ea6c7ad295ce4f8..6b7671f52f0c88cbd3e5a24ee2d7511a61f035e0 100644
--- a/content/sections/websites_about.html
+++ b/content/sections/websites_about.html
@@ -12,32 +12,6 @@ You won't find prescriptive solutions for every scenario, but you will get examp
{{#markdown}}
-## Implementing the EBI Visual Framework
-
-The EBI Visual Framework is a collection of tempalte CSS and JS to get you started.
-
-**Implementing a new project?**
-<br/>Check out the collection of boilerplate code, check out the source, and get going.
- - <a href="sample-site" class="readmore">To the sample pages</a>
- - <a href="meta-patterns/page-structure.html" class="readmore">About the EMBL-EBI page structure</a>
- - Want to build a deeper implementation?
- - [CSS documentation](http://wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.3/css/styleguide/section-components.html) <span class="label">In development</span>
- - [JS documentation](https://github.com/ebiwd/EBI-Framework/blob/v1.3/js/documenation.md#table-of-contents) <span class="label">In development</span>
- - [Compile this into your project with NPM](https://www.npmjs.com/package/ebi-framework)
- - [Build a custom implementation with the Lifescience Framework](https://github.com/ebiwd/Lifesciences-framework)
-
-**Updating an existing site?**
-<br/>If you're updating an EBI Compliance theme site, you'll just need to replace a few JS/CSS files, change some layout classes, and make minore tweaks. It could take as little as 30 minutes.
- - <a href="https://raw.githubusercontent.com/ebiwd/EBI-Style-lab/master/content/pages/websites/sample-site/migrations/testMigration.js" class="readmore">Run a migration from the EBI-Compliance theme to v1.1</a>
- - <a href="https://github.com/ebiwd/EBI-Framework/issues/85" class="readmore">Updating from v1.1 to v1.2</a>
-
-**Using a CMS?**
-- For Drupal there is <a href="https://github.com/ebiwd/drupal_7_ebi_framework">a Drupal 7 theme you can use</a>.
-- For [WordPress there's also a theme](https://github.com/ebiwd/wordpress-ebi-visual-framework).
-- And if you like static sites and GitHub, [there's a Jekyll boilerplate](https://github.com/ebiwd/EBI-Boilerplate-Jekyll).
-
-## Requirements and what you get
-
<blockquote class="float-right lead quote ebi-color">
<span class="size-150">Do as I do, not as I say.</span>
<cite class="text-right">This pattern library</cite>
@@ -47,13 +21,57 @@ The framework uses modern best practices and targets browsers shipped within the
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).
+Foundation is bundled by default, but [is not required]({{root}}websites/sample-site/integrations/lite.html).
-We've taken care to make the implementation very passive, so if you don't want to use these features they won't likely get in your way.
+### Implementing the EBI Visual Framework
-The easiest way to implement the style guide is to <a href="{{root}}websites/sample-site/">follow the EBI boilerplate</a> -- use those HTML files as a template for your own pages. It contains the HTML for the EBI header, footer, place holders for your project name/logo and page content. And be sure to <a href="{{root}}websites/meta-patterns/page-structure.html" class="readmore">read up on the EMBL-EBI page strucutre</a>
+{{/markdown}}
-## Framework components
+<ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Basic examples</a>
+ <div class="accordion-content" data-tab-content>
+ <p>The easiest way to implement is by <a href="{{root}}websites/sample-site/">using a boilerplate page</a>. These pages will give you the mandatory HTML structure for the EBI header, footer along with place holders for your project name/logo and page content.</p>
+
+ Be sure to <a href="{{root}}websites/meta-patterns/page-structure.html" class="readmore">read up on the EMBL-EBI page strucutre</a>
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Want to build a deeper implementation?</a>
+ <div class="accordion-content" data-tab-content>
+{{#markdown}}
+- [Compile this into your project with NPM](https://www.npmjs.com/package/ebi-framework)
+- [Build a custom implementation with the Lifescience Framework](https://github.com/ebiwd/Lifesciences-framework)
+- [CSS documentation](http://wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.3/css/styleguide/section-components.html) <span class="label">In development</span> and [JS documentation](https://github.com/ebiwd/EBI-Framework/blob/v1.3/js/documenation.md#table-of-contents) <span class="label">In development</span>
+{{/markdown}}
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Updating an existing site</a>
+ <div class="accordion-content" data-tab-content>
+{{#markdown}}
+- <a href="https://raw.githubusercontent.com/ebiwd/EBI-Style-lab/master/content/pages/websites/sample-site/migrations/testMigration.js" class="readmore">Run a migration from the EBI-Compliance theme to v1.1</a>
+- <a href="https://github.com/ebiwd/EBI-Framework/issues/85" class="readmore">Updating from v1.1 to v1.2</a>
+- <a href="https://github.com/ebiwd/EBI-Framework/#details-on-upgrading" class="readmore">Updating from v1.2 to v1.3</a>
+{{/markdown}}
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Use a CMS or JS Framework</a>
+ <div class="accordion-content" data-tab-content>
+{{#markdown}}
+- For Drupal there is <a href="https://github.com/ebiwd/drupal_7_ebi_framework">a Drupal 7 theme you can use</a>.
+- For [WordPress there's also a theme](https://github.com/ebiwd/wordpress-ebi-visual-framework).
+- There's [an Angular 4 boilerplate](https://github.com/ebiwd/EBI-Framework-Angular/tree/develop-angular-4).
+- And if you like static sites and GitHub, [there's a Jekyll boilerplate](https://github.com/ebiwd/EBI-Boilerplate-Jekyll).
+{{/markdown}}
+ </div>
+ </li>
+</ul>
+
+{{#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.
@@ -105,19 +123,41 @@ In short: add header markup, footer markup, CSS and JS. Then add content.
To get started check out the structure of the <a href="{{root}}websites/sample-site/">sample boiler plate page</a>.
-## FAQs
+### FAQs
-**JavaScript**
-: The framework does not require jQuery, but using it will get more nice to haves easing your life. The boilerplate includes jQuery functionality by default, if you do not wish to use jQuery you will also need to remove references to <code>foundation.js</code> and <code>FoundationExtendEBI.js</code> files.
-**Foundation**
-: If you aren't able to use the included Foundation base CSS, we do provide some support for other frameworks (such as Bootstrap), but we've picked Foundation as the "recommended implementation" as it offers a path for more graceful integration of EBI styles and requirements.
-: If you're unable to make use of the Frameworks JS or CSS tooling, use this page as a guide for how your site should look, feel, function. There's no reason that can't be done with any framework be it Angular, Material Design, or vanilla CSS3.
-: For new websites or major reworks, we recommend you consider using the included Foundation CSS and JS, as you'll get more benefit from the work done in this framework, encounter fewer bugs, and help EBI web services have a more consistent function and feel.
+{{/markdown}}
+
+<ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">JavaScript</a>
+ <div class="accordion-content" data-tab-content>
+{{#markdown}}
+The EBI Visual Framework does not require jQuery, but using it will make things far easier. The boilerplate includes jQuery functionality by default, if you do not wish to use jQuery you will also need to remove references to the <code>foundation.js</code> and <code>FoundationExtendEBI.js</code> files.
+{{/markdown}}
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Zurb Foundation Framework</a>
+ <div class="accordion-content" data-tab-content>
+{{#markdown}}
+- If you aren't able to use the included Foundation base CSS, use [`ebi-lite.css`](https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css)
+- If you're unable to make use of the Frameworks JS or CSS tooling, use this page as a guide for how your site should look, feel, function. There's no reason that can't be done with any framework be it Angular, Material Design, or vanilla CSS3.
+- For new websites or major reworks, we recommend you consider using the included Foundation CSS and JS, as you'll get more benefit from the work done in this framework, encounter fewer bugs, and help EBI web services have a more consistent function and feel.
+{{/markdown}}
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Bootstrap and other frameworks</a>
+ <div class="accordion-content" data-tab-content>
+{{#markdown}}
+While Bootstrap provides a robust set of tooling and a broader use base, its base styling is more opinionated (121KB vs 43KB of minified baseline CSS). Zurb Foundation allows us to provide a slimmer and faster EBI theme layer. Further, non-jQuery using developers will find more benefit in a Foundation-powered ecosystem. For Bootstrap users unfamiliar with Foundation, you might <a href="https://www.codementor.io/css/tutorial/bootstrap-3-vs-foundation-5-front-end-framework-comparison">read this comparison</a> (note that it references the slightly older version of Foundation 5, but is substantially the same for the article's proposes).
-**Bootstrap**
-: While the front-end framework provides a robust set of tooling and a broader use base, its base styling is more opinionated (121KB vs 43KB of minified baseline CSS). Foundation allows us to provide a slimmer and faster EBI theme layer. Further, non-jQuery using developers will find more benefit in a Foundation-powered ecosystem. For Bootstrap users unfamiliar with Foundation, you might <a href="https://www.codementor.io/css/tutorial/bootstrap-3-vs-foundation-5-front-end-framework-comparison">read this comparison</a> (note that it references the slightly older version of Foundation 5, but is substantially the same for the article's proposes).
+Users of Angular, Bootstrap, and other opinionated implementations should look at the "Technical Integrations" on the [sample pages]({{root}}websites/sample-site/).
{{/markdown}}
+ </div>
+ </li>
+</ul>
</section>