Category: style guide

Vue Design System

We talk a lot about Vue around here, including some practical applications of it, but haven’t gotten deep into designing for it. In this post, Viljami Salminen describes his Vue design process and the thinking that led him to build the Vue Design System:: A design system can help establish a common vocabulary bet...

React Code Style Guide

I’ve been having the time of my life with React lately. But on my journey, I’ve had a hard time finding good code style guidelines to keep the mix of JSX and JS clean and readable. I’ve been coming up with my own style guides that I’d love to share. Maybe these will be useful to you and, of course, ...

Build a Style Guide Straight from Sass

Last fall, our dev team wanted to get started with style guides. We had added a new member to the team, and as he was getting up to speed, we realized how lacking our project documentation was. If you’ve ever been a new developer on a team with weak documentation, you know how confusing it can be to try to famili...

Style Guide Driven Development with Atomic Docs

The following is a guest post by Nick Berens, a senior front-end developer at wisnet.com. Nick and his team have been building websites through custom style guides for years. Over those years, Nick has been building and evolving a tool to help with this process. I’ll let Nick explain both the philosophy and the t...

Buttons in Design Systems

I really like this post by Nathan Curtis where he discusses how buttons can be applied to a design system: I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life. That’s why Buttons are arguably a design system’s most important ...

Stylelint

The following is a guest post by David Clark. David is the creator of a thing called Stylelint, a tool for keeping your CSS in shape. He does a great intro as to why you might need it himself, so take it away David… You write CSS. Probably a lot of CSS. And you make mistakes. Probably a lot of mistakes. Somebody...