diff --git a/src/building-blocks/animation/animation.html b/src/building-blocks/animation/animation.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/animation/animation.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/animation/animation.yml b/src/building-blocks/animation/animation.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b37fb55be74299a41fd8c53325108dc4082441af
--- /dev/null
+++ b/src/building-blocks/animation/animation.yml
@@ -0,0 +1,12 @@
+name: 'Animations'
+tags:
+ - visuals
+ - usability
+category: media
+description: Oooo, pretty.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/animation/layout.html b/src/building-blocks/animation/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..91b37dfb94cecfd63095b27f6516e7f5e575e2ff
--- /dev/null
+++ b/src/building-blocks/animation/layout.html
@@ -0,0 +1,31 @@
+{{#markdown}}
+
+<div class="callout warning">
+ <p>Not yet officially supported; Currently on target for v1.3.</p>
+ <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' tabindex=1 title="Foundation does have a complementary animation toolset that we’ve not bundled, but you could...">Feel free to experiment with subtle animations</span>, let us know if you do.
+</div>
+
+Using CSS3 and JavaScript animations there are many opportunities to make our sites look good and function better, but we want to take this one step at a time and get other items in order. As such, we've not included <a href="http://foundation.zurb.com/sites/docs/motion-ui.html">Foundation's Motion UI</a> CSS in the default build.
+
+If you'd like to use the Motion UI, you'll need <code><a href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/motion-ui/dist/motion-ui.min.css">//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/motion-ui/dist/motion-ui.min.css</a></code>.
+
+<link rel="stylesheet" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/motion-ui/dist/motion-ui.min.css" type="text/css" media="screen" />
+
+<h3>Example</h3>
+<div id="description-more" data-toggler data-animate="fade-in hinge-out-from-top" data-closable="hinge-out-from-top" style="display:none;">
+ <div class="callout success">
+ <button class="close-button" aria-label="Dismiss alert" type="button" data-close data-toggle="description-more show-more show-less">
+ <span aria-hidden="true">×</span>
+ </button>
+ <p>Some extra information!</p>
+ </div>
+ <a class="small hide label" id="show-less" data-toggle="description-more show-more show-less" data-toggler=".hide"><span class="badge icon icon-functional" data-icon="-"></span> Show less information</a>
+</div>
+
+<a class="small label" id="show-more" data-toggle="description-more show-more show-less" data-toggler=".hide"><span class="badge icon icon-functional" data-icon="+"></span> Show more information</a>
+
+<div class="row"><div class="column">
+{{> animation}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/app-float.scss b/src/building-blocks/app-float.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e9765ac236c4fab3231510b2b2a14554cefbd7c5
--- /dev/null
+++ b/src/building-blocks/app-float.scss
@@ -0,0 +1,56 @@
+@charset 'utf-8';
+
+@import 'settings';
+$global-flexbox: false;
+@import 'foundation';
+@import 'motion-ui';
+
+@include foundation-global-styles;
+@include foundation-grid;
+//@include foundation-flex-grid;
+@include foundation-typography;
+@include foundation-button;
+@include foundation-forms;
+// @include foundation-range-input;
+@include foundation-accordion;
+@include foundation-accordion-menu;
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-close-button;
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+@include foundation-responsive-embed;
+@include foundation-label;
+@include foundation-media-object;
+@include foundation-off-canvas;
+@include foundation-orbit;
+@include foundation-pagination;
+@include foundation-progress-bar;
+// @include foundation-progress-element;
+// @include foundation-meter-element;
+@include foundation-slider;
+@include foundation-sticky;
+@include foundation-reveal;
+@include foundation-switch;
+@include foundation-table;
+@include foundation-tabs;
+@include foundation-thumbnail;
+@include foundation-title-bar;
+@include foundation-tooltip;
+@include foundation-top-bar;
+@include foundation-visibility-classes;
+@include foundation-float-classes;
+//@include foundation-flex-classes;
+
+@include motion-ui-transitions;
+@include motion-ui-animations;
+
+.container-padded {
+ padding: 1rem 0;
+}
diff --git a/src/building-blocks/app.scss b/src/building-blocks/app.scss
new file mode 100644
index 0000000000000000000000000000000000000000..52b34562c829009e4f73375a7f1a9c43e89fafa2
--- /dev/null
+++ b/src/building-blocks/app.scss
@@ -0,0 +1,56 @@
+@charset 'utf-8';
+
+@import 'settings';
+$global-flexbox: true;
+@import 'foundation';
+@import 'motion-ui';
+
+@include foundation-global-styles;
+// @include foundation-grid;
+@include foundation-flex-grid;
+@include foundation-typography;
+@include foundation-button;
+@include foundation-forms;
+// @include foundation-range-input;
+@include foundation-accordion;
+@include foundation-accordion-menu;
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-close-button;
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+@include foundation-responsive-embed;
+@include foundation-label;
+@include foundation-media-object;
+@include foundation-off-canvas;
+@include foundation-orbit;
+@include foundation-pagination;
+@include foundation-progress-bar;
+// @include foundation-progress-element;
+// @include foundation-meter-element;
+@include foundation-slider;
+@include foundation-sticky;
+@include foundation-reveal;
+@include foundation-switch;
+@include foundation-table;
+@include foundation-tabs;
+@include foundation-thumbnail;
+@include foundation-title-bar;
+@include foundation-tooltip;
+@include foundation-top-bar;
+@include foundation-visibility-classes;
+// @include foundation-float-classes;
+@include foundation-flex-classes;
+
+@include motion-ui-transitions;
+@include motion-ui-animations;
+
+.container-padded {
+ padding: 1rem 0;
+}
diff --git a/src/building-blocks/badges/badges.html b/src/building-blocks/badges/badges.html
new file mode 100644
index 0000000000000000000000000000000000000000..a3476dae90a28239e76f66d65937c849d606ffba
--- /dev/null
+++ b/src/building-blocks/badges/badges.html
@@ -0,0 +1,21 @@
+<h3>Basic badge</h3>
+<a class="button" href="#">Sample</a>
+
+<h4>Basic badge - tiny</h4>
+<a class="button tiny" href="#">Sample</a>
+
+<h4>Label badge</h4>
+<p>While sharing a very similar look to the basic badge, this label has less padding and is meant to attract less attention. Great for tags.</p>
+<a class="label" href="#">Sample</a>
+
+<h3>Icon badge</h3>
+<a class="button" href="#"><i class="icon icon-generic" data-icon="P"></i> Sample</a>
+<a class="button" href="#">Sample to the right <i class="icon icon-generic" data-icon="P"></i></a>
+
+<h3>Tile badge</h3>
+<p>Square or rectangle, these badges command more visual attention.</p>
+<a class="button" href="#"><h3 class="icon icon-generic white-color" data-icon="P"></h3> Sample</a>
+
+<h3>Readmore badge</h3>
+<p>Typically we recommend you construct more complex atoms out of other atoms, but recognising that "read more" buttons are common you can add the arrow with <code>.readmore</code>.</p>
+<a class="button readmore" href="#">The full article</a>
diff --git a/src/building-blocks/badges/badges.png b/src/building-blocks/badges/badges.png
new file mode 100644
index 0000000000000000000000000000000000000000..e470a6d555f4c3036d1130bdc77169f4a1a78a43
Binary files /dev/null and b/src/building-blocks/badges/badges.png differ
diff --git a/src/building-blocks/badges/badges.yml b/src/building-blocks/badges/badges.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9f5c8b2239c88c884a395bd9a79cea910cca2c9b
--- /dev/null
+++ b/src/building-blocks/badges/badges.yml
@@ -0,0 +1,12 @@
+name: 'Badges'
+tags:
+ - feed
+ - news
+category: media
+description: The badge is one of the most common atoms in the ecosystem and has several variants.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/badges/layout.html b/src/building-blocks/badges/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..1e2a63b0e21245940ffd2e3c29053f493a128d51
--- /dev/null
+++ b/src/building-blocks/badges/layout.html
@@ -0,0 +1,5 @@
+<div class="row">
+ <div class="column">
+ {{> badges}}
+ </div>
+</div>
diff --git a/src/building-blocks/button-grid/button-grid.html b/src/building-blocks/button-grid/button-grid.html
new file mode 100644
index 0000000000000000000000000000000000000000..88e7b05692ff1eafe49ef201397b5e06aaa4fed0
--- /dev/null
+++ b/src/building-blocks/button-grid/button-grid.html
@@ -0,0 +1,27 @@
+<div class="row">
+ <div class="columns medium-7 medium-push-2">
+ <div class="button-grid">
+ <a class="button primary columns medium-12" href="/sites/ebi.ac.uk/files/groups/external_relations/Documents/EMBL_EBI_Annual_Scientific_Report_2014_Low.pdf"><span class="icon icon-fileformats" data-icon="p"></span> 2014</a>
+ <a class="button secondary small columns medium-6" href="/sites/ebi.ac.uk/files/groups/external_relations/Documents/EMBL_EBI_Annual_Report_2013_hi_3.pdf"><span class="icon icon-fileformats" data-icon="p"></span> 2013</a>
+ <a class="button secondary small columns medium-6" href="/sites/ebi.ac.uk/files/groups/external_relations/Documents/EMBL_EBI_ASR_2012_lo-rez.pdf"><span class="icon icon-fileformats" data-icon="p"></span> 2012</a>
+ <a class="button secondary small columns medium-4" href="/sites/ebi.ac.uk/files/groups/external_relations/Documents/Annual%20report 2011 final low-res.pdf"><span class="icon icon-fileformats" data-icon="p"></span> 2011</a>
+ <a class="button secondary small columns medium-4" href="/sites/ebi.ac.uk/files/groups/external_relations/Documents/Annual_Scientific_Report_low_res.pdf"><span class="icon icon-fileformats" data-icon="p"></span> 2010</a>
+ <a class="button secondary small columns medium-4" href="/sites/ebi.ac.uk/files/groups/external_relations/Documents/ASR%2009_smallest_file_size_complete.pdf"><span class="icon icon-fileformats" data-icon="p"></span> 2009</a>
+ </div>
+ </div>
+</div>
+
+<h3 class="padding-top-xlarge">Large button grid</h3>
+
+<p>This is a variant on the above pattern that also uses <a href="http://foundation.zurb.com/sites/docs/equalizer.html">Foundation's Equalizer</a>.</p>
+
+<div class="row button-grid" data-equalizer data-equalize-on="medium" id="large-button-grid">
+ <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns" data-equalizer-watch href="#"><h3 class="icon icon-functional white-color" data-icon="="></h3> <h5 class="white-color">Download</h5></a></div>
+ <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns" data-equalizer-watch href="#"><h3 class="icon icon-species white-color" data-icon="H"></h3> <h5 class="white-color">Organisims</h5></a></div>
+ <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns" data-equalizer-watch href="#"><h3 class="icon icon-conceptual white-color" data-icon="o"></h3> <h5 class="white-color">Ontologies</h5></a></div>
+ <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns" data-equalizer-watch href="#"><h3 class="icon icon-conceptual white-color" data-icon="o"></h3> <h5 class="white-color">Pathways</h5></a></div>
+ <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns training-background" data-equalizer-watch href="#"><h3 class="icon icon-generic white-color" data-icon="\"></h3> <h5 class="white-color">Request<br/>Complex</h5></a></div>
+ <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns industry-background" data-equalizer-watch href="#"><h3 class="icon icon-generic white-color" data-icon="t"></h3> <h5 class="white-color">Training</h5></a></div>
+ <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns industry-background" data-equalizer-watch href="#"><h3 class="icon icon-generic white-color" data-icon="?"></h3> <h5 class="white-color">Documentation</h5></a></div>
+ <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns industry-background" data-equalizer-watch href="#"><h3 class="icon icon-generic white-color" data-icon="P"></h3> <h5 class="white-color">Citation</h5></a></div>
+</div>
diff --git a/src/building-blocks/button-grid/button-grid.yml b/src/building-blocks/button-grid/button-grid.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e66378b1843a27147bb2b0bcb7a37f200209928f
--- /dev/null
+++ b/src/building-blocks/button-grid/button-grid.yml
@@ -0,0 +1,13 @@
+name: 'Button grid'
+tags:
+ - buttons
+ - links
+ - layout
+category: media
+description: Build an arangement of buttons as a clickable matrix.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/button-grid/layout.html b/src/building-blocks/button-grid/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..6fc9b9fd88962c0c8d60ab72fab5f198c49dd2b9
--- /dev/null
+++ b/src/building-blocks/button-grid/layout.html
@@ -0,0 +1,9 @@
+{{#markdown}}
+
+Wrap a group of <a href="badges">Tile badges</a> in a `div.button-grid`.
+
+<div class="row"><div class="column">
+{{> button-grid}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/code-highlighting/code-highlighting.html b/src/building-blocks/code-highlighting/code-highlighting.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/code-highlighting/code-highlighting.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/code-highlighting/code-highlighting.yml b/src/building-blocks/code-highlighting/code-highlighting.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d3d9c572096c1a27f53cd3074e21edb189beb4df
--- /dev/null
+++ b/src/building-blocks/code-highlighting/code-highlighting.yml
@@ -0,0 +1,12 @@
+name: 'Code highlighting'
+tags:
+ - typography
+ - code
+category: media
+description: If you need to showcase snippets of code, here's how to.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/code-highlighting/layout.html b/src/building-blocks/code-highlighting/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..fa59309bc6986f797cec15ff3198074d7f4cba89
--- /dev/null
+++ b/src/building-blocks/code-highlighting/layout.html
@@ -0,0 +1,47 @@
+{{#markdown}}
+
+### Inline code highlighting
+
+If you want to do a bit of `inline-code`, use the the `<code>` element or `span.code`.
+
+### Generic code block
+
+Use a nested combination of `<pre>` and `<code>` for a code block.
+
+```
+<h1>This is a sample code block</h1>
+<p>I'm text!</p>
+```
+<br/>
+
+#### Stylised code block
+
+If you use [Pygments code formatting](http://pygments.org/) you can use [ebi-code.css](http://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-code.css) for syntax highlighting, like so:
+
+<link rel="stylesheet" href="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-code.css">
+<br/>
+
+##### HTML
+
+``` html
+<h1>This is a sample HTML code block</h1>
+<p>I'm text!</p>
+```
+<br/>
+
+##### PHP
+
+```php
+function text() {
+ print '<h1>This is a sample PHP code block</h1>' . '<p>I'm text!</p>';
+ return true;
+}
+```
+
+<div class="row">
+ <div class="column">
+ {{> code-highlighting}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/colors/colors.html b/src/building-blocks/colors/colors.html
new file mode 100644
index 0000000000000000000000000000000000000000..e2bcaf9f909d872a18c8296946cfbf97888cded8
--- /dev/null
+++ b/src/building-blocks/colors/colors.html
@@ -0,0 +1,19 @@
+<p>
+<div class="row small-up-1 medium-up-2 large-up-3" data-equalizer>
+ <div class="column ebi-background white-color" data-equalizer-watch>
+ <p><h4 class="white-color">EBI Petrol</h4> The default. <br/><small>Found at css/theme-embl-petrol.css</small></p>
+ </div>
+ <div class="column services-background white-color" data-equalizer-watch>
+ <p><h4 class="white-color">Services</h4> Close to EBI Petrol. <br/><small>Found at css/theme-ebi-services-about.css</small></p>
+ </div>
+ <div class="column research-background white-color" data-equalizer-watch>
+ <p><h4 class="white-color">Research</h4> Green. <br/><small>Found at css/theme-ebi-research.css</small></p>
+ </div>
+ <div class="column training-background white-color" data-equalizer-watch>
+ <p><h4 class="white-color">Training</h4> Golden. <br/><small>Found at css/theme-ebi-training.css</small></p>
+ </div>
+ <div class="column industry-background white-color" data-equalizer-watch>
+ <p><h4 class="white-color">Industry</h4> Bright blue ocean. <br/><small>Found at css/theme-ebi-training.css</small></p>
+ </div>
+</div>
+</p>
diff --git a/src/building-blocks/colors/colors.png b/src/building-blocks/colors/colors.png
new file mode 100644
index 0000000000000000000000000000000000000000..e470a6d555f4c3036d1130bdc77169f4a1a78a43
Binary files /dev/null and b/src/building-blocks/colors/colors.png differ
diff --git a/src/building-blocks/colors/colors.yml b/src/building-blocks/colors/colors.yml
new file mode 100644
index 0000000000000000000000000000000000000000..65456b47ffbe77f2a86b3a39ab130fb6f71b7668
--- /dev/null
+++ b/src/building-blocks/colors/colors.yml
@@ -0,0 +1,11 @@
+name: 'Colors'
+tags:
+ - visuals
+category: media
+description: Core EMBL-EBI colours.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/colors/layout.html b/src/building-blocks/colors/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..d0f75653c1c4b8d29ff9b4ab89482945635a3849
--- /dev/null
+++ b/src/building-blocks/colors/layout.html
@@ -0,0 +1,35 @@
+<p>Consistent colours help us achieve a consistent EMBL-EBI "look". You can use a standard reday-made colour palette that we provide or some projects may want to use a custom palette.</p>
+
+<p>We provide these basic colour palettes that will be of use for many projects:</p>
+
+<div class="row">
+ <div class="column">
+ {{> colors}}
+ </div>
+</div>
+
+
+<p>You can call these colours directly with these colour and background-colour classes:</p>
+
+<div class="callout"><pre>
+.ebi-background { background: rgb(0,124,130); }
+.services-background { background: rgb(2,100,105); }
+.research-background { background: rgb(168,200,19); }
+.training-background { background: rgb(233,180,0); }
+.industry-background { background: rgb(0,134,180); }
+.elixir-background { background: rgb(251,106,42); }
+.white-background { background: rgb(255,255,255); }
+
+.ebi-color { color: rgb(0,124,130); }
+.services-color { color: rgb(2,100,105); }
+.research-color { color: rgb(168,200,19); }
+.training-color { color: rgb(233,180,0); }
+.industry-color { color: rgb(0,134,180); }
+.elixir-color { color: rgb(251,106,42); }
+.white-color { color: rgb(255,255,255); }</pre></div>
+
+<p>Note: we recommend using the RGB values (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility">support is near-universal</a>. The alpha, RGBA mode, is available from IE 9.)</p>
+
+<h3>Roll your own colors</h3>
+
+<p>If you wish to make your own colour palatte, see this set of directions <code>/css/theme-readme-custom.txt</code></p>
diff --git a/src/building-blocks/favicons/favicons.html b/src/building-blocks/favicons/favicons.html
new file mode 100644
index 0000000000000000000000000000000000000000..5834da31905e9ab76b8982f6ffc23ec67464fe80
--- /dev/null
+++ b/src/building-blocks/favicons/favicons.html
@@ -0,0 +1,16 @@
+{{#markdown}}
+ ``` html
+ <!-- If you have custom icon, replace these as appropriate.
+ You can generate them at realfavicongenerator.net -->
+ <link rel="icon" type="image/x-icon" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/favicon.ico" />
+ <link rel="icon" type="image/png" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
+ <link rel="icon" type="image/png" sizes="192×192" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" /> <!-- Android (192px) -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" /> <!-- For iPhone 4 Retina display (114px) -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" /> <!-- For iPad (72px) -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" /> <!-- For iPad retinat (144px) -->
+ <link rel="apple-touch-icon-precomposed" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" /> <!-- For iPhone (57px) -->
+ <link rel="mask-icon" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg" color="#ffffff" /> <!-- Safari icon for pinned tab -->
+ <meta name="msapplication-TileColor" content="#2b5797" /> <!-- MS Icons -->
+ <meta name="msapplication-TileImage" content="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/favicons/favicons.yml b/src/building-blocks/favicons/favicons.yml
new file mode 100644
index 0000000000000000000000000000000000000000..280ae89207f2963ab74861ef610b9b1605358b06
--- /dev/null
+++ b/src/building-blocks/favicons/favicons.yml
@@ -0,0 +1,11 @@
+name: 'Favicons'
+tags:
+ - visuals
+category: media
+description: Which quick refrence colours and sizes to use.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/favicons/layout.html b/src/building-blocks/favicons/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..76ed85bc9d27bc1082e9bbbe98bccd0543200bd4
--- /dev/null
+++ b/src/building-blocks/favicons/layout.html
@@ -0,0 +1,14 @@
+{{#markdown}}
+ ## Favicons
+
+ This boilerplate preloads the EMBL-EBI mark, supporting a range of browser tab icons, bookmarks, home screen icons, tab colours, and size/formats, including SVG.
+
+<div class="row">
+ <div class="column">
+ {{> favicons}}
+ </div>
+</div>
+
+
+ If you need to generate a new set of favicons, we've found <a href="https://realfavicongenerator.net">RealFaviconGenerator.net</a> to generate a high quality output, and be easy to use.
+{{/markdown}}
diff --git a/src/building-blocks/formatting/formatting.html b/src/building-blocks/formatting/formatting.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/formatting/formatting.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/formatting/formatting.yml b/src/building-blocks/formatting/formatting.yml
new file mode 100644
index 0000000000000000000000000000000000000000..cb68a1fe6ed8b07c8bf62cd88b7244b36fbf9466
--- /dev/null
+++ b/src/building-blocks/formatting/formatting.yml
@@ -0,0 +1,12 @@
+name: 'Formatting'
+tags:
+ - typography
+ - writing
+category: media
+description: A quick index of styles. With a variety of text comes the need for many formatting styles, use this table as a helper.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/formatting/layout.html b/src/building-blocks/formatting/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..beecbcc829a186446ac31de60193851374cef935
--- /dev/null
+++ b/src/building-blocks/formatting/layout.html
@@ -0,0 +1,69 @@
+{{#markdown}}
+
+<table>
+ <thead>
+ <tr>
+ <th class="medium-2">Use</th>
+ <th class="medium-6">Sample</th>
+ <th>How to implement?</th>
+ </tr>
+ </thead>
+ <tboyd>
+ <tr>
+ <td>Citations</td>
+ <td><cite>Hi, I'm a <a href="#">citation</a>!</cite></td>
+ <td>HTML <span class="code"><cite></span> element</td>
+ </tr>
+ <tr>
+ <td>Basic pullquotes</td>
+ <td><blockquote>I'm being quoted here, or maybe just highlighted?</blockquote></td>
+ <td>HTML <span class="code"><blockquote></span> element. Consider combining with the grid classes and float-left or float-right for a highlight look.</td>
+ </tr>
+ <tr>
+ <td>Emphasis pullquotes</td>
+ <td><blockquote class="lead">I'm being quoted here and want to be noticed</blockquote></td>
+ <td>HTML <span class="code"><blockquote></span> element with class <code>.lead</code>.</td>
+ </tr>
+ <tr>
+ <td>Emphasis pullquote with quotation mark and citation</td>
+ <td><blockquote class="lead quote">I'm being quoted here and want to be noticed. <cite class="text-right">Hi, I'm a <a href="#">citation</a>!</cite></blockquote></td>
+ <td>HTML <span class="code"><blockquote></span> element with class <code>.lead</code> and <code>.quote</code>.</td>
+ </tr>
+ <tr>
+ <td>Small text</td>
+ <td><span class="small">I'm so small.</span></td>
+ <td>CSS class <code>.small</code></td>
+ </tr>
+ <tr>
+ <td>Lead intro text</td>
+ <td><span class="lead">I'm some intro text.</span></td>
+ <td>CSS class <code>.lead</code></td>
+ </tr>
+ <tr>
+ <td>Read more</td>
+ <td><a href="#" class="readmore">Read more here</a></td>
+ <td>CSS class <code>.readmore</code></td>
+ </tr>
+ <tr>
+ <td>Read more (as a button)</td>
+ <td><a href="#" class="button readmore">Read more here</a></td>
+ <td>CSS class <code>.readmore</code> <code>.button</code></td>
+ </tr>
+ <tr>
+ <td>Serif text</td>
+ <td class="serif">For large narrative text areas, consider the CSS class <code>.serif</code> to use the "EB Garamond" font, which is also loaded by the font stylesheet.</td>
+ <td>CSS class <code>.serif</code></td>
+ </tr>
+ <tr>
+ <td>Serif text</td>
+ <td class="sans-serif">We use sans-serif by default, but maybe you need to force it for some reason?</td>
+ <td>CSS class <code>.sans-serif</code></td>
+ </tr>
+ </tbody>
+</table>
+
+<div class="row"><div class="column">
+{{> formatting}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/grid/grid.html b/src/building-blocks/grid/grid.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/grid/grid.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/grid/grid.yml b/src/building-blocks/grid/grid.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1ebed2e97d21ed5a0f08dc13afc31e63822987cb
--- /dev/null
+++ b/src/building-blocks/grid/grid.yml
@@ -0,0 +1,12 @@
+name: 'Grid'
+tags:
+ - grid
+ - layout
+category: media
+description: Formatting content layout
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/grid/layout.html b/src/building-blocks/grid/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..73265796cbe7d172cbefb307963ad4e159fb14aa
--- /dev/null
+++ b/src/building-blocks/grid/layout.html
@@ -0,0 +1,29 @@
+{{#markdown}}
+Start by adding an element with a class of <code>.row</code>. This will create a horizontal block to contain vertical columns. Then add elements with a <code>.column</code> class within that row. You can use <code>.column</code> or <code>.columns</code>—the only difference is grammar. Specify the widths of each column with the <code>.small-#</code>, <code>.medium-#</code>, and <code>.large-#</code> classes.
+
+<p>For example: The EBI Framework uses a 12 column grid. This page has a 9/12 left column, and 3/12 right column; the structure:</p>
+
+<pre class="callout">
+<div class="row">
+<div class="columns medium-9"> Main left column </div>
+<div class="columns medium-3"> Right sidebar </div>
+</div></pre>
+
+<p>Note that by using <code>.medium-</code> the two columns automatically expand to full width on small screens (mobile devices).</p>
+
+<p>For further background and demonstration, <a href="http://foundation.zurb.com/sites/docs/grid.html">view the Foundation documentation on grids</a>.</p>
+
+<h3>EBI Customisations</h3>
+
+<h4>Collapse column padding</h4>
+<p>In addtion to using the Foundation <code>.no-collapse</code> option on grid rows, we've found that our layouts benefit from collapsing column padding in some locations.</p>
+
+<p>You can remove right or left padding by giving the <code>div.column</code> a <code>.no-pad-right</code> or <code>.no-pad-left</code></p>
+
+<div class="row">
+ <div class="column">
+ {{> grid}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/headlines/headlines.html b/src/building-blocks/headlines/headlines.html
new file mode 100644
index 0000000000000000000000000000000000000000..c33458fcf654343f206274feb90412d8c5002c1c
--- /dev/null
+++ b/src/building-blocks/headlines/headlines.html
@@ -0,0 +1,19 @@
+<div class="callout ebi-background">
+ <h1>H1: HTML Heading 1</h1>
+ <p class="white-color">Reserved for use in the local header. 3rem, 36pt.</p>
+</div>
+
+<h2>H2: HTML Heading 2</h2>
+<p>Use sparingly. Generally a max of one per URL, as the page title. 2.5rem, 30pt.</p>
+
+<h3>H3: HTML Heading 3</h3>
+<p>The standard section heading. 2rem, 24pt.</p>
+
+<h4>H4: HTML Heading 4</h4>
+<p>Use a sub heading. 1.5 rem, 18pt.</p>
+
+<h5>H5: HTML Heading 5</h5>
+<p>Sample paragraph. 1.25 rem, 15pt.</p>
+
+<h6>H6: HTML Heading 6</h6>
+<p>Sample paragraph. 1rem, 12pt.</p>
diff --git a/src/building-blocks/headlines/headlines.yml b/src/building-blocks/headlines/headlines.yml
new file mode 100644
index 0000000000000000000000000000000000000000..efd371237629fc9f1ea67c1c28b00e164faa262f
--- /dev/null
+++ b/src/building-blocks/headlines/headlines.yml
@@ -0,0 +1,12 @@
+name: 'Headlines'
+tags:
+ - typography
+ - writing
+category: media
+description: How big you typography should be.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/headlines/layout.html b/src/building-blocks/headlines/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..629e176182b7fa035a4717ad7a9d3d333a6bd725
--- /dev/null
+++ b/src/building-blocks/headlines/layout.html
@@ -0,0 +1,11 @@
+{{#markdown}}
+
+The default font used throughout the page is Helvetica Neue, and is implement through a web font loaded by <code>fonts.css</code>. This is done to reflect EMBL-wide branding.
+
+Sizing of default text is done with <code>rem</code>; equivlent to 16px on 24px leading, or 12pt on 16pt leading. Note that these sizes are for desktop-class browser widths, tablet and mobile sized screens are scaled.
+
+<div class="row"><div class="column">
+{{> headlines}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/icons/icons.html b/src/building-blocks/icons/icons.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/icons/icons.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/icons/icons.yml b/src/building-blocks/icons/icons.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3462548cc8fc10be365e99eef74619dfa484b51e
--- /dev/null
+++ b/src/building-blocks/icons/icons.yml
@@ -0,0 +1,12 @@
+name: 'Icons'
+tags:
+ - typography
+ - visuals
+category: media
+description: The fonts.css stylesheet automatically loads a range of icon fonts that you can use
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/icons/layout.html b/src/building-blocks/icons/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..ab3583a22918c78a781f86e2d538e2d706cc9230
--- /dev/null
+++ b/src/building-blocks/icons/layout.html
@@ -0,0 +1,29 @@
+{{#markdown}}
+
+<div class="callout">
+ <h3><i class="icon icon-generic padding-right-medium" data-icon="i"></i>Planning underway to improve the EBI Icon fonts</h3>
+ <p>If you're interested in making improvements to the technical delivery and usage of the EBI Icon fonts.</p>
+ <p><a href="https://github.com/ebiwd/EBI-Icon-fonts/issues/6" class="readmore">Learn more</a></p>
+</div>
+
+<p>Icons are added by the <code>fonts.css</code> file with <code>:before</code> pseudo elements, so they will appear before whatever piece of text you associate them with. To make this association, you need to include particular class and data-icon attributes in the relevant HTML element: e.g. <code><h4><i class="icon icon-generic" data-icon="4"></i> Travel by plane</h4></code>.</p>
+
+<h4><i class="icon icon-generic icon-spacer" data-icon="4"></i>A plane is a nice demo icon</h4>
+
+<p>The web browser will read the data-icon parameter and use the icon pictogram corresponding to "4".</p>
+
+<p>The EBI Visual framework no longer adds automatic padding to icons (in most scenarios), if you want to add padding, use the <a href="https://ebiwd.github.io/EBI-Pattern-library/patterns/helper-classes/">helper classes</a> or add <code>.icon-spacer</code> to the <code>.icon</code>'s element.
+
+<p>We do not recommend using PNG images as they offer inferior performance and inferior support for high resolution screens.</p>
+
+<p>Looking for an icon?</p>
+
+<a href="//www.ebi.ac.uk/web_guidelines/EBI-Icon-fonts/v1.1/" class="button readmore">View the gallery</a>
+
+<div class="row">
+ <div class="column">
+ {{> icons}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/image-overlays/image-overlays.html b/src/building-blocks/image-overlays/image-overlays.html
new file mode 100644
index 0000000000000000000000000000000000000000..1f3697f619201c637d51f50e217c00d4f9aa61e1
--- /dev/null
+++ b/src/building-blocks/image-overlays/image-overlays.html
@@ -0,0 +1,19 @@
+<div class="medium-4 with-overlay">
+ <img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/News/DREAMchallenge_News_24_03_16_EBI.jpg?itok=-33Ign4S" alt="Photo of Uranus.">
+ <div class="caption">
+ <div class="inner">
+ Standard caption without a link.
+ </div>
+ </div>
+</div>
+
+<p>If your <code>.inner</code> element is a link, the text automatically takes on a large font face and arrow. This style is best used as an image button to tease and link further content.</p>
+
+<div class="medium-4 with-overlay">
+ <img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/News/TCell_news_EBI.jpg?itok=b_KTDxDO" alt="Photo of Uranus.">
+ <div class="caption">
+ <a href="http://www.embl.de/" class="inner">
+ As a linked button
+ </a>
+ </div>
+</div>
diff --git a/src/building-blocks/image-overlays/image-overlays.yml b/src/building-blocks/image-overlays/image-overlays.yml
new file mode 100644
index 0000000000000000000000000000000000000000..799f6a8d12083bde2b0459b9bfb4dffac2547178
--- /dev/null
+++ b/src/building-blocks/image-overlays/image-overlays.yml
@@ -0,0 +1,13 @@
+name: 'Images with tinting'
+tags:
+ - visuals
+ - layout
+ - images
+category: media
+description: You can enhance the "Images with captions" pattern by adding class .with-overlay for a darkened effect with a text overlay.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/image-overlays/layout.html b/src/building-blocks/image-overlays/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..b6fa67bd1269e1d20390eb4a6e1a8ed0deefbe21
--- /dev/null
+++ b/src/building-blocks/image-overlays/layout.html
@@ -0,0 +1,9 @@
+{{#markdown}}
+
+<div class="row">
+ <div class="column">
+ {{> image-overlays}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/image-shortcuts/image-shortcuts.html b/src/building-blocks/image-shortcuts/image-shortcuts.html
new file mode 100644
index 0000000000000000000000000000000000000000..505a7361be810ff87d6713f5080b7508d90fe2a6
--- /dev/null
+++ b/src/building-blocks/image-shortcuts/image-shortcuts.html
@@ -0,0 +1,35 @@
+<div class="column shortcuts transparent">
+ <a href="http://www.embl.de/research/faculty/index.php?dtySt=0"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/highlights/Faculty_500.jpg" alt="EMBL Faculty" title="EMBL Faculty" />
+ <p class="pane-title">EMBL faculty</p>
+ </a>
+</div>
+
+<div class="column shortcuts transparent">
+ <a href="http://www.ebi.ac.uk/research/postdocs"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/News/Postdocs_highlight.jpg" alt="Postdocs at EMBL-EBI" title="Postdocs at EMBL-EBI" />
+ <p class="pane-title">Postdocs at EMBL-EBI</p>
+ </a>
+</div>
+
+<div class="column shortcuts transparent">
+ <a href="http://www.ebi.ac.uk/research/eipp"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/highlights/PhD_500.jpg" alt="EMBL International PhD Programme" title="EMBL International PhD Programme" />
+ <p class="pane-title">PhD Programme</p>
+ </a>
+</div>
+
+<div class="column shortcuts transparent">
+ <a href="http://targetvalidation.org"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/highlights/CTTV_highlight.jpg" alt="Open Targets" title="Open Targets" />
+ <p class="pane-title">Centre for Therapeutic Target Validation</p>
+ </a>
+</div>
+
+<div class="column shortcuts transparent">
+ <a href="http://www.sanger.ac.uk/science/collaboration/sanger-institute-ebi-single-cell-genomics-centre"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/News/Single_cell_genomics_centre_highlight.jpg" alt="Single Cell Genomics Centre" title="Single Cell Genomics Centre" />
+ <p class="pane-title">Sanger/EBI Single-Cell Genomics Centre</p>
+ </a>
+</div>
+
+<div class="column shortcuts transparent">
+ <a href="http://www.ebi.ac.uk/about/brochures"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/highlights/Brochure_highlights.jpg" alt="EMBL-EBI brochures link" title="EMBL-EBI brochures link" />
+ <p class="pane-title">Read more about EMBL-EBI</p>
+ </a>
+</div>
diff --git a/src/building-blocks/image-shortcuts/image-shortcuts.yml b/src/building-blocks/image-shortcuts/image-shortcuts.yml
new file mode 100644
index 0000000000000000000000000000000000000000..00bc71cff864ab598a5070c2e724f1d50359557b
--- /dev/null
+++ b/src/building-blocks/image-shortcuts/image-shortcuts.yml
@@ -0,0 +1,13 @@
+name: 'Image shortcuts'
+tags:
+ - visuals
+ - layout
+ - images
+category: media
+description: Quick access links.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/image-shortcuts/layout.html b/src/building-blocks/image-shortcuts/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..f5e85e991275b53d80db5646594ae68b8c029190
--- /dev/null
+++ b/src/building-blocks/image-shortcuts/layout.html
@@ -0,0 +1,16 @@
+{{#markdown}}
+
+<div class="row collapse">
+ If you have a series of images you'd like to use to promote various areas, you can use <code>.shortcuts</code>
+
+ <div class="row">
+ <div class="medium-up-3 columns medium-12 callout">
+
+ {{> image-shortcuts}}
+
+ </div>
+ </div> <!-- /row -->
+
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/images/images.html b/src/building-blocks/images/images.html
new file mode 100644
index 0000000000000000000000000000000000000000..f7984d565ef69688f9fd4fa84651aa3f641d70e9
--- /dev/null
+++ b/src/building-blocks/images/images.html
@@ -0,0 +1,4 @@
+<div class="thumbnail float-right medium-4 columns">
+ <img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/News/TCell_news_EBI.jpg?itok=b_KTDxDO" alt="Photo of Uranus.">
+ <div class="caption">You can also add a caption with <code>.caption</code>.</div>
+</div>
diff --git a/src/building-blocks/images/images.yml b/src/building-blocks/images/images.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2cd5c6f2c280a4a5c7f143beb7d90ff0906f00fb
--- /dev/null
+++ b/src/building-blocks/images/images.yml
@@ -0,0 +1,13 @@
+name: 'Images with captions'
+tags:
+ - layout
+ - visuals
+ - images
+category: media
+description: For images inserted inside text areas, you can use make a div.thumbnail wrap an image and a div.caption to add subtle padding and spacing.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/images/layout.html b/src/building-blocks/images/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..24c88d86bad4b8a00266488883021188c5da949a
--- /dev/null
+++ b/src/building-blocks/images/layout.html
@@ -0,0 +1,16 @@
+{{#markdown}}
+
+<div class="row collapse">
+ <p>You can further combine with <code>.float-left</code> or <code>.float-right</code> for a nice treatment, and size with, say, <code>.columns .medium-4</code> for a responsive effect.</p>
+ <p>Images will dynamically scale down to fit the container, but will not scale above their actual size.</p>
+ <p>This is the treatment you see to the right.</p>
+
+</div>
+
+<div class="row">
+ <div class="column">
+ {{> images}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/intro-unit/intro-unit.html b/src/building-blocks/intro-unit/intro-unit.html
new file mode 100644
index 0000000000000000000000000000000000000000..5b8a7f1e0fbf434b2d625598d6ccdbf56c6cfeb2
--- /dev/null
+++ b/src/building-blocks/intro-unit/intro-unit.html
@@ -0,0 +1,6 @@
+<div class="intro-unit">
+ <h2>Jobs at EMBL-EBI</h2>
+ <h3>Looking for something different?</h3>
+ <p class="lead">Working at EMBL-EBI gives you the opportunity to focus your energy and skills on something that really matters: using technology to contribute to discoveries that benefit humankind. We empower researchers everywhere to realise the potential of ‘big data’ in biology, and build sophisticated tools for exploring life at the atomic level.</p>
+ <a href="//wwwdev.ebi.ac.uk/about/background" class="readmore">Read more about EMBL-EBI's background</a>
+</div>
diff --git a/src/building-blocks/intro-unit/intro-unit.yml b/src/building-blocks/intro-unit/intro-unit.yml
new file mode 100644
index 0000000000000000000000000000000000000000..11e0c6b1b03b162a26d0ef3b623725d2302bbc99
--- /dev/null
+++ b/src/building-blocks/intro-unit/intro-unit.yml
@@ -0,0 +1,12 @@
+name: 'Intro unit'
+tags:
+- typography
+- layout
+category: media
+description: Highlight the key narrative.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/intro-unit/layout.html b/src/building-blocks/intro-unit/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..9d354bc79b509001983d6d616e428441c17f45dd
--- /dev/null
+++ b/src/building-blocks/intro-unit/layout.html
@@ -0,0 +1,10 @@
+{{#markdown}}
+When you have a page that addresses multiple audiance types or has multiple messages, use an intro unit to set the context.
+
+<div class="row">
+ <div class="column">
+ {{> intro-unit}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/labels/labels.html b/src/building-blocks/labels/labels.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/labels/labels.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/labels/labels.yml b/src/building-blocks/labels/labels.yml
new file mode 100644
index 0000000000000000000000000000000000000000..19978d7dd1af941c25fd5753dd93741d24355b7f
--- /dev/null
+++ b/src/building-blocks/labels/labels.yml
@@ -0,0 +1,11 @@
+name: 'Labels'
+tags:
+ - labels
+category: media
+description: Use a label to signify a section.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/labels/layout.html b/src/building-blocks/labels/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..e71110b636b3deb28851b28aad6defec908531a5
--- /dev/null
+++ b/src/building-blocks/labels/layout.html
@@ -0,0 +1,11 @@
+{{#markdown}}
+
+<span class="label">A label for this section</span>
+<h2>On text, and its need</h2>
+<p>Use a label to signify a section.</p>
+
+<div class="row"><div class="column">
+{{> labels}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/lists-pulse/layout.html b/src/building-blocks/lists-pulse/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..60e74713c701110a81a990bd2c53c1d08fc5f3f0
--- /dev/null
+++ b/src/building-blocks/lists-pulse/layout.html
@@ -0,0 +1,113 @@
+{{#markdown}}
+
+<h2>Pulse lists</h2>
+<p>Building atop list styling you can fashion "Pulse lists" to feature a series of items or updates. Although these may not appear to be lists at first glance, a list structure provides the basic scaffolding.</p>
+
+<h3>Basic heartbeat list</h3>
+<div class="callout">
+
+ <dl>
+ <h4>Latest ENA news</h4>
+ <dt>06 Apr 2016: <a href="#">ENA Release 127</a></dt>
+ <dd><p>Release 127 of ENA's assembled/annotated sequences now available <a href="#" class="readmore">Read more</a></p></dd>
+
+ <dt>15 Feb 2016: <a href="#">Environmental data curation: new publication</a></dt>
+ <dd><p>In our new publication, "Value, but high costs in post-deposition data curationâ€, we explore the curation of environmental sample information in the European Nucleotide Archive. <a href="#" class="readmore">Read more</a></p></dd>
+ </dl>
+
+</div> <!-- /callout -->
+
+<h3>Icon heartbeat list</h3>
+<div class="callout">
+
+ <ul>
+ <h4>Publications</h4>
+ <li class="icon-bullet"><p><span class="icon icon-generic" data-icon=";"></span> <a href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">The InterPro protein families database: the classification resource after 15 years</a><br />Our latest paper describing new developments on the InterPro website
+ (<i>Nucleic Acids Research</i>, Jan 2015).<br />
+ <a class="ext" href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">HTML</a> | <a class="ext" href="http://nar.oxfordjournals.org/content/43/D1/D213.full.pdf+html" target="_blank">PDF (3,4Mb) </a> | <a href="/interpro/publications.html" target="_blank">All publications</a></p></li>
+ <li class="icon-bullet"><p><span class="icon icon-generic" data-icon=";"></span> <a href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">The InterPro protein families database: the classification resource after 15 years</a><br />Our latest paper describing new developments on the InterPro website
+ (<i>Nucleic Acids Research</i>, Jan 2015).<br />
+ <a class="ext" href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">HTML</a> | <a class="ext" href="http://nar.oxfordjournals.org/content/43/D1/D213.full.pdf+html" target="_blank">PDF (3,4Mb) </a> | <a href="/interpro/publications.html" target="_blank">All publications</a></p></li>
+ <li class="icon-bullet"><p><span class="icon icon-generic" data-icon=";"></span> <a href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">The InterPro protein families database: the classification resource after 15 years</a><br />Our latest paper describing new developments on the InterPro website
+ (<i>Nucleic Acids Research</i>, Jan 2015).<br />
+ <a class="ext" href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">HTML</a> | <a class="ext" href="http://nar.oxfordjournals.org/content/43/D1/D213.full.pdf+html" target="_blank">PDF (3,4Mb) </a> | <a href="/interpro/publications.html" target="_blank">All publications</a></p></li>
+ <li class="icon-bullet"><p><span class="icon icon-generic" data-icon=";"></span> <a href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">The InterPro protein families database: the classification resource after 15 years</a><br />Our latest paper describing new developments on the InterPro website
+ (<i>Nucleic Acids Research</i>, Jan 2015).<br />
+ <a class="ext" href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">HTML</a> | <a class="ext" href="http://nar.oxfordjournals.org/content/43/D1/D213.full.pdf+html" target="_blank">PDF (3,4Mb) </a> | <a href="/interpro/publications.html" target="_blank">All publications</a></p></li>
+ </ul>
+
+</div> <!-- /callout -->
+
+
+<h3>Image heartbeat list</h3>
+<p>If you have thumbnail images to feature and/or more robust content per item, use this pattern.</p>
+<div class="row ">
+
+ <div class="columns medium-6 medium-push-3">
+ <ul class="no-bullet">
+ <h4>Service updates</h4>
+ <li>
+ <img src="https://www.ebi.ac.uk/interpro/resources/images/logo_ida_100.png" class="float-right"/>
+ <h5>IDA Tool</h5>
+ <p>
+ <span class="secondary-color">February 2016</span> - The InterPro Domain Architecture (IDA) tool allows you to search the InterPro database with a particular set of domains, and returns all of the domain architectures and associated proteins that match the query. <a href="http://nar.oxfordjournals.org/content/43/D1/D213" class="readmore" target="_blank">Read more</a>
+ </p>
+ <hr />
+ </li>
+ <li>
+ <img src="https://2.bp.blogspot.com/-xyAlqosOxLs/Vsb149z7i3I/AAAAAAAAA_c/bMa84ppiIHo/s72-c/Final_Microcephaly2.jpg" class="float-right"/>
+ <h5>Zika Virus and Microcephaly</h5>
+ <p>
+ <span class="secondary-color">February 2016</span> - You have probably been as horrified and saddened as me to see the shocking abnormality that affects newborn babies.
+ </p>
+ <ul>
+ <li>An update to Pfam (29.0) and SMART (7.1).</li>
+ <li>Integration of 639 new methods from the Pfam (80), SUPERFAMILY (11), ProDom (6), SMART (279) and PANTHER (263) databases.</li>
+ </ul>
+ <a href="http://nar.oxfordjournals.org/content/43/D1/D213" class="readmore" target="_blank">Read more</a>
+ </li>
+
+ </ul>
+
+ </div> <!-- /columns medium-6 -->
+</div>
+
+
+<h3>Social heartbeat list</h3>
+<div class="row ">
+
+ <div class="columns medium-4 medium-push-3">
+ <ul class="no-bullet">
+ <h4>Service updates</h4>
+ <li>
+ <div class=" row">
+ <img src="https://pbs.twimg.com/profile_images/524513796568535040/o3GZOvX-_normal.jpeg" class="small-3 columns no-pad-right"/>
+ <div class="small-9 columns"><strong>EMBL-EBI Training</strong><br/><em>‎@EBItraining</em></div>
+ </div>
+ <p class="">
+ <a href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">Making our first protein interaction networks with Pablo @intact_project using Cytoscape #datavisualisation </a>
+ </p>
+ </li>
+ <li>
+ <div class=" row">
+ <img src="https://pbs.twimg.com/profile_images/524513796568535040/o3GZOvX-_normal.jpeg" class="small-3 columns no-pad-right"/>
+ <div class="small-9 columns"><strong>EMBL-EBI Training</strong><br/><em>‎@EBItraining</em></div>
+ </div>
+ <p class="">
+ <a href="http://nar.oxfordjournals.org/content/43/D1/D213" target="_blank">Making our first protein interaction networks with Pablo @intact_project using Cytoscape #datavisualisation </a>
+ <img src="https://pbs.twimg.com/media/CiGZPgLWsAA03Dn.jpg:small" />
+ </p>
+ </li>
+
+ </ul>
+
+ </div> <!-- /columns medium-4 -->
+</div>
+
+<div class="row">
+ <div class="column">
+ {{> lists-pulse}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/lists-pulse/lists-pulse.html b/src/building-blocks/lists-pulse/lists-pulse.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/lists-pulse/lists-pulse.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/lists-pulse/lists-pulse.yml b/src/building-blocks/lists-pulse/lists-pulse.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1de3be2d4df28ac115846b165401cf3928a79838
--- /dev/null
+++ b/src/building-blocks/lists-pulse/lists-pulse.yml
@@ -0,0 +1,12 @@
+name: 'Lists - pulse'
+tags:
+ - typography
+ - lists
+category: media
+description: .
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/lists/layout.html b/src/building-blocks/lists/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..c92839e0ede6ad1d927194277c7bb1a664d58139
--- /dev/null
+++ b/src/building-blocks/lists/layout.html
@@ -0,0 +1,175 @@
+{{#markdown}}
+
+A useful and diverse category, use one of these list types for your content. View the code source for the implementation technique.
+
+If you have need of a type not shown, get in touch.
+
+### Leaders list
+
+Good for a table of statistics, or contents.
+
+<div class="callout columns">
+ <ul class="leaders serif">
+ <li>
+ <span>Sample row</span>
+ <span>61.7%</span>
+ </li>
+ <li>
+ <span>Sample row</span>
+ <span>61.7%</span>
+ </li>
+ </ul>
+</div>
+
+<div class="row">
+
+ <div class="columns medium-6">
+ <h3>Unordered lists</h3>
+ <p>Use an unordered list to... list things, if the order of the items doesn't matter.</p>
+
+ <ul>
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item
+ <ul>
+ <li>Nested list item</li>
+ <li>Nested list item</li>
+ <li>Nested list item</li>
+ </ul>
+ </li>
+ <li>List item</li>
+ <li>List item</li>
+ </ul>
+ </div>
+
+ <div class="columns medium-6">
+
+ <h3>Ordered lists</h3>
+ <p>Use an ol when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.</p>
+
+ <ol>
+ <li>Cheese (essential)</li>
+ <li>Pepperoni</li>
+ <li>Bacon
+ <ol>
+ <li>Normal bacon</li>
+ <li>Canadian bacon</li>
+ </ol>
+ </li>
+ <li>Sausage</li>
+ <li>Onions</li>
+ <li>Mushrooms</li>
+ </ol>
+ </div>
+
+</div>
+
+<h3>No-bullet list</h3>
+<p>Think bullets are for chumps? Use class <code>.no-bullet</code>.</p>
+
+<div class="callout">
+ <ul class="no-bullet">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ul>
+</div>
+
+<h3>Definition list</h2>
+<p>A definition list (<code><dl></code>) is used to display name-value pairs, like metadata or a dictionary definition. Each term (<code><dt></code>) is paired with one or more definitions (<code><dd></code>).</p>
+
+<div class="callout">
+ <dl>
+ <dt>Time</dt>
+ <dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.</dd>
+ <dt>Space</dt>
+ <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
+ <dd>The dimensions of height, depth, and width within which all things exist and move.</dd>
+ </dl>
+</div>
+
+<h3>Icon list</h2>
+<p>Want to use the font icons as your "bullet"? Add the class <code>.icon-bullet</code> to your <code><li></code> and then insert the icon code at the start of list item.</p>
+
+<div class="callout">
+ <ul>
+ <li class="icon-bullet"><span class="icon icon-socialmedia" data-icon="X"></span> List item with a much longer description or more content because text is the way to go when doing a really long list item.</li>
+ <li>No icon</li>
+ <li class="icon-bullet"><span class="icon icon-species" data-icon="D"></span> A dolphin list item</li>
+ <li>List item</li>
+ </ul>
+</div>
+
+<h3>Horizontal list (AKA: pagers)</h2>
+<p>Have items you want to show horizontall and a using the grid layout is too much, here are a few of techniques:</p>
+
+<h4>Horizontal items</h4>
+<p>Combine a <code>ul</code> with class <code>.inline</code>.</p>
+
+<div class="callout sans-serif">
+ <ul class="inline">
+ <li><a href="#">Test item</a></li>
+ <li><a href="#" class="active">Active item</a></li>
+ <li><a href="#">Third item</a></li>
+ <li><a href="#"><span class="icon icon-species" data-icon="D"></span> A dolphin!</a></li>
+ </ul>
+</div>
+
+<h4>Badge</h4>
+<div class="row">
+ <div class="columns medium-7">
+ <p>Combine a <code>ul</code> with class <code>.inline</code>, then give your <code>li</code> a <code>.badge</code>.</p>
+
+ <p>The <code>.lead</code> class on the <code>ul</code> bumps up the size of the font.</p>
+ </div>
+
+ <div class="columns medium-5 callout">
+ <ul class="inline lead">
+ <li><a href="#" class="secondary badge">2</a></li>
+ <li><a href="#" class="success badge">3</a></li>
+ <li><a href="#" class="alert badge">A</a></li>
+ <li><a href="#" class="warning badge"><span class="icon icon-species" data-icon="D"></span></a></li>
+ </ul>
+ </div>
+</div>
+
+<h4>Pager</h4>
+<div class="">
+ <ul class="pagination text-center" role="navigation" aria-label="Pagination">
+ <li class="pagination-previous disabled">Previous</li>
+ <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
+ <li><a href="#" aria-label="Page 2">2</a></li>
+ <li><a href="#" aria-label="Page 3">3</a></li>
+ <li><a href="#" aria-label="Page 4">4</a></li>
+ <li class="ellipsis"></li>
+ <li><a href="#" aria-label="Page 12">12</a></li>
+ <li><a href="#" aria-label="Page 13">13</a></li>
+ <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
+ </ul>
+</div>
+
+<h4>Read more links</h4>
+<p>You can read more as a button, if it's a primary call to action, or a link, if it's not as important.</p>
+
+<div data-equalizer>
+
+ <div class="columns small-6 callout" data-equalizer-watch>
+ <h6>High priority read more links</h6>
+ <a href="#" class="readmore button">Read more</a>
+ </div>
+
+ <div class="columns small-6 callout" data-equalizer-watch>
+ <h6>Lower priority read more links</h6>
+ <a href="#" class="readmore">Read more</a>
+ </div>
+
+</div>
+
+<div class="row">
+ <div class="column">
+ {{> lists}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/lists/lists.html b/src/building-blocks/lists/lists.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/lists/lists.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/lists/lists.yml b/src/building-blocks/lists/lists.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fd48263272cce4d71fc6f430f6a0db5bde3478cc
--- /dev/null
+++ b/src/building-blocks/lists/lists.yml
@@ -0,0 +1,12 @@
+name: 'Lists'
+tags:
+ - typography
+ - lists
+category: media
+description: To come.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/live-filter/layout.html b/src/building-blocks/live-filter/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..cc31ff976da59b149c0b69d919c176e7deeafe97
--- /dev/null
+++ b/src/building-blocks/live-filter/layout.html
@@ -0,0 +1,17 @@
+{{#markdown}}
+
+If you have mutliple rows of data you'd like the use to be able to quickly sift through (perhaps combining with table sorting) we bundle the aptly named <a href="https://github.com/mikemerritt/LiveFilter">LiveFilter plugin</a>. It is not loaded by default and you'll need to load <code>LiveFilter/js/jquery.liveFilter.js</code>.
+
+There are many such JS plugins available, but we found this one to work well and do just enough and <a href="https://github.com/mikemerritt/LiveFilter/pull/14/commits/6f6023d108d4b3a70157392f3231e245610dcc72">easily modldable to our needs</a>.
+
+#### Bonus notes<
+<ul>
+ <li>The sample <code>input</code> has had <code>.clearable</code> added so a clear icon shows after text has been added by the user.</li>
+ <li>We hint about the action that will be performed by placing a search icon to the left of the box, it does not however act as a button as the form is automatically updated on keypress.</li>
+</ul>
+
+<div class="row"><div class="column">
+{{> live-filter}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/live-filter/live-filter.html b/src/building-blocks/live-filter/live-filter.html
new file mode 100644
index 0000000000000000000000000000000000000000..56c4f568732ffa5026e2ecbaaeb10cfc070f0f17
--- /dev/null
+++ b/src/building-blocks/live-filter/live-filter.html
@@ -0,0 +1,154 @@
+<!-- Include live filtering -->
+<!-- Note that we've loaded this with "defer", this technique may not be appropriate for your uses. -->
+<!-- If not, load this JS after jQuery. -->
+<script defer="defer" src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/LiveFilter/js/jquery.liveFilter.js"></script>
+
+<div id="livefilterdemo" class="">
+ <h3>Some content to scan</h3>
+ <div class="input-group">
+ <span class="input-group-label"><i data-icon="1" class="icon icon-functional"></i></span>
+ <input class="filter clearable input-group-field" type="text" value="" />
+ </div>
+
+ <div class="row small-up-1 medium-up-2 large-up-3" data-equalizer>
+ <div class="epmc_citation_container ng-scope live-filter-target-granularity column" data-equalizer-watch>
+ <span class="label label-success ng-binding">0 citation<!-- ngIf: citation.citedByCount != 1 --><span ng-if="citation.citedByCount != 1" class="ng-scope">s</span><!-- end ngIf: citation.citedByCount != 1 --></span>
+ <h5 class="epmc_citation_title">
+ <a class="epmc_citation_link ng-binding" target="_blank" href="//europepmc.org/abstract/med/24455489">Evidence That GRIN2A Mutations in Melanoma Correlate with Decreased Survival.</a>
+ </h5>
+ <div class="epmc_citation_subdata small">
+ <div class="epmc_citation_authors">
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"D'mello SA">
+ D'mello SA</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Flanagan JU">Flanagan JU</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Green TN">Green TN</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Leung EY">Leung EY</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Furneaux CE">Furneaux CE</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"During MJ">During MJ</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Finlay GJ">Finlay GJ</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Baguley BC">Baguley BC</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Kalev-Zylinska ML">Kalev-Zylinska ML</a>
+ </div>
+ <div class="epmc_citation_journal">
+ <a href="//europepmc.org/search?query=JOURNAL:"Front Oncol"" class="epmc_citation_link ng-binding">Front Oncol</a> <span class="ng-binding">2014 3<!-- ngIf: citation.issue -->:333</span>
+ </div>
+ <div class="epmc_citation_source ng-binding">PMID:24455489 <!-- ngIf: citation.pmcid --><span ng-if="citation.pmcid" class="ng-binding ng-scope">PMCID:PMC3888952</span><!-- end ngIf: citation.pmcid --></div>
+ </div>
+ </div><!-- end ngRepeat: citation in citations.all track by $index -->
+
+ <div class="epmc_citation_container ng-scope live-filter-target-granularity column" data-equalizer-watch>
+ <span class="label label-success ng-binding">10 citation<!-- ngIf: citation.citedByCount != 1 --><span ng-if="citation.citedByCount != 1" class="ng-scope">s</span><!-- end ngIf: citation.citedByCount != 1 --></span>
+ <h5 class="epmc_citation_title">
+ <a class="epmc_citation_link ng-binding" target="_blank" href="//europepmc.org/abstract/med/24275569">An enzyme assisted RP-RPLC approach for in-depth analysis of human liver phosphoproteome.</a>
+ </h5>
+ <div class="epmc_citation_subdata small">
+ <div class="epmc_citation_authors">
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Bian Y">
+ Bian Y</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Song C">Song C</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Cheng K">Cheng K</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Dong M">Dong M</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Wang F">Wang F</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Huang J">Huang J</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Sun D">Sun D</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Wang L">Wang L</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Ye M">Ye M</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Zou H">Zou H</a>
+ </div>
+ <div class="epmc_citation_journal">
+ <a href="//europepmc.org/search?query=JOURNAL:"J Proteomics"" class="epmc_citation_link ng-binding">J Proteomics</a> <span class="ng-binding">2014 96<!-- ngIf: citation.issue -->:253-262</span>
+ </div>
+ <div class="epmc_citation_source ng-binding">PMID:24275569 <!-- ngIf: citation.pmcid --></div>
+ </div>
+ </div><!-- end ngRepeat: citation in citations.all track by $index -->
+
+ <div class="epmc_citation_container ng-scope live-filter-target-granularity column" data-equalizer-watch>
+ <span class="label label-success ng-binding">2 citation<!-- ngIf: citation.citedByCount != 1 --><span ng-if="citation.citedByCount != 1" class="ng-scope">s</span><!-- end ngIf: citation.citedByCount != 1 --></span>
+ <h5 class="epmc_citation_title">
+ <a class="epmc_citation_link ng-binding" target="_blank" href="//europepmc.org/abstract/med/23907581">Lys63-linked polyubiquitination of BRAF at lysine 578 is required for BRAF-mediated signaling.</a>
+ </h5>
+ <div class="epmc_citation_subdata small">
+ <div class="epmc_citation_authors">
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"An L">
+ An L</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Jia W">Jia W</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Yu Y">Yu Y</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Zou N">Zou N</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Liang L">Liang L</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Li G">Li G</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Yang J">Yang J</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Zhang H">Zhang H</a>
+ </div>
+ <div class="epmc_citation_journal">
+ <a href="//europepmc.org/search?query=JOURNAL:"Sci Rep"" class="epmc_citation_link ng-binding">Sci Rep</a> <span class="ng-binding">2013 3<!-- ngIf: citation.issue -->:2344</span>
+ </div>
+ <div class="epmc_citation_source ng-binding">PMID:23907581 <!-- ngIf: citation.pmcid --><span ng-if="citation.pmcid" class="ng-binding ng-scope">PMCID:PMC3731650</span><!-- end ngIf: citation.pmcid --></div>
+ </div>
+ </div><!-- end ngRepeat: citation in citations.all track by $index -->
+
+ <div class="epmc_citation_container ng-scope live-filter-target-granularity column" data-equalizer-watch>
+ <span class="label label-success ng-binding">14 citation<!-- ngIf: citation.citedByCount != 1 --><span ng-if="citation.citedByCount != 1" class="ng-scope">s</span><!-- end ngIf: citation.citedByCount != 1 --></span>
+ <h5 class="epmc_citation_title">
+ <a class="epmc_citation_link ng-binding" target="_blank" href="//europepmc.org/abstract/med/1630826">Chromosomal assignment of two human B-raf(Rmil) proto-oncogene loci: B-raf-1 encoding the p94Braf/Rmil and B-raf-2, a processed pseudogene.</a>
+ </h5>
+ <div class="epmc_citation_subdata small">
+ <div class="epmc_citation_authors">
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Eychène A">
+ Eychène A</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Barnier JV">Barnier JV</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Apiou F">Apiou F</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Dutrillaux B">Dutrillaux B</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Calothy G">Calothy G</a>
+ </div>
+ <div class="epmc_citation_journal">
+ <a href="//europepmc.org/search?query=JOURNAL:"Oncogene"" class="epmc_citation_link ng-binding">Oncogene</a> <span class="ng-binding">1992 7<!-- ngIf: citation.issue --><span ng-if="citation.issue" class="ng-binding ng-scope">(8)</span><!-- end ngIf: citation.issue -->:1657-1660</span>
+ </div>
+ <div class="epmc_citation_source ng-binding">PMID:1630826 <!-- ngIf: citation.pmcid --></div>
+ </div>
+ </div><!-- end ngRepeat: citation in citations.all track by $index -->
+
+ <div class="epmc_citation_container ng-scope live-filter-target-granularity column" data-equalizer-watch>
+ <span class="label label-success ng-binding">54 citation<!-- ngIf: citation.citedByCount != 1 --><span ng-if="citation.citedByCount != 1" class="ng-scope">s</span><!-- end ngIf: citation.citedByCount != 1 --></span>
+ <h5 class="epmc_citation_title">
+ <a class="epmc_citation_link ng-binding" target="_blank" href="//europepmc.org/abstract/med/3043188">B-raf, a new member of the raf family, is activated by DNA rearrangement.</a>
+ </h5>
+ <div class="epmc_citation_subdata small">
+ <div class="epmc_citation_authors">
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Ikawa S">
+ Ikawa S</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Fukui M">Fukui M</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Ueyama Y">Ueyama Y</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Tamaoki N">Tamaoki N</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Yamamoto T">Yamamoto T</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Toyoshima K">Toyoshima K</a>
+ </div>
+ <div class="epmc_citation_journal">
+ <a href="//europepmc.org/search?query=JOURNAL:"Mol Cell Biol"" class="epmc_citation_link ng-binding">Mol Cell Biol</a> <span class="ng-binding">1988 8<!-- ngIf: citation.issue --><span ng-if="citation.issue" class="ng-binding ng-scope">(6)</span><!-- end ngIf: citation.issue -->:2651-2654</span>
+ </div>
+ <div class="epmc_citation_source ng-binding">PMID:3043188 <!-- ngIf: citation.pmcid --><span ng-if="citation.pmcid" class="ng-binding ng-scope">PMCID:PMC363468</span><!-- end ngIf: citation.pmcid --></div>
+ </div>
+ </div><!-- end ngRepeat: citation in citations.all track by $index -->
+
+ <div class="epmc_citation_container ng-scope live-filter-target-granularity column" data-equalizer-watch>
+ <span class="label label-success ng-binding">39 citation<!-- ngIf: citation.citedByCount != 1 --><span ng-if="citation.citedByCount != 1" class="ng-scope">s</span><!-- end ngIf: citation.citedByCount != 1 --></span>
+ <h5 class="epmc_citation_title">
+ <a class="epmc_citation_link ng-binding" target="_blank" href="//europepmc.org/abstract/med/11410590">Serum- and glucocorticoid-inducible kinase SGK phosphorylates and negatively regulates B-Raf.</a>
+ </h5>
+ <div class="epmc_citation_subdata small">
+ <div class="epmc_citation_authors">
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Zhang BH">
+ Zhang BH</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Tang ED">Tang ED</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Zhu T">Zhu T</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Greenberg ME">Greenberg ME</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Vojtek AB">Vojtek AB</a>
+ <a class="epmc_citation_link" target="_blank" href="//europepmc.org/search?query=AUTH:"Guan KL">Guan KL</a>
+ </div>
+ <div class="epmc_citation_journal">
+ <a href="//europepmc.org/search?query=JOURNAL:"J Biol Chem"" class="epmc_citation_link ng-binding">J Biol Chem</a> <span class="ng-binding">2001 276<!-- ngIf: citation.issue --><span ng-if="citation.issue" class="ng-binding ng-scope">(34)</span><!-- end ngIf: citation.issue -->:31620-31626</span>
+ </div>
+ <div class="epmc_citation_source ng-binding">PMID:11410590 <!-- ngIf: citation.pmcid --></div>
+ </div>
+ </div> <!-- end ngRepeat: citation in citations.all track by $index -->
+ </div>
+</div> <!-- /livefilter -->
diff --git a/src/building-blocks/live-filter/live-filter.js b/src/building-blocks/live-filter/live-filter.js
new file mode 100644
index 0000000000000000000000000000000000000000..93e330176cdcfa6c8f717c83ff6ffa037bcc34f0
--- /dev/null
+++ b/src/building-blocks/live-filter/live-filter.js
@@ -0,0 +1,9 @@
+window.addEventListener('load',function() {
+ $(document).ready(function() {
+ $('#livefilterdemo').liveFilter({
+ fitlerTargetCustomDiv: 'div.live-filter-target-granularity',
+ defaultText: 'Type to filter these paper references',
+ noMatches: '<p>No matching papers found.</p><a class="button" href="#">You could add a link to advanced search</a> '
+ });
+ });
+});
diff --git a/src/building-blocks/live-filter/live-filter.yml b/src/building-blocks/live-filter/live-filter.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c50abe9751ee6d7a552d8aca43c5607a97e993e4
--- /dev/null
+++ b/src/building-blocks/live-filter/live-filter.yml
@@ -0,0 +1,12 @@
+name: 'Live filtering'
+tags:
+- typography
+- search
+category: media
+description: If you have mutliple rows of data you'd like the use to be able to quickly sift through (perhaps combining with table sorting) we bundle the aptly named LiveFilter plugin
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/menu/layout.html b/src/building-blocks/menu/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..393e03df52ba77ef113655a1171b287122b021a9
--- /dev/null
+++ b/src/building-blocks/menu/layout.html
@@ -0,0 +1,50 @@
+{{#markdown}}
+
+For information on JavaScript-powered drop-down menus, [consult the Foundation documentation](http://foundation.zurb.com/sites/docs/dropdown-menu.html).
+
+### A basic menu
+
+`ul.menu`
+
+<ul class="menu">
+ <li><a href="#">Item 1</a></li>
+ <li><a class="active" href="#">Item 2 (active)</a></li>
+ <li><a href="#">Item 3</a></li>
+ <li><a href="#">Item 4</a></li>
+</ul>
+
+### A vertical menu
+
+`ul.menu.vertical`
+
+<ul class="menu vertical">
+ <li><a href="#">Item 1</a></li>
+ <li><a class="active" href="#">Item 2 (active)</a></li>
+ <li><a href="#">Item 3</a></li>
+ <li><a href="#">Item 4</a></li>
+</ul>
+
+### A vertical tree menu
+
+`ul.tree.vertical`
+
+<ul class="tree vertical">
+ <li><a href="#">Item 1</a></li>
+ <li><a href="#">Item 2</a></li>
+ <li><a href="#">Sub-parent</a>
+ <ul class="tree vertical">
+ <li><a href="#">Child 1</a></li>
+ <li><a class="active" href="#">Child 2 (active)</a></li>
+ <li><a href="#">Child 3</a></li>
+ <li><a href="#">Child 4</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item 4</a></li>
+</ul>
+
+
+<div class="row"><div class="column">
+{{> menu}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/menu/menu.html b/src/building-blocks/menu/menu.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/menu/menu.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/menu/menu.yml b/src/building-blocks/menu/menu.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9de07e2d4ed51080d333a46cd81949d77c87a28d
--- /dev/null
+++ b/src/building-blocks/menu/menu.yml
@@ -0,0 +1,13 @@
+name: 'Menus'
+tags:
+ - navigation
+ - layout
+ - lists
+category: media
+description: Horizontal, vertical, and tree types of menus.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/meta-copy/layout.html b/src/building-blocks/meta-copy/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..0fd904abbc8866a8af63999ff9ff00e6d8ceaa00
--- /dev/null
+++ b/src/building-blocks/meta-copy/layout.html
@@ -0,0 +1,53 @@
+{{#markdown}}
+
+Meta copy is the content of meta tags in a page - keywords and description. Ideally, words from your meta copy should be repeated in the macro copy of your page. Apart from being clear, this may help the page ranking in search engines.
+
+### Keywords
+<p>Think of these as tags that help to categorise the content of a page. Ten or 12 is probably a good maximum number to have.</p>
+<h3>Description</h3>
+<p>Keep it brief - just describe what this page is about.</p>
+
+<h3>Meta tags</h3>
+
+#### EBI Content review
+EMBL-EBI uses several special meta tags to help ensure content can owners can be updated, and that content is up to date.
+
+<p><code class="block">
+ <meta name="ebi:owner" content="John Doe"> <!-- Who should be contacted about changes -->
+ <br/>
+ <meta name="ebi:review-cycle" content="30"> <!-- In days, how often should the content be reviewed -->
+ <br/>
+ <meta name="ebi:last-review" content="2015-12-20"> <!-- The last time the content was reviewed -->
+ <br/>
+ <meta name="ebi:expiry" content="2016-01-20"> <!-- When this content is no longer relevant -->
+</code></p>
+
+<h4>Local masthead image and colour</h4>
+<div class="row">
+ <div class="columns medium-8">
+ <p>You can use thesse to specify colours or imagery you'd like for the local masthead. You could achieve a similar look through CSS, but this method offers more reusability and allows for planned future expansion, such as dynamic selection.</p>
+
+ <code class="block">
+ <meta name="ebi:localmasthead-color" content="#091314">
+ <br/>
+ <meta name="ebi:localmasthead-image" content="//ebiwd.github.io/EBI-Framework/images/backgrounds/embl-ebi-background-4.jpg">
+ </code>
+ </div>
+
+ <div class="small callout columns medium-4">
+ <p><img src="https://ebiwd.github.io/EBI-Framework/images/backgrounds/training-yellow-4.jpg"></p>
+ <p>To format your image, note the it will be alligned to the top-right of the local masthead, and you should account for wide screen displays.</p>
+ Here are some recommended specs:
+ <ul>
+ <li>width: 2462px</li>
+ <li>height: 322px</li>
+ </ul>
+ </div>
+
+</div>
+
+<div class="row"><div class="column">
+{{> meta-copy}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/meta-copy/meta-copy.html b/src/building-blocks/meta-copy/meta-copy.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/meta-copy/meta-copy.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/meta-copy/meta-copy.yml b/src/building-blocks/meta-copy/meta-copy.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0e5695a799941b5c682a7db2093d56f18bb596f7
--- /dev/null
+++ b/src/building-blocks/meta-copy/meta-copy.yml
@@ -0,0 +1,13 @@
+name: 'Meta copy'
+tags:
+- search
+- writing
+- visuals
+category: media
+description: To come
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/pullquotes/layout.html b/src/building-blocks/pullquotes/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..e52c69607dff60efdadb18fbda0dcb6bb7f736b0
--- /dev/null
+++ b/src/building-blocks/pullquotes/layout.html
@@ -0,0 +1,9 @@
+{{#markdown}}
+
+As needs vary, we have designed three basic variations.
+
+<div class="row"><div class="column">
+{{> pullquotes}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/pullquotes/pullquotes.html b/src/building-blocks/pullquotes/pullquotes.html
new file mode 100644
index 0000000000000000000000000000000000000000..4ff6675de238a6132af9f01900aa064a5b2a027e
--- /dev/null
+++ b/src/building-blocks/pullquotes/pullquotes.html
@@ -0,0 +1,15 @@
+<blockquote class="">
+ A pretty basic thing to say: I once was a child.
+</blockquote>
+
+<p>You can enhance it by adding class <code>.lead</code> and the size will grow and the line drop:</p>
+
+<blockquote class="lead">
+ A slightly more interesting thing to say: I once was a squirrel.
+</blockquote>
+
+<p>And for added emphasis you can add a left quotation mark with <code>.quote</code>, and even a splash of colour:</p>
+
+<blockquote class="lead quote industry-color">
+ You can't be friends with a squirrel! A squirrel is just a rat with a cuter outfit. <cite>Sarah Jessica Parker</cite>
+</blockquote>
diff --git a/src/building-blocks/pullquotes/pullquotes.yml b/src/building-blocks/pullquotes/pullquotes.yml
new file mode 100644
index 0000000000000000000000000000000000000000..67463c2fe6931b6c426cc66cd100c8387ee02a00
--- /dev/null
+++ b/src/building-blocks/pullquotes/pullquotes.yml
@@ -0,0 +1,11 @@
+name: 'Pullquotes'
+tags:
+ - typography
+category: media
+description: Also known as a "blockquote", use this to draw attention to text
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/related-links/layout.html b/src/building-blocks/related-links/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..f4bb2dde25e583e8a938dfd000440de3ba93b8bf
--- /dev/null
+++ b/src/building-blocks/related-links/layout.html
@@ -0,0 +1,57 @@
+{{#markdown}}
+
+<div class="row">
+ <div class="columns medium-6">
+ <p>By default the basic markup will show in three columns.</p>
+
+ <p>Note: Typically these are expected to be used at the top of the right column and have a top margin of 4.5rem to align with the content. As this margin is not useful in this context we have disabled with <code>.margin-top-none</code></p>
+ </div>
+
+ <div class="columns medium-6">
+ <div class="related margin-top-none">
+ <h3>Releated</h3>
+
+ <ul>
+ <li><a href="//wwwdev.ebi.ac.uk/about/news" class="icon icon-generic" data-icon="N"> News </a></li>
+ <li><a href="//wwwdev.ebi.ac.uk/about/jobs" class="icon icon-generic" data-icon="c"> Jobs</a></li>
+ <li><a href="http://www.embl.de/aboutus/index.html" class="icon icon-generic" data-icon="&"> EMBL</a></li>
+ <li><a href="//wwwdev.ebi.ac.uk/services" class="icon icon-generic" data-icon="("> Services</a></li>
+ <li><a href="//wwwdev.ebi.ac.uk/support" class="icon icon-generic" data-icon="s"> Support</a></li>
+ <li><a href="//wwwdev.ebi.ac.uk/about/travel" class="icon icon-generic" data-icon="]"> Visit us</a></li>
+ </ul>
+
+ </div>
+ </div>
+</div>
+
+
+<div class="row">
+ <div class="columns medium-8">
+ <h3>Specify the number of columns</h3>
+ <p>Alternativley, you can use the <code>.small-up-3</code> <a href="../grid">grid method</a> to specify variable 1, 2, 3, 4, N columns.</p>
+
+ <div class="related margin-top-none">
+ <h3>Releated</h3>
+
+ <ul class="small-up-3 small-collapse">
+ <li class="column"><a href="//wwwdev.ebi.ac.uk/about/news" class="icon icon-generic" data-icon="N"> News </a></li>
+ <li class="column"><a href="//wwwdev.ebi.ac.uk/about/jobs" class="icon icon-generic" data-icon="c"> Jobs</a></li>
+ <li class="column"><a href="http://www.embl.de/aboutus/index.html" class="icon icon-generic" data-icon="&"> EMBL</a></li>
+ <li class="column"><a href="//wwwdev.ebi.ac.uk/about/people" class="icon icon-generic" data-icon="C"> People and groups </a></li>
+ <li class="column"><a href="//wwwdev.ebi.ac.uk/services" class="icon icon-generic" data-icon="("> Services</a></li>
+ <li class="column"><a href="//wwwdev.ebi.ac.uk/training/online" class="icon icon-generic" data-icon="T"> Train online</a></li>
+ <li class="column"><a href="//wwwdev.ebi.ac.uk/support" class="icon icon-generic" data-icon="s"> Support</a></li>
+ <li class="column"><a href="//wwwdev.ebi.ac.uk/about/travel" class="icon icon-generic" data-icon="]"> Visit us</a></li>
+ </ul>
+
+ </div>
+
+ </div>
+
+</div>
+
+<div class="row"><div class="column">
+{{> related-links}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/related-links/related-links.html b/src/building-blocks/related-links/related-links.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/related-links/related-links.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/related-links/related-links.yml b/src/building-blocks/related-links/related-links.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3ab729bf864fd774a7fc812e6a2ad27751350e9e
--- /dev/null
+++ b/src/building-blocks/related-links/related-links.yml
@@ -0,0 +1,12 @@
+name: 'Related links box'
+tags:
+ - links
+ - navigation
+category: media
+description: Formerly the "popular" box
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/search/layout.html b/src/building-blocks/search/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..81c6b277ce0211eb17c1771e89a4e011b43d7d19
--- /dev/null
+++ b/src/building-blocks/search/layout.html
@@ -0,0 +1,84 @@
+{{#markdown}}
+
+<!-- local-search -->
+<h3>Search in local masthead</h3>
+<p>You may place your service search in the local masthead using this pattern. This is the most widely used approach, if you do so be sure to include the id <code>#local-search</code> on your <code>form</code> element.</p>
+
+<p>When your page contains an element with the id of <code>#local-search</code> or <code>#ebi_search</code>, the class <code>.no-global-search</code> will be added to the <code>body</code> tag and the black bar (gloabl-masthead) search will be disabled, as has happened on this page.</p>
+
+<div id="local-masthead" class="meta-background-color meta-background-image columns">
+ <header>
+
+ <div class="masthead row">
+
+ <!-- local-title -->
+ <div class="columns medium-7" id="local-title">
+ <h1><a href="#" title="Back to EBI Style Lab homepage">Sample masthead</a></h1>
+ </div>
+ <!-- /local-title -->
+ <div class="columns medium-5">
+ <form id="local-search" name="local-search" action="[search-action]" method="post">
+ <fieldset>
+ <div class="input-group margin-bottom-none">
+ <input type="text" name="first" id="local-searchbox" placeholder="Search this service" class="input-group-field">
+ <div class="input-group-button">
+ <input type="submit" name="submit" value="1" class="button icon icon-functional">
+ </div>
+ </div>
+ <small class="">
+ <!-- If your search is more complex than just a keyword search, you can link to an Advanced Search -->
+ <!-- <span class="adv"><a href="../search" id="adv-search" title="Advanced">Advanced</a></span> | -->
+ <!-- Include some example searchterms - keep them short and few. -->
+ <a href="[search-url-1]">[search-1]</a>
+ <a href="[search-url-1]">[search-2]</a>
+ <a href="[search-url-1]">[search-3]</a>
+ </small>
+ </fieldset>
+ </form>
+ <!-- /local-search -->
+ </div>
+
+ </div>
+
+ </header>
+
+</div>
+
+
+
+
+<h3 class="padding-top-large">Standalone search</h3>
+
+<p>If you want to place your site search inside your main content, use this pattern it's much the same as the above.</p>
+
+<div class="row">
+ <div class="columns medium-5 medium-push-2 callout">
+ <form id="content-search" name="content-search" action="[search-action]" method="post">
+ <h4>Search this project</h4>
+ <fieldset>
+ <div class="input-group margin-bottom-none">
+ <input type="text" name="first" id="content-searchbox" class="input-group-field">
+ <div class="input-group-button">
+ <input type="submit" name="submit" value="1" class="button icon icon-functional">
+ </div>
+ </div>
+ <small class="">
+ <!-- If your search is more complex than just a keyword search, you can link to an Advanced Search -->
+ <span class="adv"><a href="../search" id="adv-search" title="Advanced">Advanced</a></span>
+ |
+ <!-- Include some example searchterms - keep them short and few. -->
+ <a href="[search-url-1]">[search-1]</a>
+ <a href="[search-url-1]">[search-2]</a>
+ <a href="[search-url-1]">[search-3]</a>
+ </small>
+ </fieldset>
+ </form>
+ </div>
+</div>
+
+
+<div class="row"><div class="column">
+{{> search}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/search/search.html b/src/building-blocks/search/search.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/search/search.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/search/search.yml b/src/building-blocks/search/search.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c87eb9e1e14d33de0eebb293c0412196f00d7b70
--- /dev/null
+++ b/src/building-blocks/search/search.yml
@@ -0,0 +1,11 @@
+name: 'Search'
+tags:
+ - search
+category: media
+description: Use these patterns to add search your project or subsite.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/select-box/layout.html b/src/building-blocks/select-box/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..a50f211eb7a138dceadec4cb44c57eb5871885ed
--- /dev/null
+++ b/src/building-blocks/select-box/layout.html
@@ -0,0 +1,27 @@
+{{#markdown}}
+
+<a href="https://github.com/jshjohnson/Choices">Choices.js</a> is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
+
+To use:
+
+- Include these two files:
+<div class="callout" markdown="1">
+``` html
+<link rel="stylesheet" href="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/Choices/assets/styles/css/choices.min.css">
+<script src="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/Choices/assets/scripts/dist/choices.min.js"></script>
+```
+</div>
+- On the `<select>` element, add class `.form-control`
+- Invoke with the `Choices` function (view the source)
+- For further configuration options, visit the <a href="https://github.com/jshjohnson/Choices">Choices GitHub repo</a>.
+
+Known caveats:
+
+- If you use `optgroup`, all `option` elements must be inside groups
+- `label` elements [cannot](https://github.com/jshjohnson/Choices/issues/57) wrap the `select`
+
+<div class="row"><div class="column">
+{{> select-box}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/select-box/select-box.html b/src/building-blocks/select-box/select-box.html
new file mode 100644
index 0000000000000000000000000000000000000000..008d0415c236b9d5518392f7f654624695eb3eb8
--- /dev/null
+++ b/src/building-blocks/select-box/select-box.html
@@ -0,0 +1,124 @@
+<link rel="stylesheet" href="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/Choices/assets/styles/css/choices.min.css">
+<script src="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/Choices/assets/scripts/dist/choices.min.js"></script>
+
+<label for="choices-multiple-remove-button">Demo</label>
+<select class="form-control" name="choices-multiple-remove-button" id="choices-multiple-remove-button" placeholder="This is a placeholder" multiple>
+<option value="Dropdown item 1" selected>Dropdown item 1</option>
+<option value="Dropdown item 2">Dropdown item 2</option>
+<option value="Dropdown item 3">Dropdown item 3</option>
+<option value="Dropdown item 4">Dropdown item 4</option>
+</select>
+
+<!-- Single item -->
+<div markdown="0">
+<label for="topic">Single item selection</label>
+<select name="topic" required id="topic" class="form-control">
+ <optgroup label="General">
+ <option value="EBI HELP: General Feedback" selected="selected">General Feedback or Please Select</option>
+ <option value="EBI HELP: Usability">Sign up for usability testing</option>
+ </optgroup>
+ <optgroup label="Genes, Genomes & Variation">
+ <option value="EBI HELP: CRAM">CRAM</option>
+ <option value="EBI HELP: DGVa">Database of Genomic Variants archive (DGVa)</option>
+ <option value="EBI HELP: EMBL-Bank">EMBL-Bank</option>
+ <option value="EBI HELP: EMBL-SVA">ENA Sequence Version Archive (SVA)</option>
+ <option value="EBI HELP: EGA">European Genome-phenome Archive (EGA)</option>
+ <option value="EBI HELP: ENA">European Nucleotide Archive (ENA)</option>
+ <option value="EBI HELP: EVA">European Variation Archive (EVA)</option>
+ <option value="EBI HELP: IMGT/HLA">IMGT/HLA</option>
+ <option value="EBI HELP: IPD">Immuno Polymorphism Database (IPD)</option>
+ <option value="EBI HELP: Metagenomics">Metagenomics</option>
+ <option value="EBI HELP: Webin">Webin</option>
+ </optgroup>
+ <optgroup label="RNA, Protein & Metabolite Expression">
+ <option value="EBI HELP: ArrayExpress">ArrayExpress</option>
+ <option value="EBI HELP: EGA">European Genome-phenome Archive (EGA)</option>
+ <option value="EBI HELP: GXA">Expression Atlas</option>
+ <option value="EBI HELP: MetabolLights">MetaboLights: Metabolomics archive and reference database</option>
+ <option value="EBI HELP: PRIDE">PRoteomics IDEntifications database (PRIDE)</option>
+ </optgroup>
+ <optgroup label="Protein Sequences, Families & Motifs">
+ <option value="EBI HELP: Enzyme Portal">Enzyme Portal</option>
+ <option value="EBI HELP: GOA">Gene Ontology Annotation (UniProt-GOA)</option>
+ <option value="EBI HELP: IntEnz">Integrated relational Enzyme database (IntEnz)</option>
+ <option value="EBI HELP: InterPro">InterPro: protein sequence analysis & classification</option>
+ <option value="EBI HELP: PRIDE">Proteomics Identifications database (PRIDE)</option>
+ <option value="EBI HELP: TreeFam">TreeFam - database of animal gene trees</option>
+ <option value="EBI HELP: UniProt">UniProt: The Universal Protein Resource</option>
+ <option value="EBI HELP: UniParc">UniProt Archive (UniParc)</option>
+ <option value="EBI HELP: UniSave">UniProtKB Sequence/Annotation Version Archive (UniSave)</option>
+ </optgroup>
+ <optgroup label="Molecular & Cellular Structures">
+ <option value="EBI HELP: EMDB">Electron Microscopy Data Bank (EMDB)</option>
+ <option value="EBI HELP: PDB">Protein Data Bank (PDB)</option>
+ <option value="EBI HELP: PDBe">Protein Data Bank in Europe (PDBe)</option>
+ <option value="Thornton group: PDBsum">PDBsum</option>
+ </optgroup>
+ <optgroup label="Reactions, Interactions & Pathways">
+ <option value="EBI HELP: BioModels">BioModels Database</option>
+ <option value="EBI HELP: IntAct">IntAct Molecular Interaction Database</option>
+ <option value="EBI HELP: Rhea">Rhea: Enzyme-catalysed reactions</option>
+ <option value="EBI HELP: SBO">Systems Biology Ontology (SBO)</option>
+ </optgroup>
+ <optgroup label="Chemogenomics & Metabolomics">
+ <option value="EBI HELP: ChEBI">Chemical Entities of Biological Interest (ChEBI)</option>
+ <option value="EBI HELP: ChEMBL">ChEMBL: Bioactive data for drug discovery</option>
+ <option value="EBI HELP: Enzyme Portal">Enzyme Portal</option>
+ <option value="EBI HELP: MetabolLights">MetaboLights: Metabolomics archive and reference database</option>
+ <option value="EBI HELP: Rhea">Rhea: Enzyme-catalysed reactions</option>
+ </optgroup>
+ <optgroup label="Taxonomies & Controlled Vocabularies">
+ <option value="EBI HELP: ChEBI">Chemical Entities of Biological Interest (ChEBI)</option>
+ <option value="EBI HELP: EFO">Experimental Factor Ontology (EFO)</option>
+ <option value="EBI HELP: GO">Gene Ontology (GO)</option>
+ <option value="EBI HELP: IntEnz">Integrated relational Enzyme database (IntEnz)</option>
+ <option value="EBI HELP: MIRIAM">MIRIAM Registry</option>
+ <option value="EBI HELP: QuickGO">QuickGO</option>
+ <option value="EBI HELP: SBO">Systems Biology Ontology (SBO)</option>
+ </optgroup>
+
+ <optgroup label="Literature - Scientific Publications & Patents">
+ <option value="EBI HELP: Europe PMC">Europe PubMed Central (Europe PMC)</option>
+ <option value="EBI HELP: Patent Data">Patent Databases</option>
+ <option value="EBI HELP: Whatizit">Whatizit</option>
+ </optgroup>
+
+ <optgroup label="Cross-domain Tools & Resources">
+ <option value="EBI HELP: BLAST">BLAST Sequence Search</option>
+ <!-- option value="EBI HELP: BioMart">BioMart</option -->
+ <option value="EBI HELP: Clustal">ClustalW Multiple Sequence Alignment</option>
+ <option value="EBI HELP: EBI Search">EBI Search</option>
+ <!-- option value="EBI HELP: Enzyme Portal">Enzyme Portal</option -->
+ <option value="EBI HELP: FASTA">FASTA Sequence Search</option>
+ <option value="EBI HELP: identifiers.org">identifiers.org</option>
+ <option value="EBI HELP: Patent Data">Patent Data</option>
+ <option value="EBI HELP: Web Services">Web Services</option>
+ </optgroup>
+
+ <optgroup label="Misc.">
+ <option value="EBI HELP: Courses">Courses</option>
+ <option value="EBI HELP: Database Query">Database Query</option>
+ <option value="EBI HELP: Data Submission">Data Submission</option>
+ <option value="EBI HELP: Error Message">Error Message</option>
+ <option value="EBI HELP: Events Calendar">Events Calendar</option>
+ <option value="EBI HELP: Jobs">Jobs</option>
+ <option value="EBI HELP: Microarrays">Microarrays</option>
+ <option value="EBI HELP: PhD Program">PhD Program</option>
+ <option value="EBI HELP: Research">Research</option>
+ <option value="EBI HELP: Sequence Alignment">Sequence Alignment</option>
+ <option value="EBI HELP: Sequences">Sequences</option>
+ <option value="EBI HELP: Software Error">Software Error</option>
+ <option value="EBI HELP: Structures">Structures</option>
+ <option value="EBI HELP: Survey">Survey</option>
+ <option value="EBI HELP: Technical Services">Technical Services</option>
+ <option value="EBI HELP: Training & Education">Training & Education</option>
+ <option value="EBI HELP: Usability">Usability testing</option>
+ <option value="EBI HELP: Other">Other feedback</option>
+ </optgroup>
+</select>
+</div>
+<span class="form-error">Please select a relevant topic.</span>
+
+
+<!-- For syntax highlighting -->
+<link rel="stylesheet" href="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-code.css">
diff --git a/src/building-blocks/select-box/select-box.js b/src/building-blocks/select-box/select-box.js
new file mode 100644
index 0000000000000000000000000000000000000000..0d811fb1fe8734ef423849a0cbd4f33dd746b7ac
--- /dev/null
+++ b/src/building-blocks/select-box/select-box.js
@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function() {
+ var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
+ delimiter: ',',
+ editItems: true,
+ maxItemCount: 5,
+ removeItemButton: true,
+ });
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+ var supportFormSelect = new Choices('#topic', {
+ removeItemButton: true,
+ });
+});
diff --git a/src/building-blocks/select-box/select-box.yml b/src/building-blocks/select-box/select-box.yml
new file mode 100644
index 0000000000000000000000000000000000000000..94295cc78a5c7a5440a2d6aa04ec6a0851c821af
--- /dev/null
+++ b/src/building-blocks/select-box/select-box.yml
@@ -0,0 +1,11 @@
+name: 'Select box'
+tags:
+ - forms
+category: media
+description: Configurable select box/text input
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/spacing/layout.html b/src/building-blocks/spacing/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..5cf44c784796aa1c1022503fcf8eb3e7f00fe2a4
--- /dev/null
+++ b/src/building-blocks/spacing/layout.html
@@ -0,0 +1,72 @@
+{{#markdown}}
+
+### Margin
+
+```
+.margin-top-none { margin-top: none; }
+.margin-top-xsmall { margin-top: .1rem; }
+.margin-top-small { margin-top: .25rem; }
+.margin-top-medium { margin-top: .5rem; }
+.margin-top-large { margin-top: 1rem; }
+.margin-top-xlarge { margin-top: 2rem; }
+
+.margin-left-none { margin-left: none; }
+.margin-left-xsmall { margin-left: .1rem; }
+.margin-left-small { margin-left: .25rem; }
+.margin-left-medium { margin-left: .5rem; }
+.margin-left-large { margin-left: 1rem; }
+.margin-left-xlarge { margin-left: 2rem; }
+
+.margin-right-none { margin-right: none; }
+.margin-right-xsmall { margin-right: .1rem; }
+.margin-right-small { margin-right: .25rem; }
+.margin-right-medium { margin-right: .5rem; }
+.margin-right-large { margin-right: 1rem; }
+.margin-right-xlarge { margin-right: 2rem; }
+
+.margin-bottom-none { margin-bottom: none; }
+.margin-bottom-xsmall { margin-bottom: .1rem; }
+.margin-bottom-small { margin-bottom: .25rem; }
+.margin-bottom-medium { margin-bottom: .5rem; }
+.margin-bottom-large { margin-bottom: 1rem; }
+.margin-bottom-xlarge { margin-bottom: 2rem; }
+```
+
+### Padding
+```
+.padding-top-none { padding-top: none; }
+.padding-top-xsmall { padding-top: .1rem; }
+.padding-top-small { padding-top: .25rem; }
+.padding-top-medium { padding-top: .5rem; }
+.padding-top-large { padding-top: 1rem; }
+.padding-top-xlarge { padding-top: 2rem; }
+
+.padding-left-none { padding-left: none; }
+.padding-left-xsmall { padding-left: .1rem; }
+.padding-left-small { padding-left: .25rem; }
+.padding-left-medium { padding-left: .5rem; }
+.padding-left-large { padding-left: 1rem; }
+.padding-left-xlarge { padding-left: 2rem; }
+
+.padding-right-none { padding-right: none; }
+.padding-right-xsmall { padding-right: .1rem; }
+.padding-right-small { padding-right: .25rem; }
+.padding-right-medium { padding-right: .5rem; }
+.padding-right-large { padding-right: 1rem; }
+.padding-right-xlarge { padding-right: 2rem; }
+
+.padding-bottom-none { padding-bottom: none; }
+.padding-bottom-xsmall { padding-bottom: .1rem; }
+.padding-bottom-small { padding-bottom: .25rem; }
+.padding-bottom-medium { padding-bottom: .5rem; }
+.padding-bottom-large { padding-bottom: 1rem; }
+.padding-bottom-xlarge { padding-bottom: 2rem; }
+```
+
+<div class="row">
+ <div class="column">
+ {{> spacing}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/spacing/spacing.html b/src/building-blocks/spacing/spacing.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/spacing/spacing.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/spacing/spacing.yml b/src/building-blocks/spacing/spacing.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3f7bda689d044856650a84fc3d5ac5e428e382b8
--- /dev/null
+++ b/src/building-blocks/spacing/spacing.yml
@@ -0,0 +1,12 @@
+name: 'Custom spacing'
+tags:
+ - grid
+ - layout
+category: media
+description: Utility classes to space out your elements
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/tables-data/layout.html b/src/building-blocks/tables-data/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..2171acf4abe086e37054c75dda67edb1c2f9c41e
--- /dev/null
+++ b/src/building-blocks/tables-data/layout.html
@@ -0,0 +1,21 @@
+{{#markdown}}
+The basic data table can be implemented by adding two classes to the <code>table</code> tag: <code>.small</code> and <code>.data-table</code>. A third tag that might be useful is <code>.no-stripe</code> to remove the zebra striping.
+
+Alternativley to adding <code>.data-table</code> there are a range of utility classes that can be used to assemble the desired look and feel:
+
+- Smaller text: add a <code>.small</code> to the table tag, or any tr or td.
+- Disable tables from going 100% wide: add a <code>.width-auto</code> to the table tag.
+- Align text to top: add <code>.align-top</code> to the table tag or a td.
+- Remove striping: add <code>.no-stripe</code> to the table tag.
+- Change padding: add either of these classes to the table tage or td, <code>.padding-none</code> <code>.padding-small</code>.
+- Allow images to be stretched out of proportion: add <code>.stretch</code> to the image.
+
+Consider this <a href="https://www.ebi.ac.uk/chembl/drugstore">sample table from ChEMBL</a> which we have done with `table.small.data-table.no-stripe`:
+
+<div class="row"><div class="column">
+{{> tables-data}}
+</div></div>
+
+For further discussion on data table styling, <a href="https://github.com/ebiwd/EBI-Framework/issues/65">see this issue</a>.
+
+{{/markdown}}
diff --git a/src/building-blocks/tables-data/tables-data.html b/src/building-blocks/tables-data/tables-data.html
new file mode 100644
index 0000000000000000000000000000000000000000..5d8ee5e22cb27bce98a4138c334b5865420d0f33
--- /dev/null
+++ b/src/building-blocks/tables-data/tables-data.html
@@ -0,0 +1,96 @@
+<table class="small data-table no-stripe">
+ <thead>
+ <tr role="row">
+ <th colspan="1" role="columnheader">Parent Molecule</th>
+ <th colspan="1" role="columnheader">Synonyms</th>
+ <th colspan="1" role="columnheader">Phase</th>
+ <th colspan="1" role="columnheader">Research Codes</th>
+ <th colspan="1" role="columnheader">Applicants</th>
+ <th colspan="1" role="columnheader">USAN Stem</th>
+ <th colspan="1" role="columnheader">USAN Year</th>
+ <th colspan="1" role="columnheader">First Approval</th>
+ <th colspan="1" role="columnheader">ATC Code</th>
+ <th colspan="1" role="columnheader" style="width: 190px;">Icon</th>
+ </tr>
+ </thead>
+ <tbody aria-live="polite" aria-relevant="all" role="alert">
+ <tr class="odd">
+ <td>
+ <a href="https://www.ebi.ac.uk/chembl/compound/inspect/CHEMBL566315" class="no-underline"><img alt="Compound Image Not Available" height="100px" src="https://www.ebi.ac.uk/chembl/compound/displayimage/574221"></a><br>
+ CHEMBL566315
+ </td>
+ <td>Obeticholic acid (FDA, INN, USAN)</td>
+ <td>4</td>
+ <td>DSP-1747<br>
+ INT-747</td>
+ <td>Intercept Pharmaceuticals</td>
+ <td></td>
+ <td>2008</td>
+ <td class=" sorting_1">2016</td>
+ <td>A05AA04</td>
+ <td><img alt="CHEMBL566315 compound icon" border="0" src="https://www.ebi.ac.uk/chembltools/autoicon3/7,1,0,1,0,1,0,0,0,1" usemap="#imgmap574221"><map id="imgmap574221" name="imgmap574221">
+ <area alt="Drug Type: Natural Product-derived" class="drug-icon-imgmap" coords="1,1 37,37" href="#" shape="rect" title="Drug Type: Natural Product-derived">
+ <area alt="Rule of Five: Y" class="drug-icon-imgmap" coords="38,1 74,37" href="#" shape="rect" title="Rule of Five: Y">
+ <area alt="First In Class: N" class="drug-icon-imgmap" coords="75,1 111,37" href="#" shape="rect" title="First In Class: N">
+ <area alt="Chirality: Single Stereoisomer" class="drug-icon-imgmap" coords="112,1 148,37" href="#" shape="rect" title="Chirality: Single Stereoisomer">
+ <area alt="Prodrug: N" class="drug-icon-imgmap" coords="149,1 185,37" href="#" shape="rect" title="Prodrug: N">
+ <area alt="Oral: Y" class="drug-icon-imgmap" coords="1,40 37,75" href="#" shape="rect" title="Oral: Y">
+ <area alt="Parenteral: N" class="drug-icon-imgmap" coords="38,40 74,75" href="#" shape="rect" title="Parenteral: N">
+ <area alt="Topical: N" class="drug-icon-imgmap" coords="75,40 111,75" href="#" shape="rect" title="Topical: N">
+ <area alt="Black Box: N" class="drug-icon-imgmap" coords="112,40 148,75" href="#" shape="rect" title="Black Box: N">
+ <area alt="Availability Type: Prescription-only" class="drug-icon-imgmap" coords="149,40 185,75" href="#" shape="rect" title="Availability Type: Prescription-only">
+ </map></td>
+ </tr>
+ <tr class="even">
+ <td>
+ <a href="https://www.ebi.ac.uk/chembl/compound/inspect/CHEMBL607400" class="no-underline"><img alt="Compound Image Not Available" height="100px" src="https://www.ebi.ac.uk/chembl/compound/displayimage/609761"></a><br>CHEMBL607400
+ </td>
+ <td>Brivaracetam (FDA, INN, USAN)</td>
+ <td>4</td>
+ <td>UCB-34714</td>
+ <td>Ucb Inc<br>
+ Ubc Inc</td>
+ <td>-racetam</td>
+ <td>2005</td>
+ <td class=" sorting_1">2016</td>
+ <td>N03AX23</td>
+ <td><img alt="CHEMBL607400 compound icon" border="0" src="https://www.ebi.ac.uk/chembltools/autoicon3/1,1,0,1,0,1,1,0,0,1" usemap="#imgmap609761"><map id="imgmap609761" name="imgmap609761">
+ <area alt="Drug Type: Synthetic Small Molecule" class="drug-icon-imgmap" coords="1,1 37,37" href="#" shape="rect" title="Drug Type: Synthetic Small Molecule">
+ <area alt="Rule of Five: Y" class="drug-icon-imgmap" coords="38,1 74,37" href="#" shape="rect" title="Rule of Five: Y">
+ <area alt="First In Class: N" class="drug-icon-imgmap" coords="75,1 111,37" href="#" shape="rect" title="First In Class: N">
+ <area alt="Chirality: Single Stereoisomer" class="drug-icon-imgmap" coords="112,1 148,37" href="#" shape="rect" title="Chirality: Single Stereoisomer">
+ <area alt="Prodrug: N" class="drug-icon-imgmap" coords="149,1 185,37" href="#" shape="rect" title="Prodrug: N">
+ <area alt="Oral: Y" class="drug-icon-imgmap" coords="1,40 37,75" href="#" shape="rect" title="Oral: Y">
+ <area alt="Parenteral: Y" class="drug-icon-imgmap" coords="38,40 74,75" href="#" shape="rect" title="Parenteral: Y">
+ <area alt="Topical: N" class="drug-icon-imgmap" coords="75,40 111,75" href="#" shape="rect" title="Topical: N">
+ <area alt="Black Box: N" class="drug-icon-imgmap" coords="112,40 148,75" href="#" shape="rect" title="Black Box: N">
+ <area alt="Availability Type: Prescription-only" class="drug-icon-imgmap" coords="149,40 185,75" href="#" shape="rect" title="Availability Type: Prescription-only">
+ </map></td>
+ </tr>
+ <tr class="odd">
+ <td>
+ <a href="https://www.ebi.ac.uk/chembl/compound/inspect/CHEMBL1743034" class="no-underline"><img alt="Compound Image Not Available" height="100px" src="https://www.ebi.ac.uk/chembl/compound/displayimage/1121905"></a><br>CHEMBL1743034
+ </td>
+ <td>Ixekizumab (FDA, INN, USAN)</td>
+ <td>4</td>
+ <td>LY-2439821</td>
+ <td>Lilly<br>Eli Lilly And Co.</td>
+ <td>-mab</td>
+ <td>2010</td>
+ <td class=" sorting_1">2016</td>
+ <td></td>
+ <td><img alt="CHEMBL1743034 compound icon" border="0" src="https://www.ebi.ac.uk/chembltools/autoicon3/6,0,0,1,0,0,1,0,0,1" usemap="#imgmap1121905"><map id="imgmap1121905" name="imgmap1121905">
+ <area alt="Drug Type: Antibody" class="drug-icon-imgmap" coords="1,1 37,37" href="#" shape="rect" title="Drug Type: Antibody">
+ <area alt="Rule of Five: N" class="drug-icon-imgmap" coords="38,1 74,37" href="#" shape="rect" title="Rule of Five: N">
+ <area alt="First In Class: N" class="drug-icon-imgmap" coords="75,1 111,37" href="#" shape="rect" title="First In Class: N">
+ <area alt="Chirality: Single Stereoisomer" class="drug-icon-imgmap" coords="112,1 148,37" href="#" shape="rect" title="Chirality: Single Stereoisomer">
+ <area alt="Prodrug: N" class="drug-icon-imgmap" coords="149,1 185,37" href="#" shape="rect" title="Prodrug: N">
+ <area alt="Oral: N" class="drug-icon-imgmap" coords="1,40 37,75" href="#" shape="rect" title="Oral: N">
+ <area alt="Parenteral: Y" class="drug-icon-imgmap" coords="38,40 74,75" href="#" shape="rect" title="Parenteral: Y">
+ <area alt="Topical: N" class="drug-icon-imgmap" coords="75,40 111,75" href="#" shape="rect" title="Topical: N">
+ <area alt="Black Box: N" class="drug-icon-imgmap" coords="112,40 148,75" href="#" shape="rect" title="Black Box: N">
+ <area alt="Availability Type: Prescription-only" class="drug-icon-imgmap" coords="149,40 185,75" href="#" shape="rect" title="Availability Type: Prescription-only">
+ </map></td>
+ </tr>
+ </tbody>
+</table>
diff --git a/src/building-blocks/tables-data/tables-data.yml b/src/building-blocks/tables-data/tables-data.yml
new file mode 100644
index 0000000000000000000000000000000000000000..69d392e36b1746c8005130df3eadca81767ea801
--- /dev/null
+++ b/src/building-blocks/tables-data/tables-data.yml
@@ -0,0 +1,12 @@
+name: 'Data tables'
+tags:
+ - tables
+ - data visulisation
+category: media
+description: Showcase a lot or a little amount of numbers, images, graphics.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/tables-responsive/layout.html b/src/building-blocks/tables-responsive/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..0abce8dbae48c470f15fac257848e6c1b8ec847e
--- /dev/null
+++ b/src/building-blocks/tables-responsive/layout.html
@@ -0,0 +1,73 @@
+{{#markdown}}
+
+Tables are tricky to stretch and grow, and we suggest three approaches to tackle most issues. In increasing complexity:
+
+<ol>
+ <li>If it's not broke, don't fix it: sometimes defaults do fine.</li>
+ <li>Stack: If you add <code>.stack</code> the table cells will stack on smaller screens. See the example</li>
+ <li>Responsive: You can also use the grid classes to specify witdth at corresponding sizes. See the example</li>
+</ol>
+
+<h4>Stacking table</h4>
+<p>Squeeze your browser to see the effect of <code>.stack</code>.</p>
+
+<table class="hover stack">
+ <thead>
+ <tr>
+ <th width="200">Table Header</th>
+ <th>Table Header</th>
+ <th width="150">Table Header</th>
+ <th width="150">Table Header</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ </tbody>
+</table>
+
+<h4>Responsive table</h4>
+<p>Add the class <code>.responsive-table</code> to the <code>table</code> tag, and you'll be able to make use of <a href="#grid">the grid system of clases</a>, such as <code>.show-for-large</code>.</p>
+<p>Note that this requires jQuery, as it will propogate the <code>th</code> classes to each <code>td</code>.</p>
+
+<table class="responsive-table">
+ <thead>
+ <tr>
+ <th class="show-for-small-only">Compact</th>
+ <th class="show-for-large">Shown for large</th>
+ <th>Table Header</th>
+ <th>Table Header</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<div class="row"><div class="column">
+{{> tables-responsive}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/tables-responsive/tables-responsive.html b/src/building-blocks/tables-responsive/tables-responsive.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/tables-responsive/tables-responsive.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/tables-responsive/tables-responsive.yml b/src/building-blocks/tables-responsive/tables-responsive.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a5a2bb8f59cbcd55ff08e89706d82e45f8f4f6fc
--- /dev/null
+++ b/src/building-blocks/tables-responsive/tables-responsive.yml
@@ -0,0 +1,11 @@
+name: 'Responsive tables'
+tags:
+ - tables
+category: media
+description: Want to make your table mo-betta on small screens?
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/tables-sorting/layout.html b/src/building-blocks/tables-sorting/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..638dd907f30b2768346c989506fa118482d2f8c0
--- /dev/null
+++ b/src/building-blocks/tables-sorting/layout.html
@@ -0,0 +1,59 @@
+{{#markdown}}
+
+<p>For user-interactive and programatic table sorting, we integrate <a href="http://mottie.github.io/tablesorter/">Tablesorter</a>.</p>
+<p>To use the plugin you will need to:</p>
+<ol>
+ <li>Include <code>/libraries/tablesorter/jquery.tablesorter.min.js</code>. The file is not part of the default EBI Framework JS config.</li>
+ <li>Add the <code>.tablesorter</code> class to your table.</li>
+ <li>Ensure your table has a <code>thead</code> and <code>tbody</code>.</li>
+ <li>Give your table a CSS ID.</li>
+ <li>Invoke the plugin with JS, ala: <code>$("#table-sort-demo").tablesorter(); </code>
+</ol>
+
+<p>Here's a quick demo. Note that is supports the responsive table techniques.</p>
+
+<table id="table-sort-demo" class="responsive-table tablesorter">
+ <thead>
+ <tr>
+ <th class="show-for-small-only">Compact</th>
+ <th class="show-for-large">Shown for large</th>
+ <th>Counting</th>
+ <th>Sandwich</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Alpha</td>
+ <td>Alpha long description.</td>
+ <td>30,000,000</td>
+ <td>Cheese</td>
+ </tr>
+ <tr>
+ <td>Beta</td>
+ <td>Beta long description.</td>
+ <td>20,000,000</td>
+ <td>Good quality mustard</td>
+ </tr>
+ <tr>
+ <td>Gamma</td>
+ <td>Gamma long description.</td>
+ <td>10,000,000</td>
+ <td>Bread</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Tip: if the plugin isn't detecting your data type correctly, try telling the plugin of your data type and include Tablesorter's optional <code>jquery.metadata.js</code>.</p>
+
+<!-- Include for table sorting -->
+<!-- Note that we've loaded this with "defer", this technique may not be appropriate for your uses.
+ If not, load this JS after jQuery. -->
+<script defer src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/tablesorter/js/jquery.tablesorter.js"></script>
+
+<div class="row">
+ <div class="column">
+ {{> tables-sorting}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/tables-sorting/tables-sorting.html b/src/building-blocks/tables-sorting/tables-sorting.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/tables-sorting/tables-sorting.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/tables-sorting/tables-sorting.js b/src/building-blocks/tables-sorting/tables-sorting.js
new file mode 100644
index 0000000000000000000000000000000000000000..591d67dd147a99ce27317f222427de1c5b7875f1
--- /dev/null
+++ b/src/building-blocks/tables-sorting/tables-sorting.js
@@ -0,0 +1,5 @@
+window.addEventListener('load',function() {
+ $(document).ready(function() {
+ $("#table-sort-demo").tablesorter();
+ });
+});
diff --git a/src/building-blocks/tables-sorting/tables-sorting.yml b/src/building-blocks/tables-sorting/tables-sorting.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4a745ed02456e3b61fe7f4526b64e644d2867322
--- /dev/null
+++ b/src/building-blocks/tables-sorting/tables-sorting.yml
@@ -0,0 +1,11 @@
+name: 'Sorting tables'
+tags:
+ - tables
+category: media
+description: A prescriped solution to sort your tables.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/tables/layout.html b/src/building-blocks/tables/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..efbf02aab8c0202c641c8576a06ce065fcbeb8eb
--- /dev/null
+++ b/src/building-blocks/tables/layout.html
@@ -0,0 +1,68 @@
+{{#markdown}}
+
+Base table styling is simple using default, and if you add class <code>.hover</code>, your table rows will gently higlight on hover; like so:
+
+<table class="hover">
+ <thead>
+ <tr>
+ <th width="200">Table Header</th>
+ <th>Table Header</th>
+ <th width="150">Table Header</th>
+ <th width="150">Table Header</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ </tbody>
+</table>
+
+### Striping
+
+By default tables will be zebra striped. To disable add class <code>.no-stripe</code> to your <code>table</code> element.
+
+<table class="no-stripe">
+ <thead>
+ <tr>
+ <th width="200">Table Header</th>
+ <th>Table Header</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<div class="row"><div class="column">
+{{> tables}}
+</div></div>
+
+{{/markdown}}
diff --git a/src/building-blocks/tables/tables.html b/src/building-blocks/tables/tables.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/tables/tables.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/tables/tables.yml b/src/building-blocks/tables/tables.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f5804a4e165b3f4d47999f8be14fc40aa04d11c1
--- /dev/null
+++ b/src/building-blocks/tables/tables.yml
@@ -0,0 +1,12 @@
+name: 'Tables'
+tags:
+ - typography
+ - tables
+category: media
+description: A table is a table, and sometimes, you just need to use a table.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/tabs/layout.html b/src/building-blocks/tabs/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..e0e947796decba2b149a5a095eaa8f3f167953f8
--- /dev/null
+++ b/src/building-blocks/tabs/layout.html
@@ -0,0 +1,9 @@
+{{#markdown}}
+
+<div class="row">
+ <div class="column">
+ {{> tabs}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/tabs/tabs.html b/src/building-blocks/tabs/tabs.html
new file mode 100644
index 0000000000000000000000000000000000000000..6562e4a0d1a75cd6a7abee323ef97e3c89c47f64
--- /dev/null
+++ b/src/building-blocks/tabs/tabs.html
@@ -0,0 +1,12 @@
+<ul class="tabs" data-tabs id="example-tabs">
+ <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
+</ul>
+<div class="tabs-content" data-tabs-content="example-tabs">
+ <div class="tabs-panel is-active" id="panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
+</div>
diff --git a/src/building-blocks/tabs/tabs.yml b/src/building-blocks/tabs/tabs.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7ab86e79eb6b773e20a7e7470ec88a3806f7bc7d
--- /dev/null
+++ b/src/building-blocks/tabs/tabs.yml
@@ -0,0 +1,12 @@
+name: 'Tabs'
+tags:
+ - layout
+ - navigation
+category: media
+description: Here's a simple tab implementation.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/tags/layout.html b/src/building-blocks/tags/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..301934b71191b77d0f8daa155b5f75121892ab55
--- /dev/null
+++ b/src/building-blocks/tags/layout.html
@@ -0,0 +1,25 @@
+{{#markdown}}
+<p>
+ <a href="#" class="tag">A linked tag</a>
+ <a href="#" class="tag">A linked tag</a>
+ <a href="#" class="tag secondary-background">A not-so-important linked tag</a>
+ <a href="#" class="tag">A linked tag</a>
+ <a href="#" class="tag">A linked tag</a>
+</p>
+
+<p>
+ <span class="tag">Tags</span>
+ <span class="tag">don't</span>
+ <span class="tag">have to be</span>
+ <span class="tag">links, but</span>
+ <span class="tag">should never be alone</span>
+ <span class="tag secondary-background">(and maybe non-links should be less colourful)</span>
+</p>
+
+<div class="row">
+ <div class="column">
+ {{> tags}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/tags/tags.html b/src/building-blocks/tags/tags.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/tags/tags.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/tags/tags.yml b/src/building-blocks/tags/tags.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0484c9f2e7846c6623e8a0fa77059cb2e6ff4717
--- /dev/null
+++ b/src/building-blocks/tags/tags.yml
@@ -0,0 +1,12 @@
+name: 'Tags'
+tags:
+ - labels
+ - typography
+category: media
+description: Evolved from a label, is a tag. Meant to be linked and used in sequence.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/template/layout.html b/src/building-blocks/template/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..796878b5494dc220b01f16859e39c600c8c07adc
--- /dev/null
+++ b/src/building-blocks/template/layout.html
@@ -0,0 +1,9 @@
+{{#markdown}}
+
+<div class="row">
+ <div class="column">
+ {{> favicons}}
+ </div>
+</div>
+
+{{/markdown}}
diff --git a/src/building-blocks/template/template.html b/src/building-blocks/template/template.html
new file mode 100644
index 0000000000000000000000000000000000000000..c8f00fa26d353d83a4b126525027f1007ead4d71
--- /dev/null
+++ b/src/building-blocks/template/template.html
@@ -0,0 +1,4 @@
+{{#markdown}}
+ ``` html
+ ```
+{{/markdown}}
diff --git a/src/building-blocks/template/template.yml b/src/building-blocks/template/template.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3504fe90a7efb62d73888eee92065904c3b69558
--- /dev/null
+++ b/src/building-blocks/template/template.yml
@@ -0,0 +1,11 @@
+name: 'template'
+tags:
+ - visuals
+category: media
+description: .
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98
diff --git a/src/building-blocks/update-feed/layout.html b/src/building-blocks/update-feed/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..0ea1f9992192f25f73acbb5fa2a0476b7e88241b
--- /dev/null
+++ b/src/building-blocks/update-feed/layout.html
@@ -0,0 +1,5 @@
+<div class="row">
+ <div class="column">
+ {{> update-feed}}
+ </div>
+</div>
diff --git a/src/building-blocks/update-feed/update-feed.html b/src/building-blocks/update-feed/update-feed.html
new file mode 100644
index 0000000000000000000000000000000000000000..bb0d746cf031ad24d4fb76e6acc8b7ce9361650c
--- /dev/null
+++ b/src/building-blocks/update-feed/update-feed.html
@@ -0,0 +1,4 @@
+<h3><a href="//www.ebi.ac.uk/about/news" class="no-underline">Latest news</a></h3>
+<span class="label">Reseach highlights, service updates and more</span>
+<div id="news-updates"><cite>Loading...</cite></div>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.min.js"></script>
diff --git a/src/building-blocks/update-feed/update-feed.js b/src/building-blocks/update-feed/update-feed.js
new file mode 100644
index 0000000000000000000000000000000000000000..07df23460f3eaf9bf932d7caf7e8d56998c222e1
--- /dev/null
+++ b/src/building-blocks/update-feed/update-feed.js
@@ -0,0 +1,39 @@
+var feedTemplate = '{{#each item}}'+
+ '<div class="padding-top-medium">'+
+ '<span class="label">{{pubDate}}</span>'+
+ '<h6><a href="{{link}}" class="readmore">{{title}}</a></h6>'+
+ '</div>'+
+ '{{/each}}';
+
+document.onreadystatechange = function () {
+ if (document.readyState === "complete") {
+ // feed processor
+ function HandlebaRss(feedUrl,template,destination){
+ this.feedUrl = feedUrl;
+ this.template = template;
+ this.destination = destination;
+ }
+ HandlebaRss.prototype.init = function(){
+ function queryData(properties) {
+ $.ajax({
+ url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22'+ encodeURIComponent(properties.feedUrl)+'%22limit%206&&format=json&diagnostics=false&_maxage=3600',
+ template: properties.template,
+ destination: properties.destination
+ }).done( function(data) {
+ console.log(data);
+ if (data.query.results.item.length > 0) {
+ var template = Handlebars.compile(properties.template);
+ $(properties.destination).html(template(data.query.results));
+ } else {
+ // retry if 0 length
+ window.setTimeout(queryData(properties), 500);
+ }
+ });
+ }
+
+ queryData(this); // bootstrap
+ }
+
+ newsUpdates = new HandlebaRss("http://www.ebi.ac.uk/about/news/service.xml",feedTemplate, "#news-updates").init();
+ }
+}
diff --git a/src/building-blocks/update-feed/update-feed.png b/src/building-blocks/update-feed/update-feed.png
new file mode 100644
index 0000000000000000000000000000000000000000..e470a6d555f4c3036d1130bdc77169f4a1a78a43
Binary files /dev/null and b/src/building-blocks/update-feed/update-feed.png differ
diff --git a/src/building-blocks/update-feed/update-feed.scss b/src/building-blocks/update-feed/update-feed.scss
new file mode 100644
index 0000000000000000000000000000000000000000..98097ef3ee64bdf9459c7d99bf8dd253855e93e6
--- /dev/null
+++ b/src/building-blocks/update-feed/update-feed.scss
@@ -0,0 +1,2 @@
+// $news-card-label-background: $primary-color;
+// $news-card-label-background-hover: scale-color($news-card-label-background, $lightness: -15%);
diff --git a/src/building-blocks/update-feed/update-feed.yml b/src/building-blocks/update-feed/update-feed.yml
new file mode 100644
index 0000000000000000000000000000000000000000..24973dbfe335cba6644b3ac3fd3c849dc3a4782b
--- /dev/null
+++ b/src/building-blocks/update-feed/update-feed.yml
@@ -0,0 +1,12 @@
+name: 'Update feed'
+tags:
+ - feed
+ - news
+category: media
+description: If you need an easy way to consume JSON or RSS and show as a feed, here's the ticket.
+versions:
+ - 6.3.2
+author:
+ name: Ken Hawkins
+ github: khawkins98
+ twitter: khawkins98