一個極簡的起手式，使用LESS，具備Vertical Rhythm設計。

kickstart

/* Vars */
 
@font-size: 16px;
@vertical-rhythm: @font-size * 1.5;
 
@fontstack1:  sans-serif; /* Headings */
@fontstack2:  Georgia, serif; /* Body copy */
 
@color1: #20bd7c; /* Main theme colour colour */
@color2: #333; /* headings */
@color3: #888; /* Neutral / body copy colour */
@color4: #e5e5e5; /* Background / light colour */
 
/* Grid Variables */
 
@columnWidth: 49px;
@gutter: 16px;
@allColumns: @columnWidth * 12;
@allGutters: (@gutter * 12) * 2;
@totalWidth: @allColumns + @allGutters;
 
/* Imports */
 
/* @import 'animation.css'; Un-comment if using animations */
 
/* Mixins */
 
.clearfix() {
    overflow: hidden;
    zoom:1;
}
 
.clear() {
    clear: both;
}
 
.border_radius(@radius:10px) {
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
 
.border_radius_right(@radius:10px) {
    -webkit-border-top-right-radius: @radius;
    -webkit-border-bottom-right-radius: @radius;
    -moz-border-radius-topright: @radius;
    -moz-border-radius-bottomright: @radius;
    border-top-right-radius: @radius;
    border-bottom-right-radius: @radius;
}
 
.border_radius_left(@radius:10px) {
    -webkit-border-top-left-radius: @radius;
    -webkit-border-bottom-left-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-bottomleft: @radius;
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius;
}
 
.border_radius_bottom(@radius:10px) {
    -webkit-border-bottom-left-radius: @radius;
    -webkit-border-bottom-right-radius: @radius;
    -moz-border-radius-bottomleft: @radius;
    -moz-border-radius-bottomright: @radius;
    border-bottom-left-radius: @radius;
    border-bottom-right-radius: @radius;
}
 
.border_radius_top(@radius:10px) {
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-topright: @radius;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
}
 
.box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888) {
    box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
    -webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
    -moz-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
}
 
.inset_box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888) {
    box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
    -webkit-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
    -moz-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
}
 
.text_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_color:#fff) {
    text-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
}
 
.transition(@selector:all, @animation:ease-in-out, @duration:.2s) {
    -webkit-transition:@selector @animation @duration;
    -moz-transition:@selector @animation @duration;
    -o-transition:@selector @animation @duration;
    transition:@selector @animation @duration;
}
 
.vertical_gradient(@from: #000, @to: #FFF) {
    background: @from;
    background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
    background: -webkit-linear-gradient(@from, @to);
    background-image: -moz-linear-gradient(top, @from, @to);
    background-image: -moz-gradient(top, @from, @to);
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @from, @to));
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d, endColorstr=%d)", @from, @to);
}
 
/* The grid */
 
.theWidth (@theColumn: 1, @theGutter: 0) {
    width: (@columnWidth * @theColumn) + (@gutter * @theGutter);
}
 
.grid_1 { .theWidth(1,0); }
.grid_2 { .theWidth(2,2); }
.grid_3 { .theWidth(3,4); }
.grid_4 { .theWidth(4,6); }
.grid_5 { .theWidth(5,8); }
.grid_6 { .theWidth(6,10); }
.grid_7 { .theWidth(7,12); }
.grid_8 { .theWidth(8,14); }
.grid_9 { .theWidth(9,16); }
.grid_10 { .theWidth(10,18); }
.grid_11 { .theWidth(11,20); }
.grid_12 { .theWidth(12,22); }
 
.column {
    margin: 0 @gutter;
    overflow: hidden;
    float: left;
    display: inline;
}
 
.row {
    width: @totalWidth;
    margin: 0 auto;
    overflow: hidden;
}
 
.row .row {
    margin: 0 (@gutter * -1);
    width: auto;
    display: inline-block;
}
 
/* Headings */
 
h1,h2,h3,h4,h5,h6 {
   font-family:@fontstack2;
}
 
h1 {
    font-size:@font-size * 3.0625; /* 49px */
    line-height:1.4694em; /*72px*/
    margin-top: 0.87em;
    margin-bottom:0.1096em;
} 
 
h2 {
    font-size:@font-size * 2.25; /* 36px */
    line-height: 1.3333em; /*48px*/
    margin-top:1em;
    margin-bottom:.3334em;
}
 
h3 {
    font-size:@font-size * 1.75; /* 28px */
    line-height:1.7143em; /*48px*/
    margin-top: 1.4142em;
    margin-bottom:0.3333em;
} 
 
h4 {
    font-size:@font-size * 1.4375; /* 23px */
    line-height:1.0435em; /*24px*/
    margin-top:1.2912em;
    margin-bottom:0.7956em ;
} 
 
h5 {
    font-size:@font-size * 1.125em; /* 16px */
    line-height: 1.3333em; /*24px*/
    margin-top:1.8em; /* 2.7222em */
    margin-bottom:.9222em;
}
 
body {
   font-size:@font-size;
   line-height:@vertical-rhythm;
   font-family: @fontstack2;
}
 
p, ul, ol, dl, table, form {
   margin-bottom:@vertical-rhythm;
}