Skip to content
Snippets Groups Projects
Commit 823dc702 authored by Stu Robson's avatar Stu Robson
Browse files

updates masthead, breaking HTML change, adds JS for text colour decision and documentation

parent b2ff7dcd
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 211 additions and 117 deletions
components/vf-masthead/README.md
+ 91
− 0
View file @ 823dc702
......@@ -2,6 +2,97 @@
## About
## Usage
### Background Colours
By default, the background colour for the masthead is `vf-color-green`. To make this more adaptable for other teams and organisation the Visual Framework uses CSS Custom Properties in order to be able to switch this colour to something more in-keeping with the team wanting to use this component.
The colour values are stored in two CSS custom properties. One for the background colour itself and the other for the text colour.
```css
--vf-masthead__color--foreround-default: var(--vf-color-white);
--vf-masthead__color--background-default: var(--vf-color-green);
```
This is set in the components Sass partial but is used in the components HTML inline.
```html
<div class="vf-masthead" style="
background-color: var( --vf-masthead__color--background, var(--vf-masthead__color--background-default) );
color: var( --vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
">
```
To override this the changes to `--vf-masthead__color--foreround-default` and `--vf-masthead__color--background-default` need to be applied either after the Sass partial is compiled in your build step or in the HTML on the page using `root`:
```html
<style>
:root {
--vf-masthead__color--background: none;
--vf-masthead__color--foreground: #000000;
}
</style>
```
#### notes:
If you are overriding the background or foreground (text) colour make sure you are:
- using a colour from the Visual Framework.
- testing to be sure that the contrast ratio meets accessibility guidelines.
---
### Background Images
If you wish to use an image instead of a colour for the background of your masthead you will need to define it's location as a CSS Custom Property.
```css
--vf-masthead__bg-image: url('path/to/background-image.png');
```
#### Image Size
The maximum dimensions for a background image is 1224px wide with a height of 150px. As more and more displays are what we term 'retina' they need to be twice the width and height to look crisp.
Images that are used for mastheads need to have dimensions of 2448px by 300px.
#### Text Colour
When using a background image we have to determine the best text colour to meet the contrast ratio from our accessibility guidelines.
We do this using JavaScript and the background image filename.
In creating the background images for mastheads each image filename needs to have it's most dominate colour added as a hexidecimal code.
```bash
masthead-background-image--00EF00.png
```
The JavaScript looks for this hexidecimal colour code and mathematically works out the correct text colour to use. The CSS custom property `--vf-masthead__color--foreground` is then added as a style block after the `body` tag in the HTML page. It will also add the custom property `--vf-masthead__color--background: none` to remove the background colour.
```html
<style>
:root {
--vf-masthead__color--background: none;
--vf-masthead__color--foreground: #00EF00;
}
</style>
```
If JavaScript is disabled, or if it doesn't load with the page. The masthead will defualt to the background colour.
---
### Browser Support
CSS Custom Properties do not work in older versions of Internet Explorer. We provide a default look for the masthead for these browser which is a white foreground colour (for text) on a green background.
However, this can be overriden if needed using the Sass variables.
<br>
## Installation and Implementation
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-masthead` with this command.
......
components/vf-masthead/vf-masthead--inlay.njk
+ 9
− 23
View file @ 823dc702
......@@ -2,30 +2,16 @@
:root {
/* These CSS properties are theming variables. If used, add to your HTML
after the VF CSS for vf-masthead and before the HTML for vf-masthead. */
/* --vf-masthead__color--background: none; */
/* --vf-masthead__color--foreground: #000000; */
/* --vf-masthead__bg-image: url('http://www.fillmurray.com/800/200'); */
--vf-masthead__bg-image: url('{{ '/assets/vf-masthead/assets/group-bg_2d4155.png' | path }}');
}
</style>
<header class="vf-inlay__header">
<div class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a class="vf-masthead__heading__link" href="http://dev-vf-theme-prototype.pantheonsite.io">Häring Group</a>
<span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span>
</h1>
<div id="js-masthead-bg" class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );">
<div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a class="vf-masthead__heading__link" href="http://dev-vf-theme-prototype.pantheonsite.io">Häring Group</a>
<span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span>
</h1>
</div>
</div>
</div> <!--/vf-masthead-->
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list--inline">
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/about/" class="vf-navigation__link">About</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/members/" class="vf-navigation__link">Members</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/publications/" class="vf-navigation__link">Publications</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/jobs/" class="vf-navigation__link">Jobs</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/blog/" class="vf-navigation__link">Blog</a></li>
<li class="vf-navigation__item"><a href="http://dev-vf-theme-prototype.pantheonsite.io/optional/" class="vf-navigation__link">Optional</a></li>
</ul>
</nav>
<!--/vf-navigation-->
</header>
components/vf-masthead/vf-masthead--with-title-block.njk
+ 14
− 15
View file @ 823dc702
<div class="vf-masthead vf-masthead--with-title-block" style="background-image: url('{{ '/assets/vf-masthead/assets/group-bg.png' | path }}')">
<div class="vf-masthead__title">
<div class="vf-masthead__title-inner">
<div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a href="http://dev.beta.embl.org/guidelines/visual-framework" class="vf-masthead__heading__link" data-pjax="">Visual Framework 2.0</a>
<a href="#" class="vf-masthead__heading__link">Strategy &amp; Communications</a>
</h1>
<h2 class="vf-masthead__subheading">
<span class="vf-masthead__location">EMBL</span>
<span class="vf-masthead__group"><a href="http://dev.beta.embl.org/guidelines/">Guidelines</a></span>
<span class="vf-masthead__location">VF Hamburg</span>
<span class="vf-masthead__group">Structural Biology</span>
</h2>
</div>
</div>
<form action="" class="vf-masthead__form--search">
<div class="vf-masthead__form__item">
<label for="" class="vf-masthead__form__label">Search This Project</label>
<input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
<button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
</div>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
<form action="" class="vf-masthead__form--search">
<div class="vf-masthead__form__item">
<label for="" class="vf-masthead__form__label">Search This Project</label>
<input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
<button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
</div>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
</div>
</div>
components/vf-masthead/vf-masthead.js 0 → 100644
+ 48
− 0
View file @ 823dc702
// The background image for the banner element are taken from the database.
// The filename includes the hex code for the background colour of the image.
// Then test if the 6 characters are a hex code and declare the background-color
//function for making background color of banner from image file name
function setStyle(elId) {
if (document.getElementById(elId)) {
var el = document.getElementById(elId);
var bannerEl = document.getElementById("js-masthead-bg");
var bannerBG = getComputedStyle(bannerEl).getPropertyValue('--vf-masthead__bg-image');
var filename = bannerBG.substr(0, bannerBG.lastIndexOf('.')) || bannerBG;
var hexcode = filename.substr(filename.length - 6);
var bannerBGC = "#" + hexcode;
var regHex = /[0-9A-Fa-f]{6}/g;
if (regHex.test(hexcode)) {
if (!bannerBGC) return;
bannerBGC = bannerBGC.trim();
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function getCorrectTextColor(hex){
threshold = 130; /* about half of 256. Lower threshold equals more dark text on dark background */
hRed = hexToR(hex);
hGreen = hexToG(hex);
hBlue = hexToB(hex);
cBrightness = ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
}
getCorrectTextColor(bannerBGC);
// bannerEl.style.setProperty('--vf-masthead__color--background', "none");
if (cBrightness > threshold){
bannerEl.style.setProperty('--vf-masthead__color--foreground', "#000000");
} else if (cBrightness < threshold) {
bannerEl.style.setProperty('--vf-masthead__color--foreground', "#FFFFFF");
}
}
}
};
setStyle('js-masthead-bg');
components/vf-masthead/vf-masthead.njk
+ 19
− 17
View file @ 823dc702
<div class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a href="#" class="vf-masthead__heading__link">Strategy &amp; Communications</a>
</h1>
<h2 class="vf-masthead__subheading">
<span class="vf-masthead__location">VF Hamburg</span>
<span class="vf-masthead__group">Structural Biology</span>
</h2>
</div>
<form action="" class="vf-masthead__form--search">
<div class="vf-masthead__form__item">
<label for="" class="vf-masthead__form__label">Search This Project</label>
<input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
<button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
<div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a href="#" class="vf-masthead__heading__link">Strategy &amp; Communications</a>
</h1>
<h2 class="vf-masthead__subheading">
<span class="vf-masthead__location">VF Hamburg</span>
<span class="vf-masthead__group">Structural Biology</span>
</h2>
</div>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
<form action="" class="vf-masthead__form--search">
<div class="vf-masthead__form__item">
<label for="" class="vf-masthead__form__label">Search This Project</label>
<input type="text" class="vf-masthead__form__input--text" placeholder="Enter gene query…">
<button class="vf-masthead__button vf-u-text-replacement"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg></button>
</div>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
</div>
</div>
components/vf-masthead/vf-masthead.scss
+ 30
− 62
View file @ 823dc702
......@@ -2,78 +2,43 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
// vf-masthead
.vf-inlay__header {
// box-sizing: border-box;
grid-column: 1 / -1;
margin: 0 auto;
max-width: 76.5em;
padding: 0 1rem;
position: relative;
width: 100%;
.vf-masthead__heading {
padding: 0 1rem;
}
.vf-navigation {
&::before {
background-color: inherit;
content: '';
height: 37px; // special number
left: 50%;
margin: 0 -50vw;
position: absolute;
right: 50%;
width: 100vw;
z-index: -1;
}
}
}
.vf-masthead {
--vf-masthead__color--foreround-default: var(--vf-color-white);
--vf-masthead__color--background-default: var(--vf-color-green);
background-color: set-color(vf-color-green);
background-image: var( --vf-masthead__bg-image, none);
background-repeat: no-repeat;
background-size: cover;
color: set-color(vf-color-white);
&::before {
background-color: inherit;
background-image: var( --vf-masthead__bg-image, 0);
background-repeat: no-repeat;
background-size: cover;
content: '';
height: 100%;
left: 50%;
margin: 0 -50vw;
position: absolute;
right: 50%;
width: 100vw;
z-index: -1;
}
@media (min-width: $vf-breakpoint-l) {
display: grid;
grid-template-columns: calc(var(--embl-grid-module--prime) + var(--embl-grid-spacing-normaliser)) repeat(auto-fit, minmax(288px, 1fr));
grid-template-rows: 48px 1fr;
padding-top: 48px;
}
}
.vf-masthead__inner {
max-width: 76.5em;
margin: 0 auto;
display: flex;
width: 100%;
}
.vf-masthead__title {
align-self: unset;
display: inline-flex;
flex-direction: column-reverse;
grid-column: 1 / span 3;
grid-row: 2;
// margin: 0 auto;
z-index: 2;
}
.vf-masthead__heading {
@include set-type(heading--xl, $custom-margin-bottom: 8px);
color: inherit;
color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
display: flex;
flex-direction: column;
}
......@@ -81,7 +46,7 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead__heading--additional {
@include set-type(heading--s, $custom-margin-bottom: 0);
color: inherit;
color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
position: relative;
top: -8px;
}
......@@ -89,7 +54,7 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead__sub-heading {
@include set-type(heading--s);
color: $vf-masthead__title-text--color;
color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );
}
.vf-masthead__heading__link {
......@@ -115,29 +80,30 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
.vf-masthead--with-title-block {
grid-column-gap: 0;
&::before {
background-color: set-color(vf-color-black);
content: '';
grid-column: 1 / 2;
grid-row: 2 / 2;
}
.vf-masthead__title {
align-self: unset;
background-color: set-color(vf-color-black);
display: inline-flex;
grid-column: 2 / span 1;
padding-right: 16px;
padding-top: 16px;
position: relative;
.vf-masthead__title-inner {
&::before {
background-color: set-color(vf-color-black);
content: '';
display: inline-flex;
flex-direction: column-reverse;
grid-auto-columns: max-content;
grid-column: 3 / -2;
width: 50vw;
height: 100%;
padding-left: 16px;
position: absolute;
transform: translateX(-50%);
}
}
.vf-masthead__subheading {
z-index: 5150;
}
}
.vf-masthead__form--search {
......@@ -146,6 +112,8 @@ $vf-masthead__title-text--color: set-color(vf-color-white);
justify-content: flex-end;
margin-bottom: 12px;
z-index: 5150;
margin-left: auto;
max-width: 288px;
}
.vf-masthead__form__item {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment