<p>We plan to host workshops to educate on the tooling and address issues or concerns, <ahref="https://github.com/khawkins98/EBI-Framework/issues/1">register you interest here</a> or if you don't have a GitHub account e-mail khawkins@ebi.ac.uk</p>
<p>If you need technical guidance or have questions, <ahref="#help">see the help section</a>.</p>
<p>This framework is in a very early stage of testing and is still being actively planned.</p>
<p>The takeaway is that there are two goals here:</p>
...
...
@@ -299,9 +292,8 @@
<li>Refresh the EBI Compliance theme to be more visually compliant with EMBL-EBI standards.</li>
<li>Offer optional reusable tooling to make the lives of developers easier and to make EMBL-EBI sites look more consistent with less effort.</li>
</ol>
<p>The documentation below is a work in progress, but have a look. We are looking for input and concerns about the scope, direction and technical solutions. Please pot to <ahref="https://github.com/khawkins98/EBI-Framework/issues/1">the GitHub issue queue</a> or if you don't have a GitHub account e-mail khawkins@ebi.ac.uk</p>
<p>The documentation below is a work in progress. We are looking for input and concerns about the scope, direction and technical solutions. Post to <ahref="https://github.com/khawkins98/EBI-Framework/issues/1">the GitHub issue queue</a>, if you don't have a GitHub account: e-mail khawkins@ebi.ac.uk</p>
<p>Also see the <ahref="sample-site/">sample pages</a> to get an idea of how real content would look and work using the framework.</p>
</div>
<h3>Requirements and what you get</h3>
...
...
@@ -312,11 +304,32 @@
<p><ahref="https://github.com/khawkins98/EBI-Framework/archive/master.zip"class="button sans-serif">Download the framework</a> or <ahref="https://github.com/khawkins98/EBI-Framework/">view on Github</a></p>
<h3>How to implement</h3>
<p>THIS SECTION IS IN PROGRESS.</p>
<blockquoteclass="float-right columns medium-5"><h5>Using Drupal?</h5> Contact Web Development. There is a Drupal 7 theme you can use, and a Drupal 8 version is coming soon(ish).</blockquote>
<p>This framework functions many front-end solutions.</p>
<p>There are several files and structures that we use, generally these can be implemented seperately so you can use what you can or your own solution if required. Outright dependencies are nested.</p>
<p>In short: add header markup, footer markup, CSS and JS. Then add content.</p>
<divclass="callout">
<ol>
<li>Core HTML structure: The basic HTML markkup structure for the page: global-nav black bar, local-nav area, main content div, footer, etc.</li>
<li><ahref="css/ebi-global.css">EBI base CSS styles</a>: Our basic look/colours.</li>
<li><ahref="https://khawkins98.github.io/EBI-Framework/libraries/foundation-6/css/foundation.css">Foundation base CSS styles</a>: this provides the base grid structure, style resets, and core structure of the page.</li>
<li><ahref="css/embl-petrol-colours.css">Your site's CSS colours</a>: Colours specific to your service/site.</li>
<li>Fonts.css</li>
<li>jQuery 1.10.2: Slightly older versions may be compatible.</li>
<ul>
<li>Foundation JS</li>
<ul>
<li><ahref="https://khawkins98.github.io/EBI-Framework/js/foundationExtendEBI.js">EBI JS tweaks to Foundation</a>: A series of value adds that build atop Foundation.</li>
</ul>
</ul>
<li>EBI JS</li>
<li>Cookie JS</li>
<li>Footer JS</li>
</ol>
</div>
<p>See a sample boiler plate here LINK TO COME.</p>
<p>In short: add header markup, footer markup, CSS and JS. Then add content.</p>
<p>To get started check out the structure of the <ahref="sample-site">sample boiler plate page</a>.</p>
<divclass="callout warning row">
<h3>FAQs</h3>
...
...
@@ -328,7 +341,6 @@
<p>If you're unable to make use of the Frameworks JS or CSS tooling, use this page as a guide for how your site should look, feel, function. There's no reason that can't be done with any framework be it Angular, Material Design, or vanilla CSS3.</p>
<p>For new websites or major reworks, we recommend you consider using the included Foundation CSS and JS, as you'll get more benefit from the work done in this framework, encounter fewer bugs, and help EBI web services have a more consistent function and feel.</p>
</dd>
<dt>Bootstrap:</dt>
<dd><p>While the front-end framework provides a robust set of tooling and a broader use base, its base styling is more opinionated (121KB vs 43KB of minified baseline CSS). Foundation allows us to provide a slimmer and faster EBI theme layer. Further, non-jQuery using developers will find more benefit in a Foundation-powered ecosystem. For Bootstrap users unfamiliar with Foundation, you might <ahref="https://www.codementor.io/css/tutorial/bootstrap-3-vs-foundation-5-front-end-framework-comparison">read this comparison</a> (note that it references the slightly older version of Foundation 5, but is substantially the same for the article's proposes).</p></dd>
<dt>SASS:</dt>
...
...
@@ -343,7 +355,7 @@
<h2>Design patterns</h2>
<p>This page acts as a "living guide" by implementing a broad range of interface items, use them as a guide for how to make your page elements look and function.</p>
<p>For edge cases not covered, please [CONTACT THE STYLE TEAM] or open an issue in the tracker. We'll update this living style guide with those answers.</p>
<p>For edge cases not covered, please <ahref="https://github.com/khawkins98/EBI-Framework/issues">open an issue in the tracker</a>. We'll update this living style guide with feedback that grows from there.</p>
<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>
<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>
<divclass="columns medium-6">
...
...
@@ -645,7 +656,6 @@
</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>
...
...
@@ -674,7 +684,6 @@
</div>
<h4>Badge</h4>
<divclass="row">
<divclass="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>Add the class <code>.responsive-table</code> to the <code>table</code> tag, and you'll be able to make use of <ahref="#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>
<tableclass="responsive-table">
...
...
@@ -846,18 +850,12 @@
</div>
<p>For images inserted inside text areas, you can use the CSS class of <code>.thumbnail</code> to add subtle padding and spacing.</p>
<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>
<h3>Image tiles</h3>
<p>Alternatively, you can use a <code>.with-overlay</code> for a darkened effect with a text overlay.</p>
<p>Notes:</p>
<ul>
<li>Links: when the caption 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.</li>
<p>If you a question about the background of this guide or have philisophical suggestion <ahref="https://www.ebi.ac.uk/seqdb/confluence/display/WGC/Web+Guidelines+committee">contact the EBI Web Guidelines Committee</a>, whom is responsibile for the governance and direction.</p>
<p>For technical matters of "how do I do?", <ahref="https://github.com/khawkins98/EBI-Framework/issues">visit the issue queue on GitHub</a>.</p>
