Skip to content

Instantly share code, notes, and snippets.

@mattmcmanus

mattmcmanus/style-guide.md

Last active January 4, 2016 00:29
Download ZIP

Revisions

  1. mattmcmanus revised this gist Jan 21, 2014. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,12 @@

    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.
  2. mattmcmanus created this gist Jan 21, 2014.
    21 changes: 21 additions & 0 deletions style-guide.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    # 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](http://getbootstrap.com/customize/#less-variables) that you should use as a starting point.

    ### Icons! Fonts!

    [Download this zip](https://www.dropbox.com/sh/bmz1x6vi7axt2ch/9Q4A9Co-Yl/streamline-30px) 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.