Unverified Commit e56ae0f6 authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

Merge pull request #1 from embl-communications/develop

Initial boilerplate for EMBL
parents c2c5075a c8d48a29
[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-masthead.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-masthead)
## About
## 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.
```
$ npm install --save @visual-framework/vf-masthead
```
The source files included are written in [Sass](http://sass-lang.com)(`scss`). You can point your Sass `include-path` at your `node_modules` directory and import it like this.
```
@import "@visual-framework/vf-masthead/index.scss";
```
_Make sure you import any requirements along with the modules._
// setup files required
@import 'vf-global-variables';
@import 'vf-variables';
@import 'vf-functions';
@import 'vf-mixins';
// other components being used
@import 'vf-grid/vf-grid.scss';
// component specific styles
@import 'vf-masthead.scss';
{
"name": "@visual-framework/vf-masthead",
"version": "0.0.15",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"node-normalize-scss": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/node-normalize-scss/-/node-normalize-scss-8.0.0.tgz",
"integrity": "sha512-eQMVmvs2Hj33v3m/jstZOBGOr0lO+Rr3tamGdZxBtiUbJ/WXywsLz/LhVQDSugxG4TEnfYyGxdfbRVKNxw+x7g=="
}
}
}
{
"version": "0.0.29",
"name": "@visual-framework/vf-masthead",
"description": "vf-masthead component",
"homepage": "https://visual-framework.github.io/vf-core/",
"author": "VF",
"license": "Apache 2.0",
"style": "vf-masthead.css",
"sass": "index.scss",
"files": [
"assets",
"index.scss",
"vf-masthead.scss",
"vf-masthead.css",
"vf-masthead.njk",
"vf-masthead.config.yml"
],
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
},
"repo": "https://github.com/visual-framework/vf-core/tree/master/components/blocks/vf-masthead",
"bugs": {
"url": "https://github.com/visual-framework/vf-core/issues/new"
},
"dependencies": {
"@visual-framework/vf-grid": "^0.0.28",
"@visual-framework/vf-sass-config": "^0.0.25",
"node-normalize-scss": "^8.0.0"
},
"keywords": [
"fractal",
"component"
],
"gitHead": "ce5e8d5c5c0b99c706f3f67324bf4c058ec89ccd"
}
<style>
: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'); */
}
</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>
</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>
.vf-header .vf-masthead {
grid-column: 1 / -1;
}
.embl-group-header__header .vf-masthead {
grid-column: 2 / -2;
}
<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">
<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>
</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>
</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>
</div>
title: Masthead
label: Masthead
preview: '@preview--nogrid'
context:
component-type: block
<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>
<span class="search-examples">Examples: <a href="">ASPM</a>, <a href="">Apoptosis</a>, <a href="">ENSMUSG00000021789</a></span>
</form>
</div>
$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);
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;
}
}
.vf-masthead__title {
align-self: unset;
display: inline-flex;
flex-direction: column-reverse;
grid-column: 1 / span 3;
grid-row: 2;
}
.vf-masthead__heading {
@include set-type(heading--xl, $custom-margin-bottom: 8px);
color: inherit;
display: flex;
flex-direction: column;
}
.vf-masthead__heading--additional {
@include set-type(heading--s, $custom-margin-bottom: 0);
color: inherit;
position: relative;
top: -8px;
}
.vf-masthead__sub-heading {
@include set-type(heading--s);
color: $vf-masthead__title-text--color;
}
.vf-masthead__heading__link {
@include inline-link($vf-masthead__title-text--color,$vf-masthead__title-text--color,$vf-masthead__title-text--color,$vf-masthead__title-text--color);
color: inherit;
text-decoration: none;
z-index: 5150;
}
.vf-masthead__subheading {
@include set-type(body--s-alt, $custom-margin-bottom: 0);
color: $vf-masthead__title-text--color;
text-transform: uppercase;
}
.vf-masthead__subheading a {
color: inherit;
text-decoration: none;
z-index: 5150;
}
.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;
display: inline-flex;
grid-column: 2 / span 1;
padding-right: 16px;
.vf-masthead__title-inner {
background-color: set-color(vf-color-black);
display: inline-flex;
flex-direction: column-reverse;
grid-auto-columns: max-content;
grid-column: 3 / -2;
padding-left: 16px;
}
}
}
.vf-masthead__form--search {
align-self: flex-end;
grid-row: 2;
justify-content: flex-end;
margin-bottom: 12px;
z-index: 5150;
}
.vf-masthead__form__item {
color: set-color(vf-color-white);
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 6px;
}
.vf-masthead__button {
align-items: flex-end;
background-color: set-color(vf-color-azure-dark);
border: 0;
color: set-color(vf-color-white);
margin-left: 8px;
outline: 0;
padding: 8px 12px;
svg {
fill: set-color(vf-color-white);
width: 16px;
}
}
.vf-masthead__form__label {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 4px;
text-shadow: 1px 1px 3px set-color(vf-color-white);
}
.vf-masthead__form__input--text {
flex-basis: 79%;
flex-grow: 0;
flex-shrink: 0;
font-size: 18px;
font-style: italic;
padding: map-get($vf-spacing-map, vf-spacing-tight);
}
.search-examples {
// white-space: nowrap;
color: set-color(vf-color-white);
font-size: 12px;
text-shadow: 1px 1px 0px set-ui-color(vf-ui-color-black);
a {
color: set-color(vf-color-white);
text-shadow: 1px 1px 0px set-ui-color(vf-ui-color-black);
}
}
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## 0.0.25 (2019-03-28)
### Bug Fixes
* sneak in gray-light colour to tokens ([3c89541](https://github.com/visual-framework/vf-core/commit/3c89541))
# 2.0.0-alpha.1 (2018-12-20)
## 0.0.24 (2019-02-28)
# 2.0.0-alpha.1 (2018-12-20)
**Note:** Version bump only for package @visual-framework/vf-sass-config
## 0.0.23 (2019-02-28)
# 2.0.0-alpha.1 (2018-12-20)
**Note:** Version bump only for package @visual-framework/vf-sass-config
// retrieve color from $colors map ie. `set-color(base, primary)`
@function set-color($color-name) {
@return map-get($vf-colors-map, $color-name);
}
@function set-ui-color($color-name) {
@return map-get($vf-ui-colors-map, $color-name);
}
// functions to get relevant font informtation from sass maps --- --- --- ---
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
// str-replace function
// --------------------
// This is used to slice off the first amount($number) of characters from the $name value passed.
// Primarily used to replace the start of variables for the utility class generation.
@function str-replace($name, $number) {
@return str-slice($name, $number);
}
@import 'map-deep-get';
@import 'string-replace';
@import 'set-color';
@import '../variables/vf-global-variables.scss';
@import '../variables/vf-variables.scss';
@import '../functions/vf-functions.scss';
@import '../mixins/vf-mixins.scss';
@mixin blockquote() {
@include set-type(body--l);
margin: 0;
padding: 10px 8px 10px 32px;
position: relative;
&::before {
content: '';
border-left: 4px solid map-get($vf-colors-map, vf-color-gray-bright);
position: absolute;
left: 12px;
height: 100%;
top: 0;
}
}
@mixin vf-button {
appearance: none;
border: 0;
cursor: pointer;
display: inline-block;
margin: 0;
padding: 16px 24px;
text-decoration: none;
}
Markdown is supported
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