Skip to content

Instantly share code, notes, and snippets.

@mattmcmanus

mattmcmanus/style-guide.md

Last active January 4, 2016 00:29
Show Gist options
  • Save mattmcmanus/8542388 to your computer and use it in GitHub Desktop.
Save mattmcmanus/8542388 to your computer and use it in GitHub Desktop.
Download ZIP
The Beginning of a style guide for ce_bacchus
Raw
style-guide.md

Baccus Style Guide

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment