A presentation at EBI-EMBL Dev Day 2019 in in Hinxton, Saffron Walden CB10 1RQ, UK by Stuart Robson
Let’s take a look at vf-core Let’s take a look at vf-core - @sturobson - DEV(day)2019;
What is vf-core — A component library and set of tools. — Built on a blank canvas, from the ground up — Created to work on its own for new projects — Able to work as part of existing sites. — Can work alongside existing frameworks and libraries. — Has accessibility baked–in from the start. Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Why not use Bootstrap or Foundation or Material? — Off the shelf component libraries come with their own baggage. — Designed by committee. — Can be easily out grown. — Are just not that malleable. Let’s take a look at vf-core - @sturobson - DEV(day)2019;
What is vf-core — Developer Guidelines. — Design Tokens — CSS Architecture. — Components. — Utility Classes. — A Monorepo. Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Developer Guidelines — Governance Guidelines — Naming Things — Creating Components — Deprecating Components — Updating Components — Versioning Components — CSS Authoring Guidelines — JavaScript Conventions Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Design Tokens — An abstraction. — Named entities that store visual design attributes (@jina) — Colour, Typography, Spacing, Shadows, Animations, Breakpoints — Can create Sass, LESS, CSS Custom Properties, JavaScript, iOS and Android — A ‘single source of truth’ for design decisions. — Can be overridden, customised, or you can bring your own. Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
CSS Architecture — Written in Sass — Uses BEM naming convention — Is name–spaced with “vf-” — Uses StyleLint Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Sass — Variables — Maps — Mixins — Partials Let’s take a look at vf-core - @sturobson - DEV(day)2019;
BEM — A consistent naming convention — Block — Block__Element — Block__Element—Modifier / Block—Modifier Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Name-spaced — Prefixed classes to avoid any potential conflict. — .vf-component and .component want interfere with each other. — Every element in a component has a class. — Longform content has a wrapper class of .vf-content. Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Linted — Helps enforce defined coding conventions and avoid error — Makes us use Sass variables or maps when appropriate — Makes us author CSS in a consistent way — Is a ‘pre-push’ before it gets to a PR Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Components — Elements — Block — Containers — Layouts — Component Generator Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Utility Classes — Generated from the Design Tokens. — Colour, Spacing, Borders, Typography. — Helpers – Layout, Accessibility (#a11y). — Easy to quickly prototype design patterns. — Great to create exceptions. — Can be used to override component CSS. Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
A Monorepo — All components and associated tools are in one repository. — Allows for each component is an npm install away. — Versioned, so you upgrade certain components or all. — Allows for modular changes rather than all-in-one — Can easily incorporate a new component into v1.x or other component libraries Let’s take a look at vf-core - @sturobson - DEV(day)2019;
I only need the new GDPR banner npm install @visual-framework/vf-banner Let’s take a look at vf-core - @sturobson - DEV(day)2019;
I only need the components for the group pages (soon) npm install @visual-framework/vf-group-pages Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Give me everything npm install @visual-framework/vf-core Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Let’s take a look at vf-core - @sturobson - DEV(day)2019;
I need the version where the divider had more padding npm install @visual-framework/vf-divider@0.0.28 Let’s take a look at vf-core - @sturobson - DEV(day)2019;
— Developer Guidelines — Guidelines for creating, maintaining, deprecating, and versioning components. — Conventions for naming things, writing CSS, and authoring JavaScript. — Design Tokens — Named entities that store visual design attributes. — Tokens for Sass Variables, Sass Maps, and CSS Custom Properties. — CSS Architecture — Written in Sass, using BEM. — Components — Elements that create Blocks that create Containers. — Utility Classes — Classes created from Design Tokens for Colours, Typography, Spacing and more. — A Monorepo — An easy way to install just what you need, when you need it. Let’s take a look at vf-core - @sturobson - DEV(day)2019;
Myself and colleagues ( Mark Boulton and Ken Hawkins ) gave a 45 minutes talk on the Design System for EMBL for the EBI-EMBL Dev Day 2019. This was my 15 minutes. All about the component library we have been building and the decisions and options available with it it.
Here’s what was said about this presentation on social media.
