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

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.

Content

Mixins

These mixins apply to the scss syntax, if you're using another syntax, you'll need to adjust this content.

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 rounded(4px);
}

As you can see we just used @include rounded(4px); and that automatically added all the border-radius markup we established 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 rounded(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 .rounded(4px); - Rounded on all corners
• @include .rounded-top(4px); - Rounded on the top corners only
• @include .rounded-bottom(4px); - Rounded on the bottom corners only
• @include .rounded-left(4px); - Rounded on left side only
• @include .rounded-right(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

Inputs

Bones doesn't come with any form styles so you should add your own.

Text Input Textarea >

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 blue-button" href="#">Blue Button</a>

Blue 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.

These are example icon names
\0021 location	\0025 half-star	\0026 calendar	\0028 trophy	\0029 cart	\002b wifi	\002d podcast