It’s Alive!: Creating Living Style Guides With Frontify

As designers, we’ve all opened up illustrator, dragged some vectors and made a ‘style guide’ or ‘component library’ that we shared around because it looked pretty. The goal was to create a consistent visual language and experience throughout the application, but did it work?

In my experience, no, it doesn’t work. Maybe you make it as far to change all the current button styles in the application, but then it becomes too tedious to manage the static library and keep up to date as dev work moves forward.

It becomes a chore.

This may be no surprise, but living style guides solve this problem. ‘Living’ means it’s not just a collection of images, but real components that link to production code and is version driven.

What does this achieve?

• Manage components in real time and have changes ripple throughout the codebase.
• Define CSS/Saas/LESS/Stylus best practices
• Have centralized documentation for the front-end dev team (looking for a float-in animation? Go find the selector on the style guide)
• Test components all in one place.
• And so much more…

So how can you quick-start a living style guide? Here’s a quick guide to set one up with Frontify. Why Frontify? I’ve spent a good amount of time looking for a solution to my functional and visual needs and so far, they’ve done it best. If you know of another tool, feel free to place a shameless plug in the comments.

Create your Style Guide.

I’m a sketch fanatic, and I’m quick with it, but choose the tool of your choice. This is purely to crank through some iteration cycles and get your designs right.

Create a new project

Create a new project and start coding component by component. This is as easy as creating a folder (lets name it components). I usually put this folder into my home directory (I’m on a mac). once you’ve created the folder, open it up in the text editor of your choice (I use Sublime) and create and index.hml doc as well as a folder named ‘css’ or ‘styles’. Inside your style folder, create ‘app.css’.

Code it up

If you don’t have a plan on how to manage your style sheets, the just drop everything in app.css and start building your components. Keep your HTML clean and compartmentalized. The groupings you define here will be easily dropped into Frontify if you keep everything visually clean.

As an example, when you’re done, you should open up your index.html in your browser and see something like this:

If that’s what you have, then great! We’re almost done.

Throw it up on Github

If you don’t have a Github account, then go make one. Make a new public repository and follow the instructions for adding a new repository. They look like this:

Make sure you cd into your project file before running these in the terminal

Once that’s all set up and you’ve made your first commit, check Github to make sure all your files are there. Just click on the repository and you should see them listed. Go checkout how git and version control work to continue to make commits to your new repo.

Get Served

As far as I know, Github will not serve any files in your repo, so we’ll use Rawgit to serve up our styles to Frontify. Go to Github and grab every style sheet from your repo (it may be just app.css or more). Copy their link addresses and stash them somewhere. (Word doc, Evernote, whatever…you’ll need them in a bit)

Head over to Rawgit and drop each of those links into the top form field.

This will generate a link that points to your style sheet. Though the link on the left works, go ahead and copy the production link on the right. Stash these away as well. You’ll need them when we get to Frontify.

Get Set up on Frontify

Head over to Frontify and create a free acount. Create a new Style Guide (I started with a template) At the top, you can switch over to ‘UI Library’ — this is where we’ll drop our components. Set up titles and sections however you want and add a UI pattern.

Hopefully you kept your HTML clean. Go grab the first components from your index.html and drop in the HTML tab. We won’t put anything in the CSS or JS tabs. Above that, you’ll link to your style sheets with the links from Rawgit.

<link rel=”stylesheet” type=”text/css” href=”https://cdn.rawgit.com/byrdkw/yourRepo/master/someFile/css/app.css"/>

It should looks something like this:

I’m linking to a ton of stylesheets because I’m using a custom icon font, but I’ll eventually consolidate them.

So What’s So Great About This?

I’m glad you asked! Still have your project open in Sublime? (or whatever text editor you’re using). Go ahead and make some changes. Change some colors, some padding, some margins. Go back to your terminal and make sure you’re in the right folder (cd components).

• git add . (if you’ve added in files)
• git commit -am “put your commit message here”
• git push

Now go refresh Frontify. You’re styles have changed. Any changes to your ‘production’ CSS will reflect on the Style Guide.

MIND BLOWN. I know.

Is it a permanent solution? Maybe? Maybe not? But it’s a great start!

If you have any questions and things aren’t clear, let me know!