Let’s take a look at vf-core

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;