Unverified Commit 6ab764e3 authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files
parent 27965a80
Pipeline #11071 passed with stages
in 1 minute and 51 seconds

Too many changes to show.

To preserve performance only 1000 of 1000+ files are displayed.
<!--- Provide a general summary of your changes in the Title above -->
## Description
<!--- Describe your changes in detail -->
## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->
## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, tests ran to see how -->
<!--- your change affects other areas of the code, etc. -->
## Screenshots (if appropriate):
## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [ ] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
......@@ -5,4 +5,5 @@ node_modules/
.DS_Store
build
public
components/**/*.css
\ No newline at end of file
components/**/*.css
*.tgz
# CONTRIBUTING
We welcome ideas, bug reports, opinions and pull requests. Telling the maintainers
why you want or have done something is always very helpful.
## Branch naming conventions
In general `type/brief-description-of-branch`, example: `pattern/advanced-search`,
or `fix/grid-breaks-on-ios`
Here are the most commong `type`s:
- `patterns/` when developing a new pattern;
- `feature/` to be used when working on something that affects the whole system;
- `fix/` to be used for ... fixes;
- `hot-fix/` something very specific and usually urgent; and
- `docs/` for anything to do with documentation, content or code.
## Code of Conduct
We don't have a full policy yet but, in general: be nice, respectful
and considerate. The maintainers will do the same.
# EMBL Visual Framework principles and methods
## Principles
The spirit of what we're doing here.
1. Science first
- Built with the life sciences in mind
2. Evolution
- We’re just getting started, and we’re planning for the future
3. Clarity
- We’ll enable clear communication of challenging topics
4. Right choices are easy
- We provide the better choices as defaults
5. Compatibility and integration
- We don’t dictate the tech solution. Bring Angular or vanilla. This framework is here to help
6. For you, with you
- We’re building for the community and we’re asking for your help, directly or indirectly
## Methods
How we're going to do the above.
### 1. Open development, consultations
- We'll have some sort of regular meetings, discussions with stakeholders to ensure we're addressing the community's needs;
- We'll ensure scientific stakeholders are a part of the decision process;
- We'll welcome pull requests to code; and
- We'll have a Slack workspace (or some type of online support)
- [Join our embl-vf.slack.com group here](https://join.slack.com/t/embl-vf/shared_invite/enQtNDAxNzY0NDg4NTY0LTMwOGZhYThiZDE1OGFmYTM0ODgxNTkyZDllNjgyODU4MDgwOTRkZWU4OWY4M2I2OTgwZGMxZDRiOTI4NzVkYTI)
### 2. We flex to organisational needs
The framework is designed to adjust the look and feel according to the parent page's brand layer -- content on the EMBL.org site can look different (but of the same family) to the same content on a research team, service or training page.
### 3. Whole enchelada or modular
You can either use the central CSS+JS, or use NPM and pull in code for each block or container.
### 4. Vanilla first
We'll build our patterns targeting vanilla CSS and JS sites first and then build to support React, Angular, Drupal, Wordpress and any other supported environments. CSS and JS are the standard, and targeting these ensures the most longevity of the code base.
### 5. A shop front and workshop
We'll have a spot for developer (workshop) and a spot that targets a wider audience (workshop). https://github.com/visual-framework/vf-core-tooling-prototype/issues/10
### 6. Atomic-style design
Instead of the atomic names, we're using the spirit and calling them `elements` > `blocks` > `containers` > `page`. We believe this is more understanable and will be less contentious in a scientific enviorment.
- Elements are:
- a heading
- a paragraph
- an images
- Blocks are made of Elements to create:
- a 'teaser', et al.
- Containers are made of Blocks to create:
- a layout of three teasers
- Pages are made of Containers
### 7. CSS naming conventions
#### Element-classed naming
The `element` > `blocks` > `containers` are reflected in CSS names, so `.button` is `.e-button`, and that's combined with name-sapcing, see the next point:
#### Name-spaced CSS classes
Combined with element-classed naming, we're name-spacing with `embl`, so `.e-button` is `.embl-e-button`. This ensures styles won't conflict with framework X, and allows other groups to namespace their element, i.e. `.uniprot-e-button`.
#### No styles on the element
We won't apply CSS to `ul` and `h1` elements, but `embl-e-heading-xl` and `embl-e-list embl-e-list--unordered`.
This is more verbose, but ensures we only engage with HTML elements that developers want us to -- so we can play nice with CSS/JS framework X. It also seperates semantic structure from visual style.
#### Linting
We'll have recommended (S)CSS (and JS?) linting setups -- the specifics are still under discussion: https://github.com/visual-framework/vf-core-tooling-prototype/issues/11
### 8. Browser support
We'll support IE11 and the latest two versions of other major browsers. Beyond those we aim for graceful degradation.
# Visual Framework 2.0
- [Setting Up](#Setting-Up)
## What is this?
This project helps ensure brand consistency and the easy use of modern web design best practices -- such as responsive design, iterative maintenance cycles, and UX-tested patterns. It also does so with particular consideration for life science content: guidance for tables, graphs, data-heavy typography.
This framework is designed with the needs of life science websites and services. It goes beyond guidance for tables, graphs, data-heavy typography and focuses on being sane defaults and implements its CSS in a way that won't interfear with your existing patterns that use Bootstrap, Angular, or something else.
The VF 2.0 is extensible, modular and overridable; it's there to help and not get in the way.
- [Visual Framework 2.0 introduction](https://dev.beta.embl.org/guidelines/visual-framework/)
- [Online pattern library](https://dev.beta.embl.org/guidelines/visual-framework/dev-docs)
- [About the aims of the VF 2.0](https://blogs.embl.org/communications/2018/09/12/faster-scientific-websites-through-reusability/)
- [Principles and Methods](https://dev.beta.embl.org/guidelines/visual-framework/principles-methods/)
- [Changelog](https://dev.beta.embl.org/guidelines/visual-framework/dev-docs/docs/changelog.html)
- [Contributing guide](https://github.com/visual-framework/vf-core/blob/develop/CONTRIBUTING.md) and [pattern development](https://dev.beta.embl.org/guidelines/visual-framework/dev-docs/docs/guidelines.html)
### Can I find an updated version on the web?
### How do I use this?
When we release an update to the Visual Framework to the master is compiled and [the pattern library is published to embl.org/guidelines/visual-framework/dev-docs](dev.beta.embl.org/guidelines/visual-framework/dev-docs).
Include the [CSS, JS, copy a boilerplate](https://dev.beta.embl.org/guidelines/visual-framework/analytics/), or build your own `vf-child` theme (documentation to come).
### Do I need to install this?
### Do I need to install this repo?
This is meant for those wanting to develop or customise the Visual Framework. If you're building a basic integration with vanilla HTML, Angular, React, Wordpress or Drupal, see the integration guides [LINK TO BE MADE].
You only need download this repo if you wish to develop or customise the Visual Framework 2.0. If you want to use the VF on your site, have a look [at the boilerplate source](https://dev.beta.embl.org/guidelines/visual-framework/dev-docs/components/render/vf-boilerplate-page.html) and [pattern library](https://dev.beta.embl.org/guidelines/visual-framework/dev-docs/).
### I have an idea or concern!
There are three ways that we discuss and track ideas:
- General: Slack at [embl-vf.slack.com](https://embl-vf.slack.com/messages) for general ideas and discussion
- Creative: [Trello](https://trello.com/b/TpdoWYC5/visual-framework-20) for conceptual things like new design patterns and approaches to CSS standards and HTML guidelines
- Technical: [GitHub issues here](https://github.com/visual-framework/vf-ebi/issues) for implementing deeply technical and specific issues, like the Sass build process, browser bugs
Why use three things? Because there is no one tool that's good for all problems and all types of stakeholders.
### Contributing and branch naming
[See the Contributing guide](https://github.com/visual-framework/vf-core/blob/develop/CONTRIBUTING.md)
## Versioning
......@@ -31,93 +39,52 @@ As not all users of the Visual Framework will be able to update to the very late
| Major release | Minor release | Note |
| ------------- | ------------- | ---- |
| (Branch) | (Tag) | |
| 2.0 | v2.0.0 | Initial release evolving from Compliance theme |
| " | v2.0.1 | Tagged minor release |
| " | v2.0.2 | Tagged minor release |
| " | v2.0.3 | Tagged minor release |
| 2.1 | v2.1.0 | Documented, breaking release |
| " | v2.1.1 | Tagged minor release |
| 2.2 | v2.2.0 | Documented, breaking release |
| 2.0 | v2.0.0 | Initial release evolving from Compliance theme |
| " | v2.0.1 | Tagged patch release |
| " | v2.0.2 | Tagged patch release |
| " | v2.0.3 | Tagged patch release |
| 2.1 | v2.1.0 | Minor release with possible breaking changes |
| " | v2.1.1 | Tagged patch release |
| 2.2 | v2.2.0 | Minor release with possible breaking changes |
| 3.0 | v3.0.0 | Major release with many breaking changes|
Difference between major, minor releases:
- Major releases (.1, .2, .3...) can have breaking changes and any such changes will be detailed and tested.
- Minor releases (0.0.X) will not have changes to code structure or parts and will mainly add features or update visual assets (such as logos or icon fonts).
- Minor releases (.1, .2, .3...) can have breaking changes and any such changes will be detailed and tested.
- Patch releases (0.0.X) will not have changes to code structure or parts and will mainly add features or update visual assets (such as logos or icon fonts).
We support the last two major releases with bug fixes and branding. New features will only be added to the current and development versions.
We support the last two minor releases with bug fixes and branding. New features will only be added to the current and development versions.
Where's version 1.X, you ask? That's the [EMBL-EBI Visual Framework](https://github.com/ebiwd/EBI-Framework) from where this concept [originated, and evolved](https://blogs.embl.org/communications/2018/09/12/faster-scientific-websites-through-reusability/).
Where's version 1.X, you ask? That's the [EMBL-EBI specific Visual Framework](https://github.com/ebiwd/EBI-Framework) from where this concept [originated, and evolved](https://blogs.embl.org/communications/2018/09/12/faster-scientific-websites-through-reusability/).
### Test releases
Testing releases will be identified in their tag, a la: `v2.0-alpha.1`, where `-alpha.1` is the tag. `-alpha`, `-beta` and `-rc` are tag suffixes.
### Alpha development of v2.0
As the Visual Framework is in heavy, active development, we will have many `v2.0.0-alpha.X` releases. With new alphas planned on a weekly basis (Fridays).
## Setting Up
To use the Visual Framework your machine will require some software to be installed to start.
The software you will need is:
- Node.js
- Gulp
You can check to see if you have these installed in the command line by entering the name of the package with -v afterwards, for example.
```
$ node -v
$ gulp -v
```
If either of these throw an error in your command line application then you will need to install them.
As the Visual Framework is in heavy, active development, we will have many `v2.0.0-alpha.X` releases. With new alphas planned on a monthly basis (last Thursday of each month).
### To install Node
## Local development
The easiest way to download and install Node is via the official [downloads page](https://nodejs.org/download/) where you can download the correct version for your operating system.
### Setting Up
### To install Gulp
To use the Visual Framework your machine will require some software to be installed to start. [See the SETTINGUP.md guide](https://github.com/visual-framework/vf-core/blob/develop/SETTINGUP.md).
Once you have Node install you can easily install the Gulp task manager by entering the following command into your command line application:
```
npm install gulpjs/gulp-cli -g
```
## Installing the Visual Framework
### Installing the Visual Framework
You will need to install this repo onto your machine so that you can update, amend, and and delete patterns to the Visual Framework as required.
#### 1. Clone this repo
```
git clone https://github.com/visual-framework/vf-ebi.git
cd visual-framework-tooling-prototype
```
#### 2. Install [fractal](https://github.com/frctl/fractal)
You might need to use `sudo`.
```
npm i -g @frctl/fractal
```
#### 3. Download all the things
```
npm install
```
#### 4. Run a dev build
You're now setup to run the visual framework's component library, run a dev build:
```
gulp dev
```
1. Clone this repo
- `git clone https://github.com/visual-framework/vf-ebi.git`
1. Move to the directory
- `cd visual-framework-tooling-prototype`
1. You probably want the develop branch (or [your new feature branch](https://github.com/visual-framework/vf-core/blob/develop/CONTRIBUTING.md))
- `git checkout develop`
1. Install [fractal](https://github.com/frctl/fractal) You might need to use `sudo`.
- `npm i -g @frctl/fractal`
1. Download all the things
- `npm install`
1. Run a dev build and open in your browser
- `gulp dev`
## Creating a new component
......
# Setting Up
To use the Visual Framework your machine will require some software to be installed to start.
The software you will need is:
- Node.js
- Gulp
You can check to see if you have these installed in the command line by entering the name of the package with -v afterwards, for example.
```
$ node -v
$ gulp -v
```
If either of these throw an error in your command line application then you will need to install them.
## To install Node
The easiest way to download and install Node is via the official [downloads page](https://nodejs.org/download/) where you can download the correct version for your operating system.
## To install Gulp
Once you have Node install you can easily install the Gulp task manager by entering the following command into your command line application:
```
npm install gulpjs/gulp-cli -g
```
## Installing the Visual Framework
To continue installing the Visual Framework, [return to the README.md](https://github.com/visual-framework/vf-core/blob/master/README.md).
.Preview-iframe {
border: 1px solid #b3b3b3;
padding: 12px 0 0 12px;
padding: 0;
}
.Tree-depth-2 > h4 {
font-size: 24px;
......@@ -31,3 +32,64 @@
.Browser-controls {
margin-bottom: 16px;
}
.Tree-entityLink {
align-items: center;
display: flex;
}
.Status,
.Status-dots {
align-items: center;
display: flex;
}
.Status-dot {
background-color: white;
border: 1px solid transparent;
border-radius: 100%;
height: .5rem;
width: .5rem;
}
.Status-dot + .Status-dot {
margin-left: 3px;
}
.Status-label {
border-radius: 2rem;
color: white;
display: inline-block;
font: normal .75rem/1.66667 'Open Sans', Helvetica, Arial, sans-serif;
padding: .125rem .75rem;
white-space: nowrap;
}
.Status-label + .Status-label {
margin-left: 3px;
}
.Status--labelled {
.Status-label {
margin-right: 3px;
}
}
/* this needs to become a 'vf-core-color'
A proposal from Stu:
- We keep vf-colors, and consider it the brand “theme colour stack” We stick with the set-color mixin for these.
- We then have vf-core-colors for things that are agnostic to EMBL, uniprot etc (the light grey and light yellow for example) and have a set-core-color mixins for those things.
- This paves the way for any future theming required but keeps colours that will forever be the same consistent.
Ken: Yeah, I like that idea … `vf-colours` + an `embl-colours` that overrides some and adds more options that we need for EMBL.
Mark: Me too. Almost like ‘interface colours’ > ‘brand colours’ > ‘sub-brand colours’ > ‘whatever’
*/
$colors-of-shame: (
light-grey: #D8D8D8
)
\ No newline at end of file
@import "map-deep-get";
@import "string-replace";
@import "set-color";
// vf-divider
@mixin divider() {
background-color: map-get($vf-colors-map, vf-color-gray);
margin: 0 map-get($vf-spacing-map, vf-spacing-xxl);
}
......@@ -7,27 +7,37 @@
* to learn how to build custom and optimised CSS.
*
*/
$use-global-typography: true !default;
@import 'variables/vf-global-variables.scss';
@import 'variables/variables.scss';
@import 'functions/functions.scss';
@import 'mixins/mixins.scss';
/* A shame.scss file for things that haven't got a
* place in the Visual Framework yet
*/
@import '_shame.scss';
@import 'vf-global-custom-properties.scss';
@import 'vf-global-variables.scss';
@import 'vf-variables.scss';
$global-font-family: $vf-font-family-sans-serif;
@import 'vf-functions.scss';
@import 'vf-mixins.scss';
@import 'node-normalize-scss/normalize.scss';
@import 'utilities/vf-screen-reader.scss';
@import 'vf-sass-utilities/vf-screen-reader.scss';
/* Visual Framework Utility Class Mixins */
@import 'mixins/utility-mixins.scss';
@import 'vf-utility-mixins.scss';
/* All Visual Framework Font Patterns */
@import 'vf-font-plex-mono/vf-font-plex-mono';
@import 'vf-font-plex-sans/vf-font-plex-sans';
// @import 'vf-font-plex-mono/vf-font-plex-mono.scss';
@import 'vf-font-plex-sans/vf-font-plex-sans.scss';
html, button {
@if $use-global-typography == true {
font-family: $vf-font-family-monospace;
font-family: $vf-font-family-sans-serif;
}
}
......@@ -43,9 +53,7 @@ html, button {
/* All Visual Framework Elements */
@import 'vf-heading/vf-heading.scss';
@import 'vf-tags/vf-tags.scss';
@import 'vf-text/vf-text.scss';
@import 'vf-badge/vf-badge.scss';
@import 'vf-link/vf-link.scss';
@import 'vf-logo/vf-logo.scss';
@import 'vf-form/index.scss';
......@@ -62,32 +70,47 @@ html, button {
/* All Visual Framework Blocks */
@import 'vf-breadcrumbs/vf-breadcrumbs.scss';
@import 'vf-factoid/vf-factoid.scss';
@import 'vf-snippet/vf-snippet.scss';
@import 'vf-data-protection-banner/vf-data-protection-banner.scss';
@import 'vf-code-example/vf-code-example.scss';
@import 'vf-page-header/vf-page-header.scss';
@import 'vf-link-list/vf-link-list.scss';
@import 'vf-header/vf-header.scss';
@import 'vf-masthead/vf-masthead.scss';
@import 'vf-navigation/vf-navigation.scss';
@import 'vf-job-description/vf-job-description.scss';
@import 'vf-section-header/vf-section-header.scss';
@import 'vf-activity-list/vf-activity-list.scss';
@import 'vf-contact/vf-contact.scss';
@import 'vf-news-item/vf-news-item.scss';
@import 'vf-article-meta-information/vf-article-meta-information.scss';
@import 'vf-summary/vf-summary.scss';
@import 'vf-summary/vf-summary--article.scss';
@import 'vf-summary/vf-summary--job.scss';
@import 'vf-summary/vf-summary--news.scss';
@import 'vf-summary/vf-summary--news-has-image.scss';
@import 'vf-video/vf-video.scss';
@import 'vf-video-teaser/vf-video-teaser.scss';
@import 'vf-global-header/vf-global-header.scss';
@import 'vf-tabs/vf-tabs';
@import 'vf-tabs/vf-tabs.scss';
/* All Visual Framework Containers */
@import 'vf-activity-group/vf-activity-group.scss';
@import 'vf-intro/vf-intro.scss';
@import 'vf-banner/vf-banner.scss';
@import 'vf-news-container/vf-news-container.scss';
@import 'vf-video-container/vf-video-container.scss';
@import 'vf-footer/vf-footer.scss';
/* All Visual Framework Utility Classes */
@import 'vf-utility-classes/vf-utility-classes';
/* All Visual Framework Deprecated Patterns */
@import 'vf-tag/vf-tag.scss';
@import 'vf-job-description/vf-job-description.scss';
@import 'vf-news-item/vf-news-item.scss';
@import 'vf-snippet/vf-snippet.scss';
/* All Visual Framework Utility and high-specificity patterns */
@import 'vf-utility-classes/vf-utility-classes.scss';
@import 'vf-heading/vf-heading.scss';
@import 'vf-text/vf-text.scss';
/* Adds a shame.scss file for things that haven't got a
* place in the Visual Framework yet
......
$vf-breakpoint-xs: 22.5rem;
$vf-breakpoint-s: 37.5rem;
$vf-breakpoint-r: 48rem;
$vf-breakpoint-l: 64rem;
$vf-breakpoint-xl: 80rem;
$vf-colors-map: (
'vf-color-white': (#ffffff),
'vf-color-off-white': (#fafafa),
'vf-color-black': (#000000),
'vf-color-gray': (#b3b3b3),
'vf-color-gray-bright': (#dcdcdc),
'vf-color-gray-dark': (#4d4d4d),
'vf-color-green': (#19993b),
'vf-color-green-bright': (#72b370),
'vf-color-green-dark': (#008139),
'vf-color-light-green': (#a7c600),
'vf-color-light-green-bright': (#c3d469),
'vf-color-light-green-dark': (#8d990b),
'vf-color-ruby': (#dc0a28),
'vf-color-ruby-bright': (#e7a89e),
'vf-color-ruby-dark': (#b11e32),
'vf-color-aquamarine': (#008293),
'vf-color-aquamarine-bright': (#4395a2),
'vf-color-aquamarine-dark': (#00707b),
'vf-color-amethyst': (#845fa1),
'vf-color-amethyst-bright': (#9385b7),
'vf-color-amethyst-dark': (#5f4b8b),
'vf-color-amber': (#e89300),
'vf-color-amber-bright': (#edaa50),
'vf-color-amber-dark': (#bf831c),
'vf-color-azure': (#349bff),
'vf-color-azure-bright': (#8dbfe2),
'vf-color-azure-dark': (#298dd3),
);
$use-global-typography: true !default;
$vf-link-color: #298dd3;
$vf-link-disabled-color: #dcdcdc;
$vf-link-hover-color: #349bff;
$vf-link-visited-color: #4d4d4d;
$vf-link-decoration: underline;
{{ render '@vf-page-header' }}
{{ render '@vf-snippet' }}
{{ render '@vf-snippet' }}
{{ render '@vf-snippet' }}
<!DOCTYPE html>
<html lang="en" class="no-js">
<html lang="en" class="vf-no-js">
<head>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<title>{{ _target.title }} | EMBL Visual Framework</title>
{{> @vf-no-js }}
<title>{{ _target.title }} | {{ _config.project.title }}</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/elements/vf-favicon/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/elements/vf-favicon/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/elements/vf-favicon/assets/favicon-16x16.png">
<link rel="manifest" href="/assets/elements/vf-favicon/assets/site.webmanifest">
<link rel="mask-icon" href="/assets/elements/vf-favicon/assets/safari-pinned-tab.svg" color="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
{{> @vf-favicon}}