20130909_GODEL Style Guide Guide

Style Guide... Guide
How to create a style guide for use by
web developers.
22nd May 2013

Godel | ABN: 58 147 061 121 | info@godel.com.au 2
1. Colours
Web developers require colours to be provided in hex format for use in CSS stylesheets.
Any opacity changes and gradients must also be specified.
You can give your colours names and reference them throughout your site design with annotations on
typography, block elements, etc.
1
#2eb0a9
2
#f0c7cc
Gradient details:
angle: -90
0%: #ffffff
100%: #000000
change point: 50%
Gradient details:
angle: -90
0%: #cf2630
100%: #000000
change point: 70%
Examples

Border: 1px solid black
Drop shadow angle: 135°
Drop shadow colour: #000000
Drop shadow opacity: 30%
Border: 4px solid #000000
Inset spacing: 5px
Border radius: 4px
2. Block level elements and the box model
Block level elements are essnetially anything other than text which is referred to as an ‘inline’ element. Text
doesn’t have margins or padding unless it’s specified as inline-block which lets inline elements have margin
and padding. This is often seen with headings and paragraphs.
Block level elements sometimes require borders, padding, corner styles, drop shadows etc. If the element has
a background colour or image, that goes all the way to the border and includes the padding. The margin is
invisible ‘negative space’. Depending on how the background is configured, the padding can be invisible or
visible, but the margin is always invisible.
When we talk about margins and padding, we are referring to the standard ‘box model’ which is outlined
below:
Examples
Text inside this box
Text inside this box.

3. Typography and fonts
When you are creating a design on a desktop computer you usually use a desktop version of a font. It is loaded
on to your hard drive and may not be on other people’s hard drives if they haven’t downloaded it.
Websites use webfonts which are the same fonts as desktop fonts but optimised to display the font across any
browser and without the desktop font installed. Webfonts are usually packaged in ‘kits’ with a CSS file that
pulls in different font formats such as .woff, .svg, etc. These formats are needed to make sure that your font
displays on all devices and in all browsers.
Webfont sites like myfonts.com often will allow you to demo your font as it renders in different situations and
at different sizes and weights.
Google Web Fonts is a fantastic repository of free webfonts which can be easily included in your website.
Webfonts are also packaged with licenses and each webfont may have limitations on commercial use and
pageviews.
Adobe’s Typekit service https://typekit.com/ allows you to preview how your webfont renders across different
browsers.

Choosing font kits
Your typography may not need a whole family of fonts. Choose which weights and styles you need.
Font kits that include bold and italic style fonts return a much more favourable result when rendered in
browsers. If text is styled as bold or italic and the typeface family does not include a bold or italic font,
browsers will compensate by trying to create bold and italic styles themselves.
This can cause problems in some browsers and your font may not display as you thought it would!
In general, specify which webfonts at which weights and your site will need, and make it clear where you
expect each of them to be used by specifying in particular elements (like p, h1, h4, etc).
The below font has ‘fake’ bold rendered by Firefox:
The danger of including too many fonts is an increased page load time. Google Webfonts lets you know if you
are including too many fonts in your font-kit with this handy page-loader gauge.
Here’s the actual bold font!

4. HTML elements
Examples
• body
Body text is your default body font setting.
• blockquote
Blockquotes are for editorial-style large quotations and should use a contrasting font and slightly larger
style.
• h1
The highest level of headings used on your site.
• h2
Second level headings
• h3, h4, h5, h6
• p a:link, p a
Denotes links within paragraphs.
• p a:hover
Denotes hover states for links within paragraphs.
• p
Paragraph styles. This includes justification, line-height, width, etc.
• ul, ol
Unordered list and ordered list. Choose if you want your lists indented, with bullet points, etc.
• li
Line item for lists. Choose how your list items are spaced.
• Any other specific styles that your site needs eg. ‘subheadings’
We have included examples of styled and unstyled typographical elements over the next few pages.
Within an InDesign document you can use these styles as paragraph styles which correspond to intended
HTML elements.
The following examples are taken from the Drupal Styleguide and Design modules, which print out each HTML
element to alow web designers to assess their CSS consistency across all elements in one place.
After you’ve chosen the right fonts you’ll need to decide how they are used across the HTML elements in your
site and make this clear through your style guide.
We’ve included the most essential elements but depending on your site you may have more custom elements
that need specifications.

Headings: styled
Headings
Headings: unstyled
This an example set of headers taken from the Drupal Bartik theme.
HTML headings range from h1 to h6, from the largest to smallest (usually) and also from the most important to
the least important.
Following recommended Heading methods is not only useful for aesthetic reasons but aids your site’s SEO
performance.
Your heading structure also creates Document Outlines for screen readers.
This is an example of the same HTML elements with no CSS classes.

Headings with body text
Your style guide should include headings with body text especially if you are using a different font for headings
and for body text. You will be able to see whether padding needs to be specified between headings and
paragraphs.

