Skip to content
This repository has been archived by the owner on Jan 31, 2018. It is now read-only.

Guide to writing CSS and LESS for Butter

Jump to bottom
k88hudson edited this page Jul 18, 2012 · 9 revisions

This guide assumes Butter supports Firefox, Chrome, Safari, Opera, and IE9+, and that for IE users the browser is in IE9 mode (see http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx for more info).

Variables and mixins

LESS variables and mixins should be added to globals.less if they are used in more than one file. If they are used only in one file, they should be declared at the top of the file.

Mixins should use camel case e.g. .backgroundColor

Vendor prefixes for CSS3

The following prefixes are needed for most CSS3 properties:

  • -moz- (Firefox)
  • -webkit- (Safari, Chrome)
  • -o- (Opera)
  • -ms- (IE9+)
  • no prefix

Example:

a {
  -moz-transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

Note: Don't use -khtml-. This prefix is necessary for old versions of Safari that we don't care about.

Opacity

The correct syntax for opacity is the following:

a {
  opacity: .5;
}

Note: You do not need to include a leading zero before the decimal.

Note: You should not include filter: or -ms-filter: properties. These are hacks for older versions of IE that we don't care about.

Colours

HEX

If you are using HEX colours, use the following style:

  • #FF0000, not #ff0000.
  • #EEE and #FC0, not #EEEEEE and #FFCC00.

RGB, RGBA

If you are using RGBA colours, it is not necessary to provide RGB fallbacks as long as IE users are using IE9+ and the browser is in IE9 mode. Therefore:

a {
  color: rgba( 0, 0, 0, .5 );
}

is perfectly fine.

##box-shadow, border-radius The following properties do not require vendor prefixes:

  • box-shadow
  • border-radius This is true down to Firefox 4.0, Safari 5.0, Chrome 10.0, and IE9. Example:
a {
  box-shadow: 0 0 3px 2px;
  border-radius: 2px;
}

##Gradients. Use the following syntax:

.grad {
    #FDCCB1; /* IE9, sorry, no gradients. */
    background: -moz-linear-gradient(top,  rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%); /* Old Firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,204,177,1)), color-stop(50%,rgba(241,116,50,1)), color-stop(51%,rgba(234,85,7,1)), color-stop(100%,rgba(251,149,94,1))); /* Old Safari and Chrome */
    background: -webkit-linear-gradient(top,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(top,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C, Firefox 10+ */
}

Pretty ugly, right? Use this tool to help you with your gradients: http://www.colorzilla.com/gradient-editor/. Do not include browser comments in your code. You can remove the top rgb line since it is for versions of IE and super old browsers that we don't care about.

Note: Multi-stop gradients, i.e. gradients with more than two colour stops, will just not work in IE9 without further hacks. Additionally, the filter: property doesn't work with border-radius. Therefore, we have decided to use a single-colour fallback.

Note: The above-mentioned tool generates CSS that deviates from our style somewhat (lowercase HEX values, leading 0s on opacity values), but it's really not worth going in and fixing all that every time you need to create a gradient.

Note: See this jsfiddle to test this code on supported browsers: http://jsfiddle.net/UL48M/

Style

  • Use the following style for file headers (at the top of each .less file)
/* EDITOR
-------------------------------------------------- */
  • Use the following style for section headers within a file:
/* Toggle button
-------------------------------------------------- */
  • Use double quotes @import "style.css", url( "../resources/bg.jpg" )
  • Single space before { in rules, single space after : in properties
  • Use hyphenated, lowercase names where possible e.g. .my-fun-class NOT .myFunClass
  • Pad () with brackets, add spaces after , e.g. .mixinFun( 1, 2, 3 );
Clone this wiki locally