Style Guide

This is the style guide for your site. It contains information on commonly used elements and useful tips and tricks. Please feel free to customize this for your staff and anyone who's going to use the site. You can also add company rules for blog posts, things that need to be included in each article, things like that. This shouldn't be available to the public and should only be viewable internally.

Structure

This area contains classes for creating blocks or areas on the site.

Grid

The actual grid is not called until we hit a device larger than 1030px (basically larger than an iPad). Be aware that if you add one of the grid classes to an element, it won't display with the styles on a device with a smaller viewport than 1030px.

Slider

If you plan on using a content slider, you can add the basics here. (Links to Support Docs, Example of how to add another, ect.)

Typography

Headlines

The headlines on the site use Sans-Serif and the body copy is Serif.

This is an H1 Headline

This is an H2 Headline

This is an H3 Headline

This is an H4 Headline

This is an H5 Headline

You can also change the look of a headline by adding a class. If you'd like an H3 to look like an H1, simply add the class .h1 to it. Here's an example.

This is a Regular H1

This is actually an H3 with a class of H1

<h3 class="h1">This is actually an H3 with a class of H1</h3>

This is a good way to maintain SEO integrity while being able to make titles look different. Use it.

An example Paragraph

This is a paragraph so you can see it in action. It's going to be a pretty good length and will display the versatility of a paragraph. That didn't even make sense, but really who cares. This is just dummy content that you shouldn't even be reading. Still reading? Seriously? Well kudos on getting this far, you may even win a prize if you get all the way to the end of this useless placeholder content. What kind of prize? Well, that would ruin the surprise wouldn't it. I'm going to include a link here what a link in a paragraph looks like. Whoa, that was intense. I think I need a nap. Well, congrats. You made it to the end of this placeholder paragraph. It served no purpose and you are now dumber for having read it. Oh, and that prize I mentioned. It was a ruse. You just got served pal. Hope it was good for you, because it was great for me.

Lists

• Unordered List Item 1
• Unordered List Item 2
• Unordered List Item 3
• Unordered List Item 4

1. Ordered List Item 1
2. Ordered List Item 2
3. Ordered List Item 3
4. Ordered List Item 4

There are also a few pre-defined list styles you can use by adding classes. Here they are with examples.

<ul class="list-checks">

• Ordered List Item 1
• Ordered List Item 2
• Ordered List Item 3
• Ordered List Item 4

Datalist

This is a Datalist Title

This is the description for the datalist. It's where the data goes.

This is a Datalist Title

This is the description for the datalist. It's where the data goes.

Mixins

Rounded Corners

To use rounded corners on an element, we can use the power of mixins inside Sass. This looks and sounds more complex than it really is. In the css, this is how you would add a border-radius of 4px:

.sg-box {
						background: #fae389;
						border: 1px solid #d9ad24;
						@include borderRadius(4px);
					}

As you can see we just used @include borderRadius(4px); and that automatically added all the border-radius markup we estamblished in our mixins.scss file. If you wanted to change the radius to, let's say 24px, all you would do is change that number:

.sg-box {
						background: #fae389;
						border: 1px solid #d9ad24;
						@include borderRadius(24px);
					}

All the markup is changed without having to re-type every single line. Here are all the various Border Radius mixins. Remember, you can declare the number in the include and all the versions will be displayed.

• @include .borderRadius(4px); - Rounded on all corners
• @include .borderTopRadius(4px); - Rounded on the top corners only
• @include .borderBottomRadius(4px); - Rounded on the bottom corners only
• @include .borderLeftRadius(4px); - Rounded on left side only
• @include .borderRightRadius(4px); - Rounded on right side only

CSS3 Gradients

Again, we're going to use mixins to display gradients instead of using images. The gradient markup is very complex and down right confusing. We simplify that the same way we do with the border radius example above.

.gradient-box {
						border: 1px solid #d9ad24;
						@include css-gradient(#fae389,#fad648);
					}

The first number is what color the gradient starts with while the second number is where the gradient ends with. For now, the only mixin on the site is top to bottom gradients. There are others, and you can add those if you feel adventurous. Gradients are mostly used on the buttons, and it should probably remain that way for now. Using a ton of gradients can affect performance a bit. Just a heads up.

Transitions

Transitions are used to ease things like buttons and link color. It adds subtle animations to changes in state. You can use the animation syntax like so. As an example, we are going to use a transition on this box below. Since there's really no change on hover, we'll say to transition all, make it last 2 seconds, and use the transition ease.

.transition-box {
						border: 1px solid #d9ad24;
						background: #fae389;
						@include css-transition(all, 2s, ease);
					}
					
					.transition-box:hover {
						background: #7dcce3;
						border-color: #1e68b5;
					}

You can specify what to to transition, how long the transition should last, and what kind of transition it should be within the parenthesis. You can also leave the parenthesis empty and it will use the defaults. Again, this is something to be used sparingly as it too, can affect performance.

Forms

Buttons

To make a button, it's as easy as adding a class to an <a> link. You'll need to add the class .button to give it the standard button shape. After that, you can add other classes to make it different colors.

<a class="button" href="#">Standard Button</a>

Standard Button

<a class="button orange-button" href="#">Orange Button</a>

Orange Button

You can create more button styles if you like.

Icons

If you're using icon fonts, you'll want to use to explain which version you are using as well as explain how they work.

How To Use

You can explain a bit how to use them, whether you are using a class or pseudo elements.

Adding Icons to elements

Adding icons is as simple as adding a class to an element on the page. You'll see an example from the chart below on your right. The numbers on top are the Unicode values for each character. You can use this number in the CSS if you want to add it that way. The word below is the class you can add to an element and it will automatically add the icon before it.

A Quick Example

Showing an example here will help make things easier.

The Icon Chart

This is a full chart of all the icons available. You can customize it so it displays the correct icons / character map.

You can display a reminder here.
\0021 location	\0025 half-star	\0026 calendar	\0028 trophy	\0029 cart	\002b wifi	\002d podcast
\0030 speakers	\0031 speakers-off	\0032 thumbtack	\0033 star	\0034 star-empty	\0035 heart	\0036 heart-empty
\0037 checked-box	\0038 unchecked-box	\0039 filled-box	\003b arrow-up	\003c arrow-left	\003d arrow-down	\003e arrow-right
\003f grid	\0041 home	\0042 people	\0043 briefcase	\0044 documents	\0045 mail	\0046 info
\0047 question	\0048 person	\0049 loading	\004a conversation	\004b comment	\004c list	\004d download
\004e camera	\004f video	\0050 link	\0051 support	\0052 phone	\0053 zoom-out	\0054 zoom-in
\0055 clipboard	\0056 company	\0057 tick-down	\0058 tick-up	\0059 plus	\005a minus	\0061 close
\0062 check	\0063 magnify	\0064 tag	\0065 reload	\0066 print	\0067 quote	\006c settings
\0068 half-up	\0069 half-down	\006a half-left	\006b half-right	\006d locked	\006e un-locked	\006f new
\0070 rss	\0071 rss-box	\0072 twitter	\0073 twitter-box	\0074 facebook-box	\0075 google-box	\0076 linkedin-box
\0077 stumble-box	\0078 youtube-box	\0079 tumblr-box	\007a pinterest-box