Style Guides
Why You Want Them and How To Use Them
(I really should come up with better names for this stuff)
Created by Sarah Frisk / @sarahfrisk
Who am I?
Sarah Frisk
(hair is now a different color)
I also make a comic
(shameless self promotion)
So what are Style Guides?
(Besides that way we had to cite sources in papers back in school)
According to Wikipedia
“A style guide or style manual is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization or field. ”
In web design/development, there are typically 3 different types of style guides
- Design Style Guides
- Code Style Guides
- Front End Developer's Style Guides
Design Style Guides
What's in the Design Style Guide?
- Logos (correct/incorrect usages)
- Colors
- Fonts
- Spacing
- Imagry
- Layouts
Examples
Logos
Colors
Colors
Did I mention I like comics?
Fonts
Spacing
Imagery
Layouts
Code Style Guides
(CSS and HTML)
What's in the Code Style Guide?
- Syntax
- Declaration Order
- Comment guidelines
- Naming classes
- Spaces
- Organization
But Sarah, why is this important?
Coding Style Guides help with the scalability and maintainability of a codebase, especially as you start to add additional developers
Examples
Front End Developer's Style Guides
An interactive guideline of the site's web design standards
- Typography
- Headers (h1, h2, h3 . . .)
- Paragraphs
- Fonts
- Buttons
- Form Elements
- Icons
- Grid System
- Navigational Elements
- Hover States
- Colors
- Code samples of the above?