Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (55 sloc) 2.62 KB


HTML (from HTML5 Boilerplate)

Styles can be targeted to specific IE versions by targeting a parent ".ie6", ".ie7", or ".ie6" class: { margin-top: 10px; } .ie6 { margin-top: 5px; }

Modernizr allows browser features to be targeted based on whether the current browser supports them or not, by adding positive and negative classes to the top level HTML element:

.borderradius { margin-top: 10px; } .no-borderradius { margin-top: 5px; }

It also allows targeting the .no-js class for browsers that have Javascript disabled. Lastly, it enables all HTML5 elements to be targetable in all versions of MSIE--which normally would not allow targeting of

, , and other new HTML5 elements.

BelatedPNG adds PNG support for IE6.

CSS (from HTML5 Boilerplate)

For full details of CSS features, see

  • Full CSS reset is performed, including many tweaks to spacing and layout of lists, checkboxes, links, etc.
  • Uses Yahoo's CSS Fonts:
  • Default font is sans-serif 13px with 16px line-height
  • To change a font size, use 77%, 85%, 93%, 100%, 108%, 116%, 123.1%, 138.5%, 153.9%, or 182%
  • Basic print stylesheet.

Helper classes:

  • .hidden will set an element to display:none and visibility:hidden.
  • .clearfix can be applied to the immediate parent container of floated elements to ensure the container expands to encompass the floats.

CSS (from Compass)

For full details of Compass CSS features, see

Compass mixins can be used in SASS by prefixing with a plus-sign or with @include:

  @include border-radius(25px)

Some useful features to check out:

  • @include border-radius(pixels)
  • @include box-shadow(color, h-offset, v-offset, blur, spread, inset)
  • @include linear-gradient(color-stops, start, image)
  • @include opacity(value)
  • @include float(left or right)
  • @inlcude min-height(value)
  • @include min-width(value)
  • @include sprite-img(img, col, row, width, height, margin)


  • @include font-face(name, files, eot)
  • @include text-shadow(color, h-offset, v-offset, blur)
  • @include nowrap
  • @include replace-text(img, x, y)
  • @include hide-text


  • @include link-colors(normal, hover, active, visited, focus)
  • @include unstyled-link


  • @include no-bullet
  • @include no-bullets
  • @include horizontal-list
  • @include inline-list

Grid system (from

Color palette (from Solarized)