Lists
Even though you may not think you need lists, at some point someone will want to enter a list in a WYSIWYG
editor and if there are no styles for list then it will return normal body text.
Unordered lists usually have dot point markers which can use either default markers or a specific marker.
Ordered lists can use any of these numbering styles. http://www.w3schools.com/cssref/pr_list-style-type.asp
If your list appears as below (ie. a floated, unordered list, usually of links) pay special attention to it in your
style guide.
Due to responsive design limitations, you will have to choose how your menu reacts when the wrapper around
it is resized, and how it is affected by font rendering differences.
If you need your first and last items to be flush with the edges of the wrapper element, specify so, but be
aware that the exact measurements between the items will be calculated by a table element and may not
match up with font rendering differences cross-browser.
Alternatively, for a left-aligned list like this one, specify padding between items.
Floated lists

Basic text elements
Links
Be aware that link styles include:
• basic link
• visited link
• active link
• hover link
• visited link (optional)

5. Tables
Tables are made up of the following HTML elements:
• table: the wrapper
• tr: the table row
• td: the single table cell
• th: the table header
As such, table items can have even/odd striping, header styles, background colours, borders, etc. Take care
to specify how your table reacts to dynamic wrapper elements and consider links within tables, images wihin
tables and padding within TR elements.
Tables: styled example
Tables: unstyled example

6. Forms
For e-commerce sites especially, forms make up a large part of the user experience. They help users access
the information they need and provide you with their information when you need it.
Make sure to consider what disabled form elements look like.
Libraries like the Twitter Bootstrap library http://bootsnipp.com/forms and Chosen http://harvesthq.github.io/
chosen/ offer some powerful tools and nice defaults for form theming.
< Chosen
Bootstrap >

Formalize
Placeholders and errors
Consider how you style your placeholder text on form elements. This usually comes up with newsletter sign up
forms. Placeholders can eliminate the need for labels in some situations.
You can style placeholder text like other text, but be aware that the placeholder text is all one element and you
won’t be able to mix and match different styles.
Form elements are a common source of inconsistency between browser rendering so it’s often better to give
your form elements a bit of padding so it’s less obvious when they’re not pixel-perfect aligned.
If you’re using autocomplete fields at all throughout your site you should specify placeholder text.
Take care to specify error messaging and required field indications on forms.

Checkboxes, Radios and Uploads
Changing the look of the non-textual components of checkboxes, radios and uploads can be very expensive.
If you are considering customising forms to this extent, discuss with your developer before you begin your
style guide or design.
AJAX forms and confirmation pages
Confirmation pages are a result of a form that refreshes the page on refresh, while an AJAX form submits
without refreshing the page. Your style guide should indicate which you are expecting.
AJAX forms are great but sometimes difficult to implement so please check with your developer.

7. Miscellaneous UI Elements
Not all of these elements will be relevant to your site. Carefully consider which of these may appear in your
site. By alerting your developer to any style changes you with to make on these elements, you can make sure
your theme is thoroughly applied.
Date/time formatting
Consider how dates and times are displayed on your site, especially if it’s a blog! You may need to specify
how you want dates to appear in short, medium and long formats. Here is the documentation of all of the
components you can use: http://php.net/manual/en/function.date.php
eg. Thursday May 2nd vs Thu May 2, 2/5/13, etc.

Lightboxes

Slideshows and navigation
Small images that change on hover like slideshow pagination
(above) should be provided as sprites.
Sprites are usually created in Adobe Illustrator or Photoshop
on a grid template. This is done so that the sprite can be
set as a background-image on a wrapper element and the
animation is created by changing the background image’s
positioning.
Full instructions here:
http://www.thebrightlines.com/2009/11/05/3-tips-for-
making-css-sprites-in-photoshop/

8. Images
Choose a set of image sizes to reuse throughout your website. Provide specific dimensions to developers
including any images that change on responsive layouts.
Specify any borders, padding or hover effects on images. Be aware that all elements need padding specified
if your style guide is the main reference for extrapolating the design; otherwise, images and elements will
appear cramped together.
Keep in mind that rectangles will necessarily crop your images to fit them in the right dimensions. Image
cropping works like this: you choose which side is locked and which is cropping. For example, if you lock the Y
axis, the image is first resized vertically and then the X axis is cropped. This means that unless your images are
prepared with the right aspect ratio, the images will automatically have to be cropped, regardless of how we
set up the cropping algorithm.

9. Dynamic elements and animation
Where possible, specify any animations or dynamic behaviour that you are expecting on your site.
You can find examples of Javascript-based animations here http://jqueryui.com/demos/
and CSS-3 animations here http://daneden.me/animate/
If you expect your menu system to work with the help of some animations, you’ll need to show how the
menu looks at each stage and if possible describe the animation you are expecting to see. Better still, give an
example of a site that is using a menu system that you want to emulate.
Loading sprites
Dropdowns and menus
Dropdown select boxes and elements may also require animation notes.

