Commit c8d48a29 authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Initial setup of embl stuff

parent f2b9b51d
## 🚨 Pre-alpha 🚨
# The Visual Framework for the EMBL Design system
Warning: the `vf-child-template` is pre-alpha, things will change. We welcome usage and feedback, but updates will be tricky.
This is an implementation of [the core Visual Framework (`vf-core`)](https://github.com/visual-framework/vf-core#visual-framework-20)
for [the EMBL Design system](https://dev.beta.embl.org/guidelines/design).
# Visual Framework Child template
tl;dr Clone and edit me.
This is a child template to use [the core Visual Framework (`vf-core`)](https://github.com/visual-framework/vf-core#visual-framework-20)
patterns, override them and add your own.
Why use a child? Programatically use (and update from)
Visual Framework core patterns, but with complete flexibility in the look
and function of your patterns (in addition to the Visual Framework's [style
isolation principles](https://blogs.embl.org/communications/2018/09/12/faster-scientific-websites-through-reusability/)).
Here you can find detailed documentation on EMBL Design system components.
## 🚼 Know the basics
If you've not already, take a few minutes to [read the basics of the Visual Framework](https://github.com/visual-framework/vf-core#visual-framework-20).
## 1️⃣ 📦 Clone the Visual Framework Child template
## 1️⃣ 📦 Local development
Want to develop patterns?
*(You'll need gulp and node; [head here if you don't know what those are](https://github.com/visual-framework/vf-core/blob/develop/SETTINGUP.md))*
- `git clone https://github.com/khawkins98/vf-child-playground.git` (add repo url once ready)
- `cd vf-child-playground`
- `git clone https://github.com/embl-communications/vf-embl.git`
- `cd vf-embl`
- `npm install`
## 2️⃣ 🎫 Decide on project name, namespace
Open `pacakage.json` and edit:
```
"vfConfig": {
"vfName": "Visual Framework Child pattern library",
"vfNamespace": "vct-"
},
```
- `vfName` examples:
- My Company Name pattern library
- Visual Framework for My Company Name
- `vfNamespace` prefix:
- Custom patterns will be prefixed by a short abbreviation or phrase. So, your
custom pattern for a countdown timer might be `acme-countdown-timer` or if you're
building for Bob's Pizza, `bp-countdown-timer`. We'd encourage you to make it:
- unique
- no longer than four letters
## 3️⃣ ⌨️ Launch the local pattern library
Enter `gulp dev` and the pattern library will build and open in your browser.
Type `gulp dev` and the pattern library will build and open in your browser.
Be sure to keep an eye on the console for any compile errors or style linting.
## 4️⃣ 🖌 Make and edit patterns
......@@ -139,7 +110,7 @@ To come.
### Keeping you pattern template up to date
The `vf-child-template` follows the [`vf-core` versioning](https://github.com/visual-framework/vf-core#versioning), that means you shouldn't have to update very often; that said:
`vf-embl` follows the [`vf-core` versioning](https://github.com/visual-framework/vf-core#versioning), that means you shouldn't have to update very often; that said:
1. Most improvements will be found by updating VF patterns, to see what updates are available: `npm outdated`
1. Watch for [new releases of `vf-child-template`](https://github.com/visual-framework/vf-child-template/releases). We'll provide guidance on how to update.
......
......@@ -42,7 +42,7 @@ html, button {
@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';
@import 'embl-grid/embl-grid.scss';
/* All Visual Framework Elements */
......@@ -52,14 +52,14 @@ html, button {
// @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 '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';
@import 'embl-conditional-edit/embl-conditional-edit.scss';
/* All Visual Framework Blocks */
......@@ -104,7 +104,7 @@ html, button {
// @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 'embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss';
// @import 'vf-pagination/vf-pagination.scss';
// @import 'vf-pagination/vf-pagination--full.scss';
......@@ -112,7 +112,7 @@ html, button {
// @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 'embl-content-hub-loader/embl-content-hub-loader.scss';
@import 'vf-banner/vf-banner.scss';
@import 'vf-banner/vf-banner--phase.scss';
......
......@@ -16,16 +16,16 @@ 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
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
{
"name": "vf-child-template",
"name": "vf-embl",
"version": "0.0.1",
"lockfileVersion": 1,
"requires": true,
......@@ -1158,6 +1158,89 @@
"@types/unist": "*"
}
},
"@visual-framework/embl-boilerplate-page": {
"version": "0.0.15",
"resolved": "https://registry.npmjs.org/@visual-framework/embl-boilerplate-page/-/embl-boilerplate-page-0.0.15.tgz",
"integrity": "sha512-ocVPo4UGPHzygXJ2PTTjSz/I8fkJ0r2H17sDA3mhfqI2ff+8iVh/9dwe9Cv0dj0mAoxSWO+/2dMFjttrv5MIDA=="
},
"@visual-framework/embl-breadcrumbs-lookup": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@visual-framework/embl-breadcrumbs-lookup/-/embl-breadcrumbs-lookup-0.0.8.tgz",
"integrity": "sha512-Efc8wTI9mXEcJff9tQ8bxBadH+2Z8KNJ51cb4Bnq0o98alIRurSNfIFiiIInzEq3rSB/eoBDUp0a/l6BD6Oknw=="
},
"@visual-framework/embl-conditional-edit": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/@visual-framework/embl-conditional-edit/-/embl-conditional-edit-0.0.10.tgz",
"integrity": "sha512-WxTxuYyDN0u1sQtp+XVpbFhJ1g4BxbDLebGyn0/nmc9PTsrJFZpsUqCnpgo0jN1y0FyU6x5UolM4CMO2K1gScQ==",
"requires": {
"@visual-framework/vf-sass-config": "^0.0.12"
},
"dependencies": {
"@visual-framework/vf-sass-config": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-sass-config/-/vf-sass-config-0.0.12.tgz",
"integrity": "sha512-dwLo5H7gF4jTit03lV9yYzYUV6KlNtAHqoIWX10mUnZzpA2S9TxHg4NZLWhDZ+f/gWbUHNmlrzPS60OBrhtINQ==",
"requires": {
"node-normalize-scss": "^8.0.0"
}
}
}
},
"@visual-framework/embl-content-hub-loader": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/@visual-framework/embl-content-hub-loader/-/embl-content-hub-loader-0.0.10.tgz",
"integrity": "sha512-AGJ+MKJligt+olIv46SukZ1RRSFkXYxb4TaLhx2cn5oSACwFQpGDzQKc0Xq+5RzRfSKv+tsEqo8+SMLMEptTWA==",
"requires": {
"@visual-framework/vf-sass-config": "^0.0.12"
},
"dependencies": {
"@visual-framework/vf-sass-config": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-sass-config/-/vf-sass-config-0.0.12.tgz",
"integrity": "sha512-dwLo5H7gF4jTit03lV9yYzYUV6KlNtAHqoIWX10mUnZzpA2S9TxHg4NZLWhDZ+f/gWbUHNmlrzPS60OBrhtINQ==",
"requires": {
"node-normalize-scss": "^8.0.0"
}
}
}
},
"@visual-framework/embl-content-meta-properties": {
"version": "0.0.15",
"resolved": "https://registry.npmjs.org/@visual-framework/embl-content-meta-properties/-/embl-content-meta-properties-0.0.15.tgz",
"integrity": "sha512-Jh0FEUulJpmKuZ69B2YO8odFk2vHl8u//RS8KxZj9JUpvdMLbC2zEmUqAT608m0B1KE6q0eiEDLtTfj5nkeClg==",
"requires": {
"@visual-framework/vf-sass-config": "^0.0.16",
"node-normalize-scss": "^8.0.0"
},
"dependencies": {
"@visual-framework/vf-sass-config": {
"version": "0.0.16",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-sass-config/-/vf-sass-config-0.0.16.tgz",
"integrity": "sha512-cczOT9oCL6Zex4IWovkfJkVivoQ70VXk/NPbF3EM60w88YbMTjlF7vA8UelDQB5fgu9i1/mzkyan4JbXjbGMog==",
"requires": {
"node-normalize-scss": "^8.0.0"
}
}
}
},
"@visual-framework/embl-grid": {
"version": "0.0.30",
"resolved": "https://registry.npmjs.org/@visual-framework/embl-grid/-/embl-grid-0.0.30.tgz",
"integrity": "sha512-QMOiPpsJGTbUo9OUoRPTE93sPggPZ4lTw+F+lN5KecWLDXbXIAB80AqoygtJotWzHoT3aqTtV4lscD24OuPBYA==",
"requires": {
"@visual-framework/vf-sass-config": "^0.0.26",
"node-normalize-scss": "^8.0.0"
}
},
"@visual-framework/embl-logo": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/@visual-framework/embl-logo/-/embl-logo-0.0.10.tgz",
"integrity": "sha512-H0OPkUKRhIQyrhOiP/5s6aW2Sz05O9BGAS+snw4OB9tQDDRgojPj6GYm9EwbR01xXchanBRdunTqzo8yPnf7sw==",
"requires": {
"@visual-framework/vf-sass-config": "^0.0.26",
"node-normalize-scss": "^8.0.0"
}
},
"@visual-framework/vf-badge": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-badge/-/vf-badge-0.0.29.tgz",
......@@ -1273,7 +1356,8 @@
"@visual-framework/vf-font-plex-sans": {
"version": "0.0.26",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-font-plex-sans/-/vf-font-plex-sans-0.0.26.tgz",
"integrity": "sha512-FVsQqf0Peng2txJJ2/RGyO3sQdNMgNBjb2ZKKiabtz9B3l4CzE82nML6KIYWTuRWvkWFfVKXd0CK8VD2HJ1nIA=="
"integrity": "sha512-FVsQqf0Peng2txJJ2/RGyO3sQdNMgNBjb2ZKKiabtz9B3l4CzE82nML6KIYWTuRWvkWFfVKXd0CK8VD2HJ1nIA==",
"dev": true
},
"@visual-framework/vf-form__core": {
"version": "0.0.30",
......@@ -1436,7 +1520,6 @@
"version": "0.0.26",
"resolved": "https://registry.npmjs.org/@visual-framework/vf-sass-config/-/vf-sass-config-0.0.26.tgz",
"integrity": "sha512-4ddEDlaCBITpN5iOYQBRhYWIR1Hd5uG6v2qiy0nx0lkrrP55tA5PgWKgradVMMEptznDLz/45gawLsVR0BX7MA==",
"dev": true,
"requires": {
"node-normalize-scss": "^8.0.0"
}
......@@ -11757,8 +11840,7 @@
"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==",
"dev": true
"integrity": "sha512-eQMVmvs2Hj33v3m/jstZOBGOr0lO+Rr3tamGdZxBtiUbJ/WXywsLz/LhVQDSugxG4TEnfYyGxdfbRVKNxw+x7g=="
},
"node-notifier": {
"version": "5.3.0",
......
{
"name": "vf-child-template",
"name": "vf-embl",
"version": "0.0.1",
"description": "A child template fore Visual Framework based compontent libraries",
"main": "index.js",
"vfConfig": {
"vfName": "Visual Framework Child Template",
"vfNamespace": "vct-",
"vfHomepage": "https://khawkins98.github.io/vf-child-playground"
"vfName": "Visual Framework for the EMBL Design system",
"vfNamespace": "embl-",
"vfHomepage": "https://github.com/embl-communications/vf-embl"
},
"author": "",
"license": "ISC",
"dependencies": {
"@frctl/fractal": "^1.2.0-beta.2",
"@frctl/nunjucks": "^2.0.0",
"@visual-framework/embl-boilerplate-page": "0.0.15",
"@visual-framework/embl-breadcrumbs-lookup": "0.0.8",
"@visual-framework/embl-conditional-edit": "0.0.10",
"@visual-framework/embl-content-hub-loader": "0.0.10",
"@visual-framework/embl-content-meta-properties": "0.0.15",
"@visual-framework/embl-grid": "0.0.30",
"@visual-framework/embl-logo": "0.0.10",
"chalk": "^2.4.2",
"gulp": "^4.0.0",
"highlight.js": "^9.15.6",
......
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