The Beginning of a style guide for ce_bacchus

style-guide.md

Baccus Style Guide

There are several things to keep in mind when writing the stylesheet for the app:

Markup & Styling Priorities

1. Bootstrap: Does it fit into an existing component inside of bootstrap? Bootstrap's visual language is clearly defined and consistent. Most of our interface should be able to use the patterns already established.
2. Custom Components: Does it fit into a custom component we've developed for the app or can a number of things be abstracted into a component?
3. Page specific stylesheets: These should be the exception, not the norm. Whenever part of an interface cannot fall into any existing patterns then the styles should be put into a page or section specific stylesheet.

Put complicated styles into mixins

The _mixinx.scss file is the place to check for and keep all mixins, until it becomes unweildy and needs to be split up.

Never manually enter a hex value for colors

Always use a variable that's either already defined in _variables.scss

Use variables as much as possible

Make sure to use the _variables.scss partial whenever possible. Bootstrap has a useful list of all variables that you should use as a starting point.

Icons! Fonts!

Download this zip and open the icon-reference.html file. The icons are in there twice. The top is what icons key is (since it's a font. a is a crosshair). The bottom is the same icons with their css class name instead of it's value. The class name is for easily prepending the icon to an existing element. <a href="http://link" class="icon-bubble-quote-2">Edit</a> becomes (X) Edit with (x) being the icon.

Note: In the reference, it says bubble-quote-2 for the css class. You need to prepend icon- for it to work.