Hover states & transitions
Hover states increase usability across your site by highlighting to users if elements are hyperlinked, or by
otherwise adding an element of dynamic movement to the site.
With CSS3 hover states can now have transition effects. You can specify the style attribute and a time and
CSS3 will animate your effect gradually. This is useful for fades, movement and even creating 3D objects.
See here for more info: http://docs.webplatform.org/wiki/tutorials/css_transitions
Linear is the default easing option but many others are available.

10. Working with the grid
Working with grids can make your responsive site a lot easier to create. Here’s a basic primer if you’re not
familiar with designing for a grid system.
The most fundamental part of the grid system is the columns. Choose your number of columns and that
number does not change across wide or narrow screens. Instead, the width of the columns change, with the
gutter width remaining the same.
It’s up to you which you choose, and it depends on how you want your elements to float next to each other
(note that “floating” means elements that flow rather than taking up a new line per element).
Developers use these columns (in black on the diagrams above) by naming them according to their column
width ie. grid-5, grid-6,etc. One line is filled when the corresponding column total is reached ie. in a 12-col
grid, grid-7 and grid-5 will fill up a line. Grid blocks always start on the left hand side of a column and end on
the right hand side of a column; ie. they do not use margins on the outside as part of their width.
What this means for your designs, wireframes and style guides is that you can specify widths for elements,
images, foms, headings etc with column width.
Check out this article for a more comprehensive perspective on grids: http://sixrevisions.com/web_design/the-
960-grid-system-made-easy/
Drupal’s Omega theme system is already fully integrated with the grid system and you can download PSDs
explaining how the grids work across the responsive layouts here: http://www.covenantdesign.com/blog/
drupal-omega-grid-size-reference-psds
Margins/Gutters
A note on gutters: elements need to be evenly spaced, so remember this when you are specifying padding/
margins around your elements or making calculations based on grid-sizes and page-widths.

11. Emails
Theming emails is a tricky task, which is why templating services like Mailchimp exist. HTML emails are like
websites, but because they display in email clients rather than in browsers, they behave slightly - sometimes
drastically - differently. Emails aren’t hosted on your server, they don’t use databases to generate content and
they require compulsorary mobile design considerations.
Here’s an example of a default email sent from Drupal:
And that’s what your emails will look like (minus blackout squares) without style guides or templates.
Some tips for emails:
• Emails love tables. Email clients have very bad support for ‘float’ and as a result it’s hard to get elements to
sit nicely next to each other. When you design your email templates, think about designing them in a table
format.
• Table nesting is far more reliable than right or left margins or padding on table cells.
• Emails may not look the same for everyone, especially in old versions of buggy email clients. Be prepared
and as much as possible, design your emails to be minimalist and uncomplicated.
• Images are fine in emails but make sure they look good on all screen sizes. They are blocked by many email
clients and spam filters though, so make sure the important information is still presenting in text form.
• You’ll still need to provide link styles, paragraph styles, heading styles etc for emails.
• Fonts are much more difficult in emails due to email clients not working like browsers in regard to
webfonts. There’s currently not really a good way of getting @font-face font kits in to a lot of popular email
clients. Apple mail and iPhone are the only two email clients that can currently handle webfonts. Annoying!
Keep this in mind and choose some appropriate fallback fonts. http://www.campaignmonitor.com/blog/
post/3044/does-font-face-work-in-email/
• Even if you put your email layout in a table Outlook 2007 will force line breaks in the layout when the email
is more than A4 paper size in length. The only way to be 100% protected against this is to keep your email
layout single column or reasonably short.
Check out Mailchimp, they do a lot of the heavy lifting for you! http://mailchimp.com/resources/html-email-
templates/
If you’re going to do it yourself, check out Campaign Monitor’s Ultimate Guide to CSS support, it’s amazing:
http://www.campaignmonitor.com/css/

Conclusions
Creating a style guide allows you to control how elements appear in any instance across your entire site. It will
also increase your understanding of HTML, CSS and Javascript and what’s ‘possible’ on the web.
Some of the biggest sources of miscommunication between designers and developers are from designs
that are ‘impossible’ to build, or when developers find that they are missing designs for specific pages or
components of pages while building a site. A style guide circumvents this issue by allowing you to essentially
build a theme from the ground up, without having to even crack open an InDesign master page.
But feel free to do that as well! Many good designs are built from style guides and by using InDesign’s master
page and paragraph, character and object style system, you can create your designs through presets from
your style guide that you apply to elements as you mock them up on the page. By using these styles in your
design, you more closely mirror the process a developer goes through to theme a website. If you’re providing
designs and a style guide, think of your style guide as your branding and your designs as the application of the
style guide to a functional brief.
Developers use style guides to build CSS styles that are applied to multiple (recurring) elements within a
website. For example, when you specify your H1 style’s font height, colour and weight, line-height, padding
and letter-spacing, all of these styles are mapped to all H1 elements across your entire site - which means that
instead of theming 20 elements individually, it’s all done in one go. A website can come to life much quicker
with the aid of a clear style guide.
Thank you for taking the time to read this document and good luck with all your design endeavours!

20130909_GODEL Style Guide Guide

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to 20130909_GODEL Style Guide Guide (20)

20130909_GODEL Style Guide Guide