Stylesheet guides help everyone on the team. At Revelry, we implement all of the styles and set up the stylesheets for the styleguide.This way, the design and development teams can collaborate faster and more efficiently. In Design and Development Collaboration: Best Practices, Tools, and Guides we lay out a full best practices guide, but we’ve added punchlist assets here for you to make your own projects easier.

Example Stylesheet Guide

This example stylesheet guide helps project development move faster, because it gives the developer a visual representation of style elements.

example style guide

Styleguide Punchlist

And how do you know where to start in creating your stylesheets? Why, utilize this handy punchlist! Here’s an image for a pretty reminder, but below the image we’ve also laid it out in markdown format for you to copy and paste right into GitHub Issues or any other spot where you manage your projects and task lists.

styleguide punchlist

And, in markdown format:

 

# STYLEGUIDE PUNCHLIST
## Colors
– [ ] Primary, Secondary, Tertiary
– [ ] Alert, Warning, Success
– [ ] other color denotions (ex: • jewelry)

## Button styles
– [ ] Primary Button (for actions, continue, submit)
– [ ] Secondary Button (for cancel, go back, etc)
– [ ] Tertiary Button (if needed)
– [ ] Icon Links (ex: Add Image or Edit Content (with icon))

## Headers
– [ ] h1 – [ ] h6
– [ ] Denote which headers should be used where. (Ex. h1 = page header)

## Forms
– [ ] Input
– [ ] Label
– [ ] Select
– [ ] TextArea
– [ ] Checkboxes
– [ ] Help Text
– [ ] Error Text

## TopBar
– [ ] Title
– [ ] Hamburger Menu
– [ ] Nav Links
– [ ] Active State for Nav Links

## BottomNav
– [ ] Icons
– [ ] Active State

## Other Components
– [ ] Cards
– [ ] Lists
– [ ] Add all images and logo versions
– [ ] Add all favicons and app icons
– [ ] Activity Feed
– [ ] Empty States