Welcome to @sum.cumo/nuxt-styleguide

Can't wait? Here's how to get started!

What? abstractions, user interface, decisions?! Could you please elaborate!?

#   A brief introduction on why we think a styleguide is an important tool

Building software products is a complex task. It's so complex that we need teams or even whole companies to do it.

And in these teams we have multiple specialists that care for very specific aspects of the product.

For example a designer is concerned with the looks of the product:

Are the contrasts just right? Does everything fit with the corporate identity?

A UX person cares for the behavior of the product:

Is a flow understandable? Do we use learned patterns or reinvent the wheel?

And a developer will most likely focus on the implementation of the product:

Does it work on all platforms? Is the code I write maintainable?

…plus much more.

#   It's Complex

Unwanted complexity is not only created by our teammates, but also by past versions of ourselves – most of the time one individual can not keep everything in mind.

#   Good News is: Complexity can be contained in abstractions

We use abstractions every day. Vue.js is an abstraction around all the complex implementation details of view handling, state management and application architecure. Nuxt even goes one step further and creates an abstraction around the build tools for our product.

Only a minority of the people using vue and nuxt actually know the source code of these products. Thats the benefit of an abstraction!

Sketch would be another example. As a user of Sketch I do not need to know about the details that make a correct vector or image file. I also do not need to paint each shape by putting in coordinates and vectors. The user interface abstracts these away.

#   A good abstraction

Once we have a good abstraction, an individual does not need to care about the internal complexity. Which is a huge timesaver and quality-booster.

This person can now care for other stuff. Or that person might want to improve the abstraction, in which case one needs to dive into the underlying complexity. But that's a explicit decision and therefore totally fine.

#   How to capture the complexity of product development?

You might have guessed by now, our answer is nuxt-styleguide.

There are tons of other solutions with different category names (like: pattern library, component library, design system, UX documentation, …). They might focus on different aspects, but in general they all try to solve the same problem.

So while creating your product, lots of difficult questions will arise. The answers will require even more difficult decisions to be made which create complexity. nuxt-styleguide is meant to help you capture these decisions in a living system and will hopefully enable you to create abstractions across them so that future versions of yourself and other team members can be efficient in creating high quality products.