Initial setup of embl stuff

README.md

-## 🚨 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.

components/vf-componenet-rollup/index.scss

@@ -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';

components/vf-componenet-rollup/scripts.js

@@ -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

npm-shrinkwrap.json

 {
-  "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",

package.json

 {
-  "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",