Add boilerplate

.gitignore

@@ -0,0 +1,3 @@
+_site/
+.sass-cache/
+.jekyll-metadata

403.md

@@ -0,0 +1,8 @@
+---
+layout: default
+title: You can't access that
+permalink: /403.md
+---
+
+<h2>403</h2>
+<p>Sorry. You don't have permission.</p>

404.md

@@ -0,0 +1,8 @@
+---
+layout: default
+title: We didn't find that
+permalink: /404.html
+---
+
+<h2>Whoops?</h2>
+<p>We didn't find what you're after. Maybe we broke it, or maybe you've got a bad link?</p>

README.md

@@ -0,0 +1,39 @@
+# EBI-Boilerplate-Jekyll
+Get up and running with EBI-themed Jekyll fast (rolled with gh-pages in mind, clone/fork suggested)
+
+<a href="http://ebiwd.github.io/EBI-Boilerplate-Jekyll">View the demo</a>
+
+## How to use this
+This Jekyll template was designed in mind with GitHub pages, you'll certainly be able to use it to start a traditional Jekyll project, but the information below is specifically tailored with GitHub in mind.
+
+1. Getting started
+  * Clone this repo
+  * Ensure you are working in the `gh-pages` branch
+
+2. Basic setup
+  * Edit _config.yml and set your GitHub URL and project name
+
+3. Add content
+  * Create new posts in _posts
+  * Create new pages by adding them to the root folder, see sample_page_1.html
+
+## Configuring your domain name
+Full documentation is [available here](https://help.github.com/articles/quick-start-setting-up-a-custom-domain/).
+
+1. Configure the gh-pages branch
+  * Create a `CNAME` file
+  * Add `yourdomainname.com` to that file
+
+2. Configrue your domain name's DNS
+  * Add a CNAME for www to point to `yourusername.github.io`
+  * If you want to point the root domainname.com to gh-pages, set the `A` record to `192.30.252.153`
+  * You can also set a second `A` recored to `192.30.252.154`
+  * When you're done it should look like:
+
+   | Record   | Type        | Value  |
+   | ---      | ---         | ---    |
+   | @        | A           | 192.30.252.153  |
+   | @        | A           | 192.30.252.154  |
+   | WWW      | CNAME       | your_github_username.github.io  |
+
+

_config.yml

@@ -0,0 +1,33 @@
+# Site settings
+name: EBI Jekyll Boilerplate
+group: EMBL-EBI Web Development
+email: [email protected]
+domain: //ebiwd.github.io
+baseurl: /EBI-Boilerplate-Jekyll
+permalink: pretty
+
+# Add custom CSS / JS here
+# custom_css:
+# - "{{site.baseurl}}/static/css/YOUR-CSS-COMPONENTS.css"
+# - "{{site.baseurl}}/static/css/ANOTHER-CSS-COMPONENTS.css"
+# custom_js:
+# - "{{site.baseurl}}/static/js/YOUR-CSS-COMPONENTS.js"
+# - "{{site.baseurl}}/static/js/ANOTHER-CSS-COMPONENTS.js"
+ga_code: 'UA-XXXXX-X'
+
+
+# root repo for this project
+repo:        "https://github.com/ebiwd/EBI-Pattern-library"
+source:      .
+destination: ./_site
+exclude:     [node_modules, .sass-cache, gulpfile.js, package.json, HOWTO.md]
+#plugins:     ./_plugins
+future:      false
+lsi:         false
+markdown:    kramdown
+highlighter: rouge
+
+# Allow redirects
+# https://help.github.com/articles/redirects-on-github-pages/
+gems:
+  - jekyll-redirect-from

_includes/footer.html

@@ -0,0 +1,47 @@
+<footer>
+  <div id="global-footer" class="global-footer">
+    <nav id="global-nav-expanded" class="global-nav-expanded row">
+      <!-- Footer will be automatically inserted by footer.js -->
+    </nav>
+    <section id="ebi-footer-meta" class="ebi-footer-meta row">
+      <!-- Footer meta will be automatically inserted by footer.js -->
+    </section>
+  </div>
+</footer>
+
+<!-- JavaScript -->
+
+<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
+<!--
+<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.10.2.min.js"><\/script>')</script>
+-->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<!-- Your custom JavaScript file scan go here... change names accordingly -->
+<script defer="defer" src="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/js/script.js"></script>
+
+<!-- The Foundation theme JavaScript -->
+<script src="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/foundation-6/js/foundation.js"></script>
+<script src="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/js/foundationExtendEBI.js"></script>
+<script type="text/JavaScript">$(document).foundation();</script>
+<script type="text/JavaScript">$(document).foundationExtendEBI();</script>
+
+{% comment %} Custom global JS could go here: {% endcomment %}
+{% for js in site.custom_js %}
+<script src="{{js}}"></script>
+{% endfor %}
+
+{% comment %} Custom Component Scripts (from individual .md files) go here: {% endcomment %}
+{% for js in page.javascript %}
+<script src="{{js}}"></script>
+{% endfor %}
+
+<!-- Google Analytics details... -->
+<!-- Change UA-XXXXX-X to be your site's ID -->
+<!--
+<script>
+  window._gaq = [['_setAccount','{{site.ga_code}}'],['_trackPageview'],['_trackPageLoadTime']];
+  Modernizr.load({
+    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
+  });
+</script>
+-->

_includes/head.html

@@ -0,0 +1,64 @@
+<head>
+  <meta charset="utf-8">
+  <title>{% if page.title %} {{ page.title }} &lt; {% endif %} {{ site.name }} &lt; EMBL-EBI</title>
+  <meta name="description" content="EMBL-EBI"><!-- Describe what this page is about -->
+  <meta name="keywords" content="bioinformatics, europe, institute"><!-- A few keywords that relate to the content of THIS PAGE (not the whol project) -->
+  <meta name="author" content="EMBL-EBI"><!-- Your [project-name] here -->
+  <meta name="HandheldFriendly" content="true" />
+  <meta name="MobileOptimized" content="width" />
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="theme-color" content="#70BDBD"> <!-- Android Chrome mobile browser tab color -->
+
+  <!-- Add information on the life cycle of this page -->
+  <meta name="ebi:owner" content="John Doe"> <!-- Who should be contacted about changes -->
+  <meta name="ebi:review-cycle" content="30"> <!-- In days, how often should the content be reviewed -->
+  <meta name="ebi:last-review" content="2015-12-20"> <!-- The last time the content was reviewed -->
+  <meta name="ebi:expiry" content="2016-01-20"> <!-- When this content is no longer relevant -->
+
+  <!-- If you link to any other sites frequently, consider optimising performance with a DNS prefetch -->
+  <link rel="dns-prefetch" href="//ebi.ac.uk" />
+
+  <!-- If you have custom icon, replace these as appropriate.
+       You can generate them at realfavicongenerator.net -->
+  <link rel="icon" type="image/x-icon" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/favicon.ico" />
+  <link rel="icon" type="image/png" href="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/mstile-144x144.png">
+
+  <!-- CSS: implied media=all -->
+  <!-- CSS concatenated and minified via ant build script-->
+  <link rel="stylesheet" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/foundation-6/css/foundation.css" type="text/css" media="all">
+  <link rel="stylesheet" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-global.css" type="text/css" media="all">
+  <link rel="stylesheet" href="//www.ebi.ac.uk/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css" type="text/css" media="all">
+
+  <!-- Use this CSS file for any custom styling -->
+  <!--
+    <link rel="stylesheet" href="css/custom.css" type="text/css" media="all">
+  -->
+  {% comment %} Custom global CSS could go here: {% endcomment %}
+  {% for css in site.custom_css %}
+  <link rel="stylesheet" href="{{css}}">
+  {% endfor %}
+
+  <!-- If you have a custom header image or colour -->
+  <!--
+  -->
+  <meta name="ebi:masthead-color" content="#091314">
+  <meta name="ebi:masthead-image" content="{{ site.domain }}{{ site.baseurl }}/static/background.jpg">
+
+    <!-- you can replace this with theme-[projectname].css. See http://www.ebi.ac.uk/web/style/colour for details of how to do this -->
+  <!-- also inform ES so we can host your colour palette file -->
+  <link rel="stylesheet" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/theme-embl-petrol.css" type="text/css" media="all">
+
+  <!-- for production the above can be replaced with -->
+  <!--
+  <link rel="stylesheet" href="//www.ebi.ac.uk/web_guidelines/css/compliance/mini/ebi-fluid-embl.css">
+  -->
+  <!-- end CSS-->
+</head>

_includes/local_masthead.html

@@ -0,0 +1,33 @@
+  <div id="skip-to">
+    <ul>
+      <li><a href="#content">Skip to main content</a></li>
+      <li><a href="#local-nav">Skip to local navigation</a></li>
+      <li><a href="#global-nav">Skip to EBI global navigation menu</a></li>
+      <li><a href="#global-nav-expanded">Skip to expanded EBI global navigation menu (includes all sub-sections)</a></li>
+    </ul>
+  </div>
+
+  <header id="masthead-black-bar" class="clearfix masthead-black-bar">
+    <nav class="row">
+      <ul id="global-nav" class="menu">
+        <!-- set active class as appropriate -->
+        <li class="home-mobile"><a href="//www.ebi.ac.uk"></a></li>
+        <li class="home active"><a href="//www.ebi.ac.uk">EMBL-EBI</a></li>
+        <li class="services"><a href="//www.ebi.ac.uk/services">Services</a></li>
+        <li class="research"><a href="//www.ebi.ac.uk/research">Research</a></li>
+        <li class="training"><a href="//www.ebi.ac.uk/training">Training</a></li>
+        <li class="about"><a href="//www.ebi.ac.uk/about">About us</a></li>
+        <li class="search">
+          <a href="#" data-toggle="search-global-dropdown"><span class="show-for-small-only">Search</span></a>
+          <div id="search-global-dropdown" class="dropdown-pane" data-dropdown data-options="closeOnClick:true;">
+          <!-- The dropdown menu will be programatically added by script.js -->
+          </div>
+        </li>
+        <li class="float-right show-for-medium embl-selector">
+          <button class="button float-right" type="button" data-toggle="embl-dropdown">Hinxton</button>
+          <!-- The dropdown menu will be programatically added by script.js -->
+        </li>
+      </ul>
+    </nav>
+  </header>
+

_includes/navigation_list.html

@@ -0,0 +1,11 @@
+{% for node in navigation_list %}
+  {% if group == null or group == node.group %}
+    {% if page.url == node.url %}
+      <li class="active"><a href="{{ site.domain }}{{ site.baseurl }}{{node.url}}" class="active">{{node.title}}</a></li>
+    {% else %}
+      <li><a href="{{ site.domain }}{{ site.baseurl }}{{node.url}}">{{node.title}}</a></li>
+    {% endif %}
+  {% endif %}
+{% endfor %}
+{% assign pages_list = nil %}
+{% assign group = nil %}

_includes/update_list.html

@@ -0,0 +1,5 @@
+<ul class="posts">
+  {% for update in site.posts %}
+    <li><span>{{ update.date | date_to_string }}</span> » <a href="{{site.baseurl}}/{{ update.url }}" title="{{ update.title }}">{{ update.title }}</a></li>
+  {% endfor %}
+</ul>

_layouts/default.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include head.html %}
+  <body class="level2"><!-- add any of your classes or IDs -->
+    {% include local_masthead.html %}
+    <div id="content" role="main">
+      <div data-sticky-container>
+        <div id="masthead" class="masthead" data-sticky data-sticky-on="large" data-top-anchor="main-content-area:top" data-btm-anchor="main-content-area:bottom">
+          <div class="masthead-inner row">
+            <!-- local-title -->
+            <div class="columns medium-7" id="local-title">
+              <h1><a href="{{ site.domain }}{{ site.baseurl }}" title="Back to {{ site.name }} homepage">{{ site.name }}</a></h1>
+              <h4>An implementation of <a href="http://github.com/ebiwd/EBI-Framework">the EBI Visual Framework  <i class="icon icon-generic small" data-icon="x"></i></a></h4>
+            </div>
+            <!-- /local-title -->
+            <!-- local-nav -->
+            <nav>
+              <ul id="local-nav" class="dropdown menu float-left" data-description="navigational" data-dropdown-menu>
+                {% comment %}
+                We construct the site naviagion by loading a list of the site's pages
+                and filtering to just those with the front matter of:
+                  group: "in_local_navigation"
+                and we order by adding
+                  order: 2 (whatever number)
+                {% endcomment %}
+                {% assign navigation_list = site.pages | sort:"order" %}
+                {% assign group = 'in_local_navigation' %}
+                {% include navigation_list.html %}
+              </ul>
+              <!-- <ul class="menu dropdown float-right" data-dropdown-menu data-description="functional">
+                <li class="functional"><a href="#"><i class="icon icon-generic" data-icon="d"></i> Share this</a>
+                  <ul class="menu js">
+                    <li><a href="#">Item 1A Loooong</a></li>
+                    <li>
+                      <a href='#'> Item 1 sub</a>
+                      <ul class='menu'>
+                        <li><a href='#'>Item 1 subA</a></li>
+                        <li><a href='#'>Item 1 subB</a></li>
+                        <li>
+                          <a href='#'> Item 1 sub</a>
+                          <ul class='menu'>
+                            <li><a href='#'>Item 1 subA</a></li>
+                            <li><a href='#'>Item 1 subB</a></li>
+                          </ul>
+                        </li>
+                        <li>
+                          <a href='#'> Item 1 sub</a>
+                          <ul class='menu'>
+                            <li><a href='#'>Item 1 subA</a></li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </li>
+                    <li><a href="#">Item 1B</a></li>
+                  </ul>
+
+              </ul> -->
+            </nav>
+            <!-- /local-nav -->
+          </div>
+        </div>
+      </div>
+
+      <section class="row" id="main-content-area">
+        <!-- Your menu structure should make a breadcrumb redundant, but if a breadcrump is needed uncomment the below -->
+        <!--
+        <nav aria-label="You are here:" role="navigation">
+          <ul class="breadcrumbs">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Parent</a></li>
+            <li class="disabled">Disabled</li>
+            <li>
+              <span class="show-for-sr">Current: </span> This page
+            </li>
+          </ul>
+        </nav>
+        -->
+        <div class="medium-9 columns">
+        {{ content }}
+        </div>
+        <div class="medium-3 columns sidebar" data-sticky-container>
+          <div class="sticky" data-sticky data-anchor="main-content-area"  data-options="marginTop:4;">
+            <h4>See also</h4>
+            <p>These resources will help you engage and understand the EBI Framework.</p>
+            <div class="">
+              <ul class="menu vertical">
+                <li class=""><a href="//github.com/ebiwd/EBI-Framework">Core framework repository <i class="icon icon-generic" data-icon="x"></i></a></li>
+                <li class=""><a href="//ebiwd.github.io/EBI-Framework">Core framework documentations <i class="icon icon-generic" data-icon="x"></i></a></li>
+                <li class=""><a href="//ebiwd.github.io/EBI-Framework/sample-site/">Sample pages <i class="icon icon-generic" data-icon="x"></i></a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Optional local footer (insert citation / project-specific copyright / etc here -->
+      <!--
+        <div id="local-footer" class="local-footer">
+          <div class="row">
+            <span class="reference">How to reference this page: ...</span>
+          </div>
+        </div>
+      -->
+      <!-- End optional local footer -->
+    </div><!-- /.container -->
+    {% include footer.html %}
+  </body>
+</html>

_layouts/post.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+<h2>{{ page.title }}</h2>
+<p class="meta">{{ page.date | date_to_string }}</p>
+
+<div class="post">
+  {{ content }}
+</div>