The pattern library has moved to be part of the EMBL-EBI Style Lab:
- Direct link to patterns: http://www.ebi.ac.uk/style-lab/websites/patterns/
- Developer info for the Style Lab: https://github.com/ebiwd/EBI-Style-lab/
Please head to the new pattern library:
Home Page: http://www.ebi.ac.uk/style-lab/websites/patterns/
The pattern library has moved to be part of the EMBL-EBI Style Lab:
With the EBI Visual Framework now at v1.2, we're moving away from a singular pattern library to the EMBL-EBI Style Lab which includes a pattern library.
Ideally we can redirect with a bit of front matter:
---
redirect_to: "http://example.com"
---
Several efficiencies and optimisations have been done for the update. Below are some proposed testing tasks to evaluate the effectiveness of the layout:
Navigating to
Rinse and repeat the above for tablet and mobile devices.
(Moved from: ebiwd/EBI-Framework#15)
Hii,
this file:
http://ebiwd.github.io/EBI-Framework/js/fontpresentation.js
is adding inner styles in the html breaking our pages.
is this script meant to be included in our html? or is it meant to be used in specific contexts?
In the new complex-portal, we have a tile-menu at the front page:
Would it be worth to think of a common style? I've seen this one on the services site:
Which looks nice on a small scale, but I'm not sure for a bigger menu. Also, even if I hate it, it might be worth to discuss colours for the different tile type.
The need for a thinner masthead bar is a long standing issue that has been brought to the fore thanks to efforts by @markbingley. So we're applying a renewed effort into creating a pattern (and usage guidance).
In v1.2 we've already shaved 10px off the black bar, but the need remains for a yet-thinner div#masthead
on inside pages that are search-result or data focused.
That's 56% thinner than the current look.
Method:
Do
.compact-for-data
to your div.masthead
Consider
Adding responsive classes to the menu to collapse into a thinner line for large screens
<div id="masthead" class="masthead compact-for-data">
<div id="masthead-black-bar" class="clearfix masthead-black-bar"></div>
<div class="masthead-inner row">
<div class="columns medium-7 large-3" id="local-title"><h1></h1></div>
<div class="columns medium-5 large-3 large-push-6"><form id="ebi_search" action="/ebisearch/search.ebi"></form></div>
<div class="columns large-6 large-pull-3"><nav></nav></div>
</div>
</div>
<div id="masthead" class="masthead compact-for-data">
<div id="masthead-black-bar" class="clearfix masthead-black-bar"></div>
<div class="masthead-inner row expanded">
<div class="float-left inline-block padding-left-large" id="local-title"><h1></h1></div>
<nav class="float-left columns medium-7 large-8"></nav>
</div>
</div>
Do not
Pudding:
Refrence: /meta-patterns/search-guidelines/
I've tried to find the relevant bit, but I'm also not sure if this should go here or not. But we in our team we're just wondering, what to do if the search box is empty? Do we do nothing? Do we make the user aware that he/she has to put something? Or do we do a * search for everything. This seems to handled differently across the EBI.
Many teams across the campus have various dynamic lazy-loading content -- it can be found in search boxes (the EBI homepage) and dynamically loading pages (Angular and Handlebars).
So how can we best:
And then once we identify a couple of major patterns, let's try and template out some reusable code for use upstream in the EBI Visual Framework.
Refrence: /patterns/search/
Are they any guidelines about the local search search box?
For both whole page loads and content loads.
A "tag" https://ebiwd.github.io/EBI-Pattern-library/components/tags/ that is not a link is a foundation "label" http://foundation.zurb.com/sites/docs/kitchen-sink.html#label... so you should use foundation code with class="label" for that and not creating a new class="tag" as they appear to have similar function (unless I miss something).
https://ebiwd.github.io/EBI-Pattern-library/components/tags/ (use class="tag")
http://foundation.zurb.com/sites/docs/kitchen-sink.html#label (use class="label")
This has been raised as a ticket before from different services (ENA/Expression Atlas), and a functionality for quick contextual feedback can be developed as a pattern and applied throughout the services pages..
Like on www.gov.uk - at the bottom of every page - there is a
"Is there anything wrong with this page" link, which opens up a very specific form to help users report issues.
Let's discuss!
Another example for contextual feedback opportunity: mixcloud
It would be nice to have a common layout and way to display errors and notifications. We're currently using ngToast. Which gets then displayed in different colours in the corner.
But there are different notifications all around the ebi. I know that this might be a bit tricky, but maybe we can add a guideline for this as well.
Refrence: /meta-patterns/masthead-compact
Hi, we have used the masthead-compact header, but after updating to the new version 1.2 we realised that the page is not responsive when we resized the window. Is this something you are still working on?
Refrence: /patterns/icons/
Could we add a expand button? Something like that: https://goo.gl/images/eiyuth
Refrence: /patterns/lists/
For the Pager it might be worth to have also a 'Pagesize'-element? To show more or less elements in the list.
The demo form on the page doesn't seem to work on my side (tried with Chrome and Firefox)
https://ebiwd.github.io/EBI-Pattern-library/components/live-filter/
Often hard to pick a palette that blends with sponsor/partner colours.
(Ported from: ebiwd/EBI-Framework#8)
Does it still make sense for deeper book-style nav to be on the right? Is this understood?
Example: http://www.ebi.ac.uk/ena/about/data-availability-policy
Also move to right per existing EBI guidelines.
Currently I we display a few examples underneath the search box, like:
In the new Complex Portal, we wanted to have a bit more on the front page to explain what you search for. We have added a grey box, which holds the different examples. I think, it would be nice if we have a common display of search box and a bigger example box. Just in case you want to display a few more examples.
Hi,
was there any major change around last week? My css is playing a bit wild since last week. Here a few pictures:
I played a bit with the imported css and set them first back v.1.1 and this did the trick. Everything worked again. Then I could pinpoint it down to two css-files, which seem to break it:
Services and research sites often need to show a number of relationships with outside entities.
At present, the header is used to show the EMBL-EBI "parent" relationship, and the local footer to show "other" relationships. But we know there are teams doing this differently, and for some relationships the shoe does not fit.
So we are asking:
We're researching this now and looking to make proto-patterns.
Do you have ideas? Examples of it done well?
Refrence: /meta-patterns/page-structure/
It would be nice to have an example code for the secondary menu as we don't really know which css classes to keep/remove from the main EBI template example link (e.g. is leaf class needed for li elements?):
<div class="menu-block-wrapper menu-block-4 menu-name-main-menu parent-mlid-0 menu-level-3">
<ul class="menu menu-tree-menu"><li class="first leaf has-children menu-mlid-3057"><a href="/about/leadership" title="Leadership and guidance structure">Leadership</a></li>
<li class="leaf menu-mlid-3075"><a href="/about/funding" title="Funding of EMBL-EBI">Funding</a></li>
<li class="leaf menu-mlid-3079"><a href="/about/background" title="History of EMBL-EBI">Background</a></li>
<li class="leaf menu-mlid-3076"><a href="/about/collaborations" title="EMBL-EBI partnerships">Collaborations</a></li>
<li class="leaf menu-mlid-14438"><a href="/about/our-impact" title="Impact: reports, facts and figures">Our impact</a></li>
<li class="last leaf has-children menu-mlid-14440"><a href="/about/women-in-science">Women in Science</a></li>
</ul>
</div>
This comes from a recent discussion with External Relations on the new draft Jobs page: http://wwwdev.ebi.ac.uk/about/jobs
This is somewhere between a "normal" page and a brochure page and we need to highlight the intro narrative.
This is the "intro" on the current site (a pattern exclusive to the corporate Drupal site).
We don't wish to import this pattern as-is. It does not stylistically jive with the rest of the visual language and creates a "boxing" effect, further isolating the navigation on the right-hand side.
As seen on the /services page, the "Tile Grid" should be documented.
It leverages the Tile and Grid patterns, and also requires :hover and :active states.
For the launch of the Visual Framework we will redirect http://www.ebi.ac.uk/web/style to this gh-pages URL.
In preparation of that I have wholesale imported the last remaining pieces:
This content smells quite stale and can likely be halved or referenced elsewhere...
Hi,
I'm missing the css rules mentioned here:
https://ebiwd.github.io/EBI-Pattern-library/components/spacing/
Which css am I missing?
After a conversation wtih @tschaka1904 I have revised the search pattern documentation (commit 769552f) to show how to best implement a local search box in the local masthead vs the content area:
https://ebiwd.github.io/EBI-Pattern-library/patterns/search/
The title used for https://ebiwd.github.io/EBI-Pattern-library/components/badges/
...Should maybe just be "Buttons" as in foundation "badge" is used for something else? It has another function and is not clikable (another component?).
http://foundation.zurb.com/sites/docs/kitchen-sink.html#badge
We should better note the expaned "theme" options and what issues they seek to resolve (such as the new light local-masthead option).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.