Fork me on GitHub

What

Boilerplate CSS written in Sass, stylesheets with attitude. It includes:

  • CSS Reset
  • CSS3 Helpers (box radius, gradients, box shadow, transition)
  • Centered column blocks
  • Horizontal centering for objects of variable width
  • A fancy call to action button
  • A few general styles and sensible defaults (including a clearfix)

I went through my recent design projects and pulled out these styles that I use all the time to create an easy-to-import stylesheet. They help me get a new design started, and I hope they help you too!

If you like how this looks but you're a Less coder, check out Less Boilerplate.

Documentation / Examples


CSS3 Helpers
Rounded Corners
#element
  +borderRadius(radius)
+borderRadius(15px)

hover to see compiled code

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
Gradients (2 Color)
// Vertical
#element
  +gradientV(color1, color2)

// Horizontal
#element
  +gradientH(color1, color2)
+gradientV(#F0CED6, #CED3F0)

hover to see compiled code

background: #dfd1e3;
background-image: -moz-linear-gradient(top, #f0ced6, #ced3f0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ced6), to(#ced3f0));
background-image: -webkit-linear-gradient(top, #f0ced6, #ced3f0);
background-image: -o-linear-gradient(top, #f0ced6, #ced3f0);
background-image: linear-gradient(top, #f0ced6, #ced3f0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0ced6, endColorstr=#ced3f0);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0ced6, endColorstr=#ced3f0);
background-image: -ms-linear-gradient(top, #ced3f0, #ced3f0);
+gradientH(#F0CED6, #CED3F0)

hover to see compiled code

background: #dfd1e3;
background-image: -moz-linear-gradient(left, #f0ced6, #ced3f0);
background-image: -webkit-gradient(linear, left center, right center, from(#f0ced6), to(#ced3f0));
background-image: -webkit-linear-gradient(left center, right center, from(#f0ced6), to(#ced3f0));
background-image: -o-linear-gradient(left, #f0ced6, #ced3f0);
background-image: linear-gradient(left, #f0ced6, #ced3f0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0ced6, endColorstr=#ced3f0, GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0ced6, endColorstr=#ced3f0, GradientType=1);
background-image: -ms-linear-gradient(left, #ced3f0, #ced3f0);
Gradients (3 Color)
// Vertical (position is integer out of 100)
#element
  +gradientV3(color1, color2, color2Pos, color4)

// Horizontal (position is integer out of 100)
#element
  +gradientH3(color1, color2, color2Pos, color4)
+gradientV3(#F0CED6, #CED3F0, 50, #D2F0CE)

hover to see compiled code

background: #e1dfd2;
background-image: -moz-linear-gradient(top, #f0ced6, #ced3f0 50%, #d2f0ce);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ced6), color-stop(0.5, #ced3f0), to(#d2f0ce));
background-image: -webkit-linear-gradient(top, from(#f0ced6), color-stop(0.5, #ced3f0), to(#d2f0ce));
background-image: -o-linear-gradient(top, #f0ced6 0%, #ced3f0 50%, #d2f0ce 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0ced6, endColorstr=#d2f0ce);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0ced6, endColorstr=#d2f0ce);
background-image: linear-gradient(top, #f0ced6 0%, #ced3f0 50%, #d2f0ce 100%);
+gradientH3(#F0CED6, #CED3F0, 50, #D2F0CE)

hover to see compiled code

background: #e1dfd2;
background-image: -moz-linear-gradient(left, #f0ced6, #ced3f0 50%, #d2f0ce);
background-image: -webkit-gradient(linear, left center, right center, from(#f0ced6), color-stop(0.5, #ced3f0), to(#d2f0ce));
background-image: -webkit-linear-gradient(left, from(#f0ced6), color-stop(0.5, #ced3f0), to(#d2f0ce));
background-image: -o-linear-gradient(left, #f0ced6 0%, #ced3f0 50%, #d2f0ce 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0ced6, endColorstr=#d2f0ce);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0ced6, endColorstr=#d2f0ce);
background-image: linear-gradient(left, #f0ced6 0%, #ced3f0 50%, #d2f0ce 100%);
Gradients (4 Color)
// Vertical (position is integer out of 100)
#element
  +gradientV4(color1, color2, color2Pos, color3, color3Pos, color4)

// Horizontal (position is integer out of 100)
#element
  +gradientH4(color1, color2, color2Pos, color3, color3Pos, color4)
+gradientV4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE)

hover to see compiled code

background: #e2f1cd;
background-image: -moz-linear-gradient(top, #f2f1cb, #f0ced6 33%, #ced3f0 66%, #d2f0ce);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce));
background-image: -webkit-linear-gradient(top, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce));
background-image: -o-linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce);
background-image: linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%);
+gradientH4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE)

hover to see compiled code

background: #e2f1cd;
background-image: -moz-linear-gradient(left, #f2f1cb, #f0ced6 33%, #ced3f0 66%, #d2f0ce);
background-image: -webkit-gradient(linear, left center, right center, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce));
background-image: -webkit-linear-gradient(left center, right center, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce));
background-image: -o-linear-gradient(left, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce, GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce, GradientType=1);
background-image: linear-gradient(left, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%);
Drop Shadow
// Inset is optional.
#element
  +boxShadow(xOffset, yOffset, blur, color, inset)
+boxShadow(3px, 3px, 6px, #000)

hover to see compiled code

-moz-box-shadow: 3px 3px 6px #000000;
-webkit-box-shadow: 3px 3px 6px #000000;
box-shadow: 3px 3px 6px #000000;
+boxShadow(2px, 2px, 3px, #000, inset)

hover to see compiled code

-moz-box-shadow: 2px 2px 3px #000000 inset;
-webkit-box-shadow: 2px 2px 3px #000000 inset;
box-shadow: 2px 2px 3px #000000 inset;
Transition
// Easing is optional
#element
  +transition(property, time, easing)
+transition(all, 1s, ease)

hover to see effect (and compiled code)

-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Stacking & Centering

For designs that involve a centered column of fixed width, I've found that for that for great browser compatability, it's useful to separate page elements into discreet horizontal chunks when possible. The classes wrapOut and wrapIn help.

The header and body sections of this page use these two classes.
<div class="wrapOut">
  <div class="wrapIn">
    Content goes here, is centered, and stacks nicely.
  </div>
</div>
<div class="wrapOut">
  <div class="wrapIn">
    Same here.
  </div>
</div>
General Helpers
Horizontal Centering for Objects of Variable Width
// Since .outer is positioned left: 50%, it may protrude far to the
// right when centering wide objects. I usually set .outer's parent to
// overflow: hidden to make sure this doesn't affect the layout.
<div class="outer">
  <div class="inner">
    The contents can change dynamically and still be centered.
  </div>
</div>
This is variable width, but always centered. Hover to try it!    See? Still centered.
Call to Action Button
// Color is optional (defaults to orange)
#linkID
  +callToAction(color)
Float Left and Clear Both
#element
  +floatClear
.floatClear;
.floatClear;
Clearfix
#outerElement
  +floatClear
set width,
float: right;

content extends beyond the parent
set width,
no float
set width,
float: right;

parent expands to accomodate the child's content
set width,
no float,
added class "clearfix"

Usage

Import the Less Boilerplate stylesheet at the top of your main Less stylesheet:
@import 'boilerplate'

Download

You can also clone the git repo by running:
git clone git://github.com/mgeraci/Sass-Boilerplate

Who

I'm Michael P. Geraci, a New York-based web designer and U/X guy.

email | portfolio


© 2011