Add building blocks

src/building-blocks/animation/animation.html

+{{#markdown}}
+  ``` html
+  ```
+{{/markdown}}

src/building-blocks/animation/animation.yml

+name: 'Animations'
+tags:
+  - visuals
+  - usability
+category: media
+description: Oooo, pretty.
+versions:
+  - 6.3.2
+author:
+  name: Ken Hawkins
+  github: khawkins98
+  twitter: khawkins98

src/building-blocks/animation/layout.html

+{{#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">&times;</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}}

src/building-blocks/app-float.scss

+@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;
+}

src/building-blocks/app.scss

+@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;
+}

src/building-blocks/badges/badges.html

+<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>

src/building-blocks/badges/badges.yml

+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

src/building-blocks/badges/layout.html

+<div class="row">
+  <div class="column">
+    {{> badges}}
+  </div>
+</div>

src/building-blocks/button-grid/button-grid.html

+<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>

src/building-blocks/button-grid/button-grid.yml

+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

src/building-blocks/button-grid/layout.html

+{{#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}}

src/building-blocks/code-highlighting/code-highlighting.html

+{{#markdown}}
+  ``` html
+  ```
+{{/markdown}}

src/building-blocks/code-highlighting/code-highlighting.yml

+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

src/building-blocks/code-highlighting/layout.html

+{{#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}}

src/building-blocks/colors/colors.html

+<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>

src/building-blocks/colors/colors.yml

+name: 'Colors'
+tags:
+  - visuals
+category: media
+description: Core EMBL-EBI colours.
+versions:
+  - 6.3.2
+author:
+  name: Ken Hawkins
+  github: khawkins98
+  twitter: khawkins98

src/building-blocks/colors/layout.html

+<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>

src/building-blocks/favicons/favicons.html

+{{#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}}