VueConf US 2018


1. State of Vue

Evan You

2. How We Do Vue At GitLab

Jacob Schatz

3. Vue in Motion

Rachel Nabors

4. Testing Vue apps

Edd Yerburgh

5. Serverless Functions and Vue.js

Sarah Drasner

6. vue-rx

John Lindquist

7. Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

8. 7 secret patterns Vue consultants don't want you to know

Chris Fritz

9. Agile Design Systems in Vue

Miriam Suzanne

10. Vue & TypeScript: Up and Running

Daniel Rosenwasser

11. A React Point of Vue

Divya Sasidharan

12. Vue & SSR: The best practices

Sebastien Chopin

13. A Short Synopsis of Vue Storybook

Peter Finn

14. Prototyping with Vue Single File Component

Pine Wu

15. 5 Libraries You Should Know About

Adam Jahr

16. Update an Existing Application to Vue

Michael Bennett

17. Vue and Vuex for Complex Application State

Patrick Seda

18. Top 5 Must-Have UI Animation Patterns

Rachel Nabors

19. The Dream: A Full Rewrite

Seth White

20. Start Your Own Vue.js Meetup

Ben Hong

21. Reusability - Is It Worth It?

Shelton Clinard

22. Reactivity - Learning by Accident

Jeff Schenck

23. Quick Publishing of Redistributable SFC on NPM

Mike Dodge

24. OverVue of Vuetify.js


25. Ionic and Vue

Mike Hartington

26. Dynamic Store Modules with Vuex

Adam Bradford

27. Build a MiniFlix Clone with Vue Contest

Dan Zeitman

28. Beyond HTML with Vue

Eduardo San Martin Morote

29. Vue with AWS Lambda

Matt Biilmann

30. 40 Hour Plan For UX Proficiency

Jacob Covey

31. Code Splitting Patterns with Vue

Sean Thomas Larkin
Notify me when new talks are available.

Agile Design Systems in Vue

Agile Design Systems in Vue

Miriam Suzanne

In her talk, Miriam gives the why, what, and how of using design systems inside your applications. She also introduces Herman, an automated design system generator she helped build.

Why Design Systems

You might have heard of the Lightning Design System by Salesforce or Vuetify. These are examples of design systems and her talk is about building your own. Design systems can include color pallets, grid systems, toolkits, pattern libraries, spacing, sizes, or even the letter M.

A design system is the integration of design and code. Both are important parts. It can be hard to create design systems with small teams but not impossible. Every client needs it’s own customized design system.

Pattern Audit

You can start with what you have, by going through apps and start taking screenshots which get organized into groups. will show you all sorts of information about your CSS.

Once you know what exists, you can start to build a design system.

Start with Design Tokens

To start a Design System for a project Miriam gives her clients just colors to look at as a way to start, and she follows this pattern for implementation.

The first two layers in SASS would be just variables, mixins, and functions, which have no output. Scoped Styles in Vue belong at the very bottom, to target things explicitly, which should be the minority of the system.

From the SalesForce design system, you can see how classes can be applied:

Design Tokens (colors) One way we can represent colors is SCSS variables.

However, these are not meaningfully organized, encourage one-offs, and are difficult to automate. Miriam tried using SCSS maps, but they don’t allow references within the map. So she helped come up with a new syntax:

This then makes it easy to have to have multi-level design elements

Another approach to group colors is Yaml Theo, but there are tradeoffs.

Baked-In Tools

Miriam uses Herman to create automated style guides.

It has a whole set of style components to display.

Define the API

Miriam uses data attributes to create namespaces:

Template logic can be used as well:

Presentational components can also define meaning.

Lastly, she mentions VueDS, an open source tool for building design systems.

Automation is Essential

Keeping a design system up to date is more important than having it. Start small, make it easy, and expand. Use inline documentation so the developers don’t have to go elsewhere. Automate as much of it as possible.