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
{
"version": "0.0.14",
"name": "@visual-framework/vf-boilerplate-page",
"description": "vf-boilerplate-page component",
"homepage": "https://visual-framework.github.io/vf-core/",
"author": "VF",
"license": "Apache 2.0",
"main": "build/index.js",
"files": [],
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
},
"repo": "https://github.com/visual-framework/vf-core/tree/master/components/boilerplates/vf-boilerplate-page",
"bugs": {
"url": "https://github.com/visual-framework/vf-core/issues"
},
"keywords": [
"fractal",
"component"
],
"gitHead": "ce5e8d5c5c0b99c706f3f67324bf4c058ec89ccd"
}
title: VF Boilerplate page
label: VF Boilerplate
preview: '@preview--fullhtml'
context:
component-type: boilerplate
<!DOCTYPE html>
<html lang="en" class="vf-no-js">
<head>
{% render "@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">
{% render "@vf-favicon" %}
{% render "@embl-content-meta-properties", {"meta_who": "Group Jane", "meta_where": "Barcelona", "meta_what": "research", "meta_active": "what"} %}
{% if _config.project.environment.local %}
<link rel="stylesheet" href="{{ '/css/styles.css' | path }}">
{% endif %}
{% if _config.project.environment.production %}
<link rel="stylesheet" href="https://dev.assets.emblstatic.net/vf/develop/css/styles.css">
{% endif %}
</head>
<body>
<header class="vf-header">
{% render "@vf-global-header" %}
</header>
<!-- dismissible banner -->
<section class="vf-banner vf-banner--fixed vf-banner--bottom vf-banner--phase" data-vf-js-banner data-vf-js-banner-state="dismissible" data-vf-js-banner-button-text="Close notice">
<div class="vf-banner__content" data-vf-js-banner-text>
<div>
<h3 class="vf-text vf-text--heading-r">
Don't need to customise the EMBL Design Language for Websites?
</h3>
<p class="vf-banner__text">Here's the core CSS and JS you need. Don't forget to <a href="http://dev.beta.embl.org/guidelines/visual-framework/dev-docs/" class="vf-link">consult the component library</a>.</p>
{% codeblock 'html' -%}
<link rel="stylesheet" href="https://dev.assets.emblstatic.net/vf/develop/css/styles.css">
<script src="https://dev.assets.emblstatic.net/vf/develop/scripts/scripts.js"></script>
{% endcodeblock %}
</div>
</div>
</section>
<div class="vf-body">
{% render "@vf-intro" %}
</div>
{% render "@vf-footer" %}
<script src="{{ '/scripts/scripts.js' | path }}"></script>
</body>
</html>
# 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.9 (2019-03-28)
**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
## 0.0.8 (2019-02-28)
**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
## 0.0.7 (2019-02-28)
**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
# 0.1.0
### Added
- added this
- added that
### Changes
- changed this
- changed that
### Removed
- deleted this
- deleted that
# vf-componenet-rollup Component
[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-componenet-rollup.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-componenet-rollup)
The `vf-componenet-rollup` compiles component Sass and JS into style.css and scripts.js files, retrospectively.
## Install
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `vf-componenet-rollup` with this command.
```
$ npm install --save @visual-framework/vf-componenet-rollup
```
## Usage
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
```
@import "@visual-framework/vf-componenet-rollup/index.scss";
```
_Make sure you import any requirements along with the modules._
/*
*
* styles.css
* The Visual Framework kitchen sink of styles.
* Include this style sheet as a quick way to get *everything*,
* or follow the guide at github.com/visual-framework/vf-core
* to learn how to build custom and optimised CSS.
*
*/
@import 'vf-global-custom-properties.scss';
@import 'vf-global-variables.scss';
@import 'vf-variables.scss';
@import 'vf-functions.scss';
@import 'vf-mixins.scss';
@import 'node-normalize-scss/normalize.scss';
@import 'vf-sass-utilities/vf-screen-reader.scss';
/* Visual Framework Utility Class Mixins */
@import 'vf-utility-mixins.scss';
/* All Visual Framework Font components */
// @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-sans-serif;
}
}
/* Visual Framework content compatibility
* We put this first so it will have the least specificity
*/
@import 'vf-content/vf-content.scss';
/* All Visual Framework grids */
@import 'vf-grid/vf-grid.scss';
// @import 'vf-inlay/vf-inlay.scss';
@import 'vf-grid-page/vf-grid-page.scss';
@import 'embl-grid/embl-grid.scss';
/* All Visual Framework Elements */
@import 'vf-badge/vf-badge.scss';
// @import 'vf-link/vf-link.scss';
// @import 'vf-link/vf-link--primary.scss';
// @import 'vf-link/vf-link--secondary.scss';
// @import 'vf-link/vf-link--disabled.scss';
@import 'vf-logo/vf-logo.scss';
@import 'embl-logo/embl-logo.scss';
// @import 'vf-form__core/vf-form__core.scss';
// @import 'vf-button/vf-button.scss';
// @import 'vf-figure/vf-figure.scss';
// @import 'vf-list/vf-list.scss';
// @import 'vf-blockquote/vf-blockquote.scss';
@import 'vf-divider/vf-divider.scss';
@import 'embl-conditional-edit/embl-conditional-edit.scss';
/* All Visual Framework Blocks */
// @import 'vf-box/vf-box.scss';
// @import 'vf-box/vf-box--inlay.scss';
// @import 'vf-box/vf-box--factoid.scss';
// @import 'vf-breadcrumbs/vf-breadcrumbs.scss';
// @import 'vf-breadcrumbs/vf-breadcrumbs--with-related.scss';
// @import 'vf-discussion/vf-discussion.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-lede/vf-lede.scss';
// @import 'vf-masthead/vf-masthead.scss';
// @import 'vf-masthead/vf-masthead--supports.scss';
// @import 'vf-navigation/vf-navigation.scss';
// @import 'vf-navigation/vf-navigation--global.scss';
// @import 'vf-navigation/vf-navigation--main.scss';
// @import 'vf-navigation/vf-navigation--additional.scss';
// @import 'vf-section-header/vf-section-header.scss';
// @import 'vf-activity-list/vf-activity-list.scss';
// @import 'vf-article-meta-information/vf-article-meta-information.scss';
// @import 'vf-search/vf-search.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--profile.scss';
// @import 'vf-summary/vf-summary--news.scss';
// @import 'vf-summary/vf-summary--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.scss';
@import 'embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss';
// @import 'vf-pagination/vf-pagination.scss';
// @import 'vf-pagination/vf-pagination--full.scss';
/* All Visual Framework Containers */
// @import 'vf-activity-group/vf-activity-group.scss';
@import 'vf-intro/vf-intro.scss';
@import 'embl-content-hub-loader/embl-content-hub-loader.scss';
@import 'vf-banner/vf-banner.scss';
@import 'vf-banner/vf-banner--phase.scss';
@import 'vf-banner/vf-banner--fixed.scss';
@import 'vf-banner/vf-banner--gdpr.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 Boilerplates */
// @import 'embl-group-page/embl-group-page.scss';
/* All Visual Framework Deprecated components */
// @import 'vf-deprecated/vf-deprecated.scss';
/* All Visual Framework Utility and high-specificity components */
@import 'vf-utility-classes/vf-utility-classes.scss';
@import 'vf-heading/vf-heading.scss';
@import 'vf-text/vf-text.scss';
// This is a demonstration of vf-core's ability to warn and proceed on missing
// sass imports
// @import 'vf-somepattern/vf-i-dont-exist.scss';
{
"version": "0.0.9",
"name": "@visual-framework/vf-componenet-rollup",
"description": "vf-componenet-rollup component",
"homepage": "https://visual-framework.github.io/vf-core",
"author": "VF",
"license": "Apache 2.0",
"style": "vf-componenet-rollup.css",
"sass": "index.scss",
"main": "build/index.js",
"files": [
"index.scss",
"scripts.js",
"README.md"
"vf-componenet-rollup.css"
],
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
},
"repo": "https://github.com/visual-framework/vf-core/tree/master/tree/master/components/vf-componenet-rollup",
"bugs": {
"url": "https://github.com/visual-framework/vf-core/issues"
},
"dependencies": {
"@visual-framework/vf-sass-config": "^0.0.12"
},
"keywords": [
"fractal",
"component"
],
"gitHead": "ce5e8d5c5c0b99c706f3f67324bf4c058ec89ccd"
}
/*
*
* scripts.css
* The Visual Framework kitchen sink of JavaScript.
* Import this as a quick way to get *everything*,
*
*/
// All VF JS
import { vfBanner } from 'vf-banner/vf-banner';
vfBanner();
import { vfTabs } from 'vf-tabs/vf-tabs';
vfTabs();
// import 'vf-form/vf-form__core/assets/float-labels.js';
// All EMBL JS
import { emblConditionalEdit } from 'embl-conditional-edit/embl-conditional-edit';
emblConditionalEdit();
import { emblContentHubLoaderHtmlImports } from 'embl-content-hub-loader/embl-content-hub-loader__html-imports';
import { emblContentHubFetch } from 'embl-content-hub-loader/embl-content-hub-loader__fetch';
import { emblContentHub } from 'embl-content-hub-loader/embl-content-hub-loader';
emblContentHub();
import { emblBreadcrumbs } from 'embl-breadcrumbs-lookup/embl-breadcrumbs-lookup';
emblBreadcrumbs();
import { emblContentMetaProperties_Read } from 'embl-content-meta-properties/embl-content-meta-properties';
// No default invokation
../node_modules/@visual-framework
\ No newline at end of file
aliases:
# Blacks, Whites, and Grays
# --------------------------------------
color-white: 'rgb(255,255,255)'
color-off-white: 'rgb(250,250,250)'
color-black: 'rgb(40,45,35)'
color-gray: 'rgb(112,115,114)'
color-gray-bright: 'rgb(185,179,168)'
color-gray-dark: 'rgb(84,88,90)'
# Colours
# --------------------------------------
color-green: 'rgb(0,159,77)'
color-green-dark: 'rgb(0,123,83)'
color-green-bright: 'rgb(108,194,74)'
color-light-green: 'rgb(168,199,0)'
color-light-green-dark: 'rgb(132,189,0)'
color-light-green-bright: 'rgb(226,232,104)'
color-ruby: 'rgb(228,0,70)'
color-ruby-dark: 'rgb(166,9,61)'
color-ruby-bright: 'rgb(229,143,158)'
color-yellow: 'rgb(255,205,0)'
color-yellow-dark: 'rgb(255,184,28)'
color-yellow-bright: 'rgb(253,215,87)'
color-purple: 'rgb(130,70,175)'
color-purple-bright: 'rgb(203,163,216)'
color-purple-dark: 'rgb(86,61,130)'
color-amber: 'rgb(255,163,0)'
color-amber-bright: 'rgb(190,84,0)'
color-amber-dark: 'rgb(239,192,110)'
color-azure: 'rgb(40,122,226)'
color-azure-bright: 'rgb(139,184,232)'
color-azure-dark: 'rgb(0,61,165)'
# VF Core Colours
# --------------------------------------
color-ui-black: 'rgb(0,0,0)'
color-ui-gray: 'rgb(243,243,243)'
color-ui-gray-light: 'rgb(216,216,216)'
color-ui-yellow: 'rgb(255,250,220)'
color-ui-red: 'rgb(211,47,47)'
# Decisions
# --------------------------------------
imports:
- "../core.palette.alias.yml"
props:
- name: vf-color--white
value: '{!color-white}'
meta:
friendlyName: White
- name: vf-color--off-white
value: '{!color-off-white}'
meta:
friendlyName: Off White
- name: vf-color--black
value: '{!color-black}'
meta:
friendlyName: Black
- name: vf-color--gray
value: '{!color-gray}'
meta:
friendlyName: Gray
- name: vf-color--gray-bright
value: '{!color-gray-bright}'
meta:
friendlyName: Bright Gray
- name: vf-color--gray-dark
value: '{!color-gray-dark}'
meta:
friendlyName: Dark Gray
- name: vf-color--green
value: '{!color-green}'
meta:
friendlyName: Green
- name: vf-color--green-bright
value: '{!color-green-bright}'
meta:
friendlyName: Bright Green
- name: vf-color--green-dark
value: '{!color-green-dark}'
meta:
friendlyName: Dark Green
- name: vf-color--light-green
value: '{!color-light-green}'
meta:
friendlyName: Light Green
- name: vf-color--light-green-bright
value: '{!color-light-green-bright}'
meta:
friendlyName: Bright Light Green
- name: vf-color--light-green-dark
value: '{!color-light-green-dark}'
meta:
friendlyName: Dark Light Green
- name: vf-color--ruby
value: '{!color-ruby}'
meta:
friendlyName: Ruby
- name: vf-color--ruby-bright
value: '{!color-ruby-bright}'
meta:
friendlyName: Bright Ruby
- name: vf-color--ruby-dark
value: '{!color-ruby-dark}'
meta:
friendlyName: Dark Ruby
- name: vf-color--yellow
value: '{!color-yellow}'
meta:
friendlyName: Yellow
- name: vf-color--yellow-bright
value: '{!color-yellow-bright}'
meta:
friendlyName: Bright Yellow
- name: vf-color--yellow-dark
value: '{!color-yellow-dark}'
meta:
friendlyName: Dark Yellow
- name: vf-color--purple
value: '{!color-purple}'
meta:
friendlyName: Purple
- name: vf-color--purple-bright
value: '{!color-purple-bright}'
meta:
friendlyName: Bright Purple
- name: vf-color--purple-dark
value: '{!color-purple-dark}'
meta:
friendlyName: Dark Purple
- name: vf-color--amber
value: '{!color-amber}'
meta:
friendlyName: Amber
- name: vf-color--amber-bright
value: '{!color-amber-bright}'
meta:
friendlyName: Bright Amber
- name: vf-color--amber-dark
value: '{!color-amber-dark}'
meta:
friendlyName: Dark Amber
- name: vf-color--azure
value: '{!color-azure}'
meta:
friendlyName: Azure
- name: vf-color--azure-bright
value: '{!color-azure-bright}'
meta:
friendlyName: Bright Azure
- name: vf-color--azure-dark
value: '{!color-azure-dark}'
meta:
friendlyName: Dark Azure
global:
type: color
category: color
props:
- name: vf-spacing--0
value: 0
- name: vf-spacing--xs
value: 4px
- name: vf-spacing--s
value: 8px
- name: vf-spacing--r
value: 16px
- name: vf-spacing--l
value: 20px
- name: vf-spacing--xl
value: 24px
- name: vf-spacing--xxl
value: 32px
global:
type: number
category: spacing
imports:
- "../core.palette.alias.yml"
props:
- name: vf-ui-color--black
value: '{!color-ui-black}'
meta:
friendlyName: UI Black
- name: vf-ui-color--gray
value: '{!color-ui-gray}'
meta:
friendlyName: UI Grey
- name: vf-ui-color--gray-light
value: '{!color-ui-gray-light}'
meta:
friendlyName: UI Grey light
- name: vf-ui-color--yellow
value: '{!color-ui-yellow}'
meta:
friendlyName: UI Yellow
- name: vf-ui-color--red
value: '{!color-ui-red}'
meta:
friendlyName: UI Red
global:
type: color
category: color
props:
- name: button--r
value:
font-size: 16px
font-weight: 700
line-height: 1
- name: body--xs
value:
font-size: 11px
font-weight: 600
line-height: 1.5
- name: body--s
value:
font-size: 14px
font-weight: 400
line-height: 1.57
- name: body--s-alt
value: