ebiwd / ebi-pattern-library

Please head to the new pattern library:

Deprecated

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/

ebi-pattern-library's Issues

Document, enhance "Tile Grid" pattern

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.

Pattern generation for sponsor/collaborators/funders/affiliates/endorsements

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:

• What types of relationships are shown?
  • Parent organisation
  • Funders
  • Collaborators
  • Endorsements/affiliates/some other word (ELIXIR, for example)
• How can they best be displayed in a consistent and understandable way?
• And be visible without being obtrusive?

We're researching this now and looking to make proto-patterns.

Do you have ideas? Examples of it done well?

Some v1.2 css breaks header

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:

• https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-global.css
• https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/theme-embl-petrol.css

Common tile layout

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.

Custom spacing css

Hi,

I'm missing the css rules mentioned here:
https://ebiwd.github.io/EBI-Pattern-library/components/spacing/

Which css am I missing?

Document horizontal secondary navigation pattern

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>

Create guidance on picking colour palettes

Often hard to pick a palette that blends with sponsor/partner colours.

Filtering table demo not working?

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/

Right side navigation

(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

Idea on the 'Search guidelines' pattern

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.

Idea on the 'Lists' pattern

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.

Refine DL tag

As discussed with EBI's visual design "team", the current dl (defention list) style uses the default Foundation look: bold.

We don't use bold elsewhere and it would be better to use a font-size consistent with h5/h6 (example shown is a link):

Add an "expand" icon

Refrence: /patterns/icons/

Could we add a expand button? Something like that: https://goo.gl/images/eiyuth

Adjusting the width of the local search input field

Refrence: /patterns/search/

Are they any guidelines about the local search search box?

Add redirects to 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"
---

Review legacy web guidelines

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:

• Usability e4ad948 - https://ebiwd.github.io/EBI-Pattern-library/components/usability/
• Search 0225fc9 - https://ebiwd.github.io/EBI-Pattern-library/components/search-guidelines/
• Accessibility ed673f3 - https://ebiwd.github.io/EBI-Pattern-library/components/accessibility/

This content smells quite stale and can likely be halved or referenced elsewhere...

Do we need a pattern for general service/page feedback?

Moved on behalf of @gabsie from ebiwd/EBI-Framework#6

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

New pattern: Landing page large search

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.

Create compact masthead pattern

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.

Here's how it could look:

That's 56% thinner than the current look.

Method:
Do

• Add the class .compact-for-data to your div.masthead
• Disable the example search queries on your search box. Your user should have already searched or have arrived at their destination.
• Use this on pages where the primary content is a large table or data visualisations where you want your service branding to "get out of the way"

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>

  or, without a search box:
  

  <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

• Use the sticky property for the global header
• Use this on your homepage or generic content pages

Pudding:

• Guidance: https://ebiwd.github.io/EBI-Pattern-library/sample-site-v1.2/boilerplate/search-results.html
• Sample implementation: https://ebiwd.github.io/EBI-Pattern-library/meta-patterns/masthead-compact/

In need of an "intro" pattern

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.

'Masthead compact' v1.2 page not responsive

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?

Common way to display notifications and errors

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.

Navigation testing tasks

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

• the EBI homepage
• the About section
• a sub section, such as about/news

Rinse and repeat the above for tablet and mobile devices.

(Moved from: ebiwd/EBI-Framework#15)

Loading animations and placeholders

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:

1. indicate to users that stuff is coming,
2. not annoy users with terrible aggressive animations, and
3. hint at the content that is coming and make the pages feel a bit faster by teasing the content

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.

Common filter layout

In the Complex-Portal, as I think in many of the other EBI pages, we have a results page. There you can navigate through the results using the suggested pagination and filters.

Maybe, it would be worth to have a common layout and design for the filters?

Define loading patterns

For both whole page loads and content loads.

Better document local search patterns

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/

Callout boxes: Drop lines

As discussed with EBI's visual design "team", the current .callout box style uses the default Foundation look and as such has a border line. This is not a helpful look:

We should drop the line, and for the default callout box white background it would be better to use subtle tinting:

Title "Badges and buttons" misleading

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

fontpresentation.js is adding inner styles into html

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?

Document theme options

We should better note the expaned "theme" options and what issues they seek to resolve (such as the new light local-masthead option).

Create a scientific citation pattern

Nest sidebar menu into collapsible facets

Also move to right per existing EBI guidelines.

Not sure about the Tag component

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")