├── .gitignore
├── README.md
├── boilerplate-dot.less
├── boilerplate.css
└── boilerplate.less


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Less Boilerplate
 2 | =============================
 3 | 
 4 | Boilerplate CSS written in [Less.CSS](http://lesscss.org/), the dynamic stylesheet language. It includes: 
 5 | 
 6 | - CSS Reset
 7 | - CSS3 Helpers (box radius, gradients, box shadow, transition)
 8 | - Centered column blocks
 9 | - Horizontal centering for objects of variable width
10 | - A fancy call to action button
11 | - A few general styles and sensible defaults (including a clearfix)
12 | 
13 | 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!
14 | 
15 | If you like how this looks but you're a SASS coder, check out [SASS Boilerplate](http://mgeraci.github.com/SASS-Boilerplate).
16 | 
17 | Demo
18 | ---------
19 | [Right this way](http://mgeraci.github.com/Less-Boilerplate/).
20 | 
21 | Usage
22 | --------
23 | Include this file in at the top of your LESS stylesheet:
24 | 
25 |     @import 'boilerplate';
26 | 
27 | Enjoy!
28 | 
29 | License
30 | --------
31 | The MIT License
32 | 
33 | Copyright (c) 2011 Michael P. Geraci
34 | 
35 | Permission is hereby granted, free of charge, to any person obtaining a copy
36 | of this software and associated documentation files (the "Software"), to deal
37 | in the Software without restriction, including without limitation the rights
38 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
39 | copies of the Software, and to permit persons to whom the Software is
40 | furnished to do so, subject to the following conditions:
41 | 
42 | The above copyright notice and this permission notice shall be included in
43 | all copies or substantial portions of the Software.
44 | 
45 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
46 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
47 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
48 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
49 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
50 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
51 | THE SOFTWARE.
52 | 


--------------------------------------------------------------------------------
/boilerplate-dot.less:
--------------------------------------------------------------------------------
  1 | // ========================================================= //
  2 | // =             Boilerplate Less CSS Styles               = //
  3 | // =  by Michael P. Geraci, 2011 - www.michaelgeraci.com   = //
  4 | // =  tell me what´s missing: mgeraci@gmail.com | @mgeraci = //
  5 | // =     free for all to use and modify (MIT License)      = //
  6 | // ========================================================= //
  7 | 
  8 | 
  9 | // ============= //
 10 | // = CSS Reset = //
 11 | // ============= //
 12 | 
 13 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
 14 |   margin: 0;
 15 |   padding: 0;
 16 |   border: 0;
 17 |   outline: 0;
 18 |   vertical-align: baseline;
 19 |   background: transparent;
 20 |   font-weight: inherit;
 21 |   font-style: inherit;
 22 |   font-size: 100%;
 23 |   font-family: inherit;
 24 | }
 25 | 
 26 | // HTML5 display-role reset for older browsers
 27 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
 28 |   display: block;
 29 | }
 30 | 
 31 | 
 32 | // ================ //
 33 | // = CSS3 Helpers = //
 34 | // ================ //
 35 | 
 36 | // Rounded Corners
 37 | .borderRadius(@radius){
 38 |   -moz-border-radius: @radius; // FF 1+
 39 |   -webkit-border-radius: @radius; // FF 1+
 40 |   border-radius: @radius; // Opera 10.5, IE 9, Saf5, Chrome
 41 | }
 42 | 
 43 | // Top-to-Bottom Gradient
 44 | .gradientV(@start, @end){
 45 |   background: (@start + @end) / 2; // Non CSS3 browsers get the average color
 46 |   background-image: -moz-linear-gradient(top,  @start, @end); // FF 3.6
 47 |   background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); // Safari 4+, Chrome
 48 |   background-image: -webkit-linear-gradient(top, @start, @end); // Chrome 10+, Safari 5.1+
 49 |   background-image: -o-linear-gradient(top, @start, @end); // Opera 11.10+
 50 |   background-image: linear-gradient(top, @start, @end); // CSS3
 51 |   filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1})", @start, @end); // IE6 & 7
 52 |   -ms-filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1})", @start, @end); // IE8
 53 |   background-image: -ms-linear-gradient(top, @start, @end); // IE10
 54 | }
 55 | 
 56 | // Left-to-Right Gradient
 57 | .gradientH(@start, @end){
 58 |   background: (@start + @end) / 2; // Non CSS3 browsers get the average color
 59 |   background-image: -moz-linear-gradient(left,  @start, @end); // FF 3.6
 60 |   background-image: -webkit-gradient(linear, left center, right center, from(@start), to(@end)); // Safari 4+, Chrome
 61 |   background-image: -webkit-linear-gradient(left center, right center, from(@start), to(@end)); // Chrome 10+, Safari 5.1+
 62 |   background-image: -o-linear-gradient(left, @start, @end); // Opera 11.10+
 63 |   background-image: linear-gradient(left, @start, @end); // CSS3
 64 |   filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1}, GradientType=1)", @start, @end); // IE6 & 7
 65 |   -ms-filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1}, GradientType=1)", @start, @end); // IE8
 66 |   background-image: -ms-linear-gradient(left, @start, @end); // IE10
 67 | }
 68 | 
 69 | // Top-to-Bottom 3 Stop Gradient
 70 | .gradientV3(@start, @middle, @middlePos, @end){
 71 |   background: (@start + @end) / 2; // Non CSS3 browsers get the average color
 72 |   background-image: -moz-linear-gradient(top,  @start, @middle @middlePos * 1%, @end); // FF 3.6
 73 |   background-image: -webkit-gradient(linear, left top, left bottom, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Safari 4+, Chrome
 74 |   background-image: -webkit-linear-gradient(top, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Chrome 10+, Safari 5.1+
 75 |   background-image: -o-linear-gradient(top, @start 0%, @middle @middlePos * 1%, @end 100%); // Opera 11.10+
 76 |   filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1})", @start, @end); // IE6 & 7
 77 |   -ms-filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1})", @start, @end); // IE8
 78 |   background-image: linear-gradient(top, @start 0%, @middle @middlePos * 1%, @end 100%); // CSS3
 79 | }
 80 | 
 81 | // Left-to-Right 3 Stop Gradient
 82 | .gradientH3(@start, @middle, @middlePos, @end){
 83 |   background: (@start + @end) / 2; // Non CSS3 browsers get the average color
 84 |   background-image: -moz-linear-gradient(left,  @start, @middle @middlePos * 1%, @end); // FF 3.6
 85 |   background-image: -webkit-gradient(linear, left center, right center, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Safari 4+, Chrome
 86 |   background-image: -webkit-linear-gradient(left, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Chrome 10+, Safari 5.1+
 87 |   background-image: -o-linear-gradient(left, @start 0%, @middle @middlePos * 1%, @end 100%); // Opera 11.10+
 88 |   filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1})", @start, @end); // IE6 & 7
 89 |   -ms-filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1})", @start, @end); // IE8
 90 |   background-image: linear-gradient(left, @start 0%, @middle @middlePos * 1%, @end 100%); // CSS3
 91 | }
 92 | 
 93 | // Top-to-Bottom 4 Stop Gradient
 94 | .gradientV4(@color1, @color2, @position2, @color3, @position3, @color4){
 95 |   background: (@color1 + @color4) / 2; // Non CSS3 browsers get the average color
 96 |   background-image: -moz-linear-gradient(top,  @color1, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4); // FF 3.6
 97 |   background-image: -webkit-gradient(linear, left top, left bottom, from(@color1), color-stop(@position2 / 100, @color2), color-stop(@position3 / 100, @color3), to(@color4)); // Safari 4+, Chrome
 98 |   background-image: -webkit-linear-gradient(top, from(@color1), color-stop(@position2 / 100, @color2), color-stop(@position3 / 100, @color3), to(@color4)); // Chrome 10+, Safari 5.1+
 99 |   background-image: -o-linear-gradient(top, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // Opera 11.10+
100 |   filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1})", @color1, @color4); // IE6 & 7
101 |   -ms-filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1})", @color1, @color4); // IE8
102 |   background-image: linear-gradient(top, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // CSS3
103 | }
104 | 
105 | // Left-to-Right 4 Stop Gradient
106 | .gradientH4(@color1, @color2, @position2, @color3, @position3, @color4){
107 |   background: (@color1 + @color4) / 2; // Non CSS3 browsers get the average color
108 |   background-image: -moz-linear-gradient(left,  @color1, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4); // FF 3.6
109 |   background-image: -webkit-gradient(linear, left center, right center, from(@color1), color-stop(@position2 / 100, @color2), color-stop(@position3 / 100, @color3), to(@color4)); // Safari 4+, Chrome
110 |   background-image: -webkit-linear-gradient(left center, right center, from(@color1), color-stop(@position2 / 100, @color2), color-stop(@position3 / 100, @color3), to(@color4)); // Chrome 10+, Safari 5.1+
111 |   background-image: -o-linear-gradient(left, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // Opera 11.10+
112 |   filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1}, GradientType=1)", @color1, @color4); // IE6 & 7
113 |   -ms-filter: formatString("progid:DXImageTransform.Microsoft.gradient(startColorstr={0}, endColorstr={1}, GradientType=1)", @color1, @color4); // IE8
114 |   background-image: linear-gradient(left, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // CSS3
115 | }
116 | 
117 | // Drop shadow
118 | .boxShadow(@params){
119 |   -moz-box-shadow: @params; // FF3.5+
120 |   -webkit-box-shadow: @params; // Saf3.0+, Chrome
121 |   box-shadow: @params; // Opera 10.5, IE9+, Chrome 10+
122 | }
123 | 
124 | // Transition
125 | .transition(@params){
126 |   -moz-transition: @params; // FF4+
127 |   -o-transition: @params; // Opera 10.5+
128 |   -webkit-transition: @params; // Safari 3.2+, Chrome
129 |   -ms-transition: @params; // IE10
130 |   transition: @params; // CSS3
131 | }
132 | 
133 | 
134 | // =========================== //
135 | // = Centered Content Blocks = //
136 | // =========================== //
137 | 
138 | // For designs that involve a centered column of fixed with, I've found that
139 | // for great browser compatability, it's useful to separate page elements
140 | // into discreet horizontal chunks when possible. These two classes help.
141 | //
142 | // example:
143 | // <div class="wrapOut">
144 | //   <div class="wrapIn">
145 | //     header content here
146 | //   </div>
147 | // </div>
148 | // <div class="wrapOut">
149 | //   <div class="wrapIn">
150 | //     your main content goes here
151 | //   </div>
152 | // </div>
153 | 
154 | // set the width of your body column
155 | @contentWidth: 960px;
156 | 
157 | html{
158 |   width: 100%;
159 |   height: 100%;
160 |   min-width: @contentWidth; // set so that browsers resized smaller do not change column content
161 | }
162 | 
163 | body{
164 |   position: relative; // to enable correct absolute positioning
165 | }
166 | 
167 | .wrapOut{
168 |   width: 100%;
169 |   .floatClear;
170 |   min-width: @contentWidth;
171 | }
172 | 
173 | .wrapIn{
174 |   width: @contentWidth;
175 |   margin: 0 auto;
176 | }
177 | 
178 | 
179 | // ====================================================== //
180 | // = Horizontal Centering for Objects of Variable Width = //
181 | // ====================================================== //
182 | 
183 | // example:
184 | //<div class="outer">
185 | //  <div class="inner">The amount of text in this div can change, and it would still be centered</div>
186 | //</div>
187 | 
188 | // It's worth noting that since .outer is positioned in the middle, it could protrude relatively
189 | // far off to the right depending on the width of the object being centered. I usually set
190 | // .outer's parent to overflow: hidden to make sure this doesn't affect the layout.
191 | 
192 | .outer{
193 |   .floatClear;
194 |   position: relative;
195 |   left: 50%;
196 | }
197 | 
198 | .inner{
199 |   position: relative;
200 |   left: -50%;
201 | }
202 | 
203 | 
204 | // ========================= //
205 | // = Call To Action Button = //
206 | // ========================= //
207 | 
208 | // Shiny buttons make people want to click them! Just add the class callToAction to any link!
209 | // Or mix it in with the color as a parameter!
210 | 
211 | .callToAction(@buttonColor: #c97200){
212 |   // slave colors
213 |   @defaultStart: @buttonColor + 35%;
214 |   @defaultEnd: @buttonColor;
215 |   @borderColor: @buttonColor - 50%;
216 |   
217 |   // button positioning
218 |   .floatClear;
219 |   margin: 10px 0 0 0;
220 |   padding: 4px 13px 2px 13px;
221 |   
222 |   // text styles
223 |   font-size: 30px;
224 |   color: #fff;
225 |   text-decoration: none;
226 |   letter-spacing: .1em;
227 |   text-transform: uppercase;
228 |   text-shadow: rgba(0,0,0,0.2) -1px 0, rgba(0,0,0,0.2) 0 -1px, rgba(255,255,255,0.2) 0 1px;
229 |   
230 |   // box styles
231 |   border: 1px solid @borderColor;
232 |   .borderRadius(6px);
233 |   .boxShadow(0px 0px 2px @borderColor);
234 |   .gradientV4(@defaultStart, @defaultStart, 46, @defaultEnd, 54, @defaultEnd);
235 |   
236 |   // hover state
237 |   &:hover{
238 |     color: #fff;
239 |     
240 |     // gradient colors
241 |     @start: @defaultStart - 20%;
242 |     @end: @defaultEnd - 20%;
243 |     
244 |     .gradientV4(@start, @start, 46, @end, 54, @end);
245 |   }
246 |   
247 |   // active (click) state
248 |   &:active{
249 |     color: #fff;
250 |     
251 |     // gradient colors
252 |     @start: @defaultStart - 40%;
253 |     @end: @defaultEnd - 40%;
254 |     
255 |     .gradientV4(@start, @start, 46, @end, 54, @end);
256 |   }
257 | }
258 | 
259 | 
260 | // ================== //
261 | // = General Styles = //
262 | // ================== //
263 | 
264 | // No margin or padding on docroot
265 | html{
266 |   margin: 0;
267 |   padding: 0;
268 | }
269 | 
270 | // No margin or padding on body, sensible font defaults
271 | body{
272 |   margin: 0;
273 |   padding: 0;
274 |   font-family: helvetica, arial, verdana, sans-serif;
275 |   text-rendering: optimizeLegibility; // enable better kerning and ligatures for Webkit. FF has this enabled by default for fonts >= 20px. IE does not support this
276 | }
277 | 
278 | // Stack your boxes easily with this
279 | .floatClear{
280 |   float: left;
281 |   clear: both;
282 | }
283 | 
284 | // Do you hate borders on your images and image links? Because I do.
285 | img{border: 0;}
286 | 
287 | // Wow! You also don't like bullets? Great to meet you.
288 | ul{list-style-type: none;}
289 | 
290 | // clearfix (thanks for the mixin-able syntax, Mark Otto!)
291 | .clearfix{
292 |   zoom: 1;
293 |   
294 |   &:after{
295 |     content: ".";
296 |     display: block;
297 |     height: 0;
298 |     clear: both;
299 |     visibility: hidden;
300 |   }
301 | }


--------------------------------------------------------------------------------
/boilerplate.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body,
  3 | div,
  4 | span,
  5 | applet,
  6 | object,
  7 | iframe,
  8 | h1,
  9 | h2,
 10 | h3,
 11 | h4,
 12 | h5,
 13 | h6,
 14 | p,
 15 | blockquote,
 16 | pre,
 17 | a,
 18 | abbr,
 19 | acronym,
 20 | address,
 21 | big,
 22 | cite,
 23 | code,
 24 | del,
 25 | dfn,
 26 | em,
 27 | img,
 28 | ins,
 29 | kbd,
 30 | q,
 31 | s,
 32 | samp,
 33 | small,
 34 | strike,
 35 | strong,
 36 | tt,
 37 | var,
 38 | center,
 39 | dl,
 40 | dt,
 41 | dd,
 42 | ol,
 43 | ul,
 44 | li,
 45 | fieldset,
 46 | form,
 47 | label,
 48 | legend,
 49 | table,
 50 | caption,
 51 | tbody,
 52 | tfoot,
 53 | thead,
 54 | tr,
 55 | th,
 56 | td,
 57 | article,
 58 | aside,
 59 | canvas,
 60 | details,
 61 | embed,
 62 | figure,
 63 | figcaption,
 64 | footer,
 65 | header,
 66 | hgroup,
 67 | menu,
 68 | nav,
 69 | output,
 70 | ruby,
 71 | section,
 72 | summary,
 73 | time,
 74 | mark,
 75 | audio,
 76 | video {
 77 |   margin: 0;
 78 |   padding: 0;
 79 |   border: 0;
 80 |   outline: 0;
 81 |   vertical-align: baseline;
 82 |   background: transparent;
 83 |   font-weight: inherit;
 84 |   font-style: inherit;
 85 |   font-size: 100%;
 86 |   font-family: inherit;
 87 | }
 88 | article,
 89 | aside,
 90 | details,
 91 | figcaption,
 92 | figure,
 93 | footer,
 94 | header,
 95 | hgroup,
 96 | menu,
 97 | nav,
 98 | section {
 99 |   display: block;
100 | }
101 | html {
102 |   width: 100%;
103 |   height: 100%;
104 |   min-width: 960px;
105 | }
106 | body {
107 |   position: relative;
108 | }
109 | .wrapOut {
110 |   width: 100%;
111 |   float: left;
112 |   clear: both;
113 |   min-width: 960px;
114 | }
115 | .wrapIn {
116 |   width: 960px;
117 |   margin: 0 auto;
118 | }
119 | .outer {
120 |   float: left;
121 |   clear: both;
122 |   position: relative;
123 |   left: 50%;
124 | }
125 | .inner {
126 |   position: relative;
127 |   left: -50%;
128 | }
129 | html {
130 |   margin: 0;
131 |   padding: 0;
132 | }
133 | body {
134 |   margin: 0;
135 |   padding: 0;
136 |   font-family: helvetica, arial, verdana, sans-serif;
137 |   text-rendering: optimizeLegibility;
138 | }
139 | .floatClear {
140 |   float: left;
141 |   clear: both;
142 | }
143 | img {
144 |   border: 0;
145 | }
146 | ul {
147 |   list-style-type: none;
148 | }
149 | .clearfix {
150 |   zoom: 1;
151 | }
152 | .clearfix:after {
153 |   content: ".";
154 |   display: block;
155 |   height: 0;
156 |   clear: both;
157 |   visibility: hidden;
158 | }
159 | 


--------------------------------------------------------------------------------
/boilerplate.less:
--------------------------------------------------------------------------------
  1 | // ========================================================= //
  2 | // =             Boilerplate Less CSS Styles               = //
  3 | // =  by Michael P. Geraci, 2011 - www.michaelgeraci.com   = //
  4 | // =  tell me what's missing: mgeraci@gmail.com | @mgeraci = //
  5 | // =     free for all to use and modify (MIT License)      = //
  6 | // ========================================================= //
  7 | 
  8 | 
  9 | // ============= //
 10 | // = CSS Reset = //
 11 | // ============= //
 12 | 
 13 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
 14 |   margin: 0;
 15 |   padding: 0;
 16 |   border: 0;
 17 |   outline: 0;
 18 |   vertical-align: baseline;
 19 |   background: transparent;
 20 |   font-weight: inherit;
 21 |   font-style: inherit;
 22 |   font-size: 100%;
 23 |   font-family: inherit;
 24 | }
 25 | 
 26 | // HTML5 display-role reset for older browsers
 27 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
 28 |   display: block;
 29 | }
 30 | 
 31 | 
 32 | // ================ //
 33 | // = CSS3 Helpers = //
 34 | // ================ //
 35 | 
 36 | // Rounded Corners
 37 | .borderRadius(@radius){
 38 |   -moz-border-radius: @radius; // FF 1+
 39 |   -webkit-border-radius: @radius; // FF 1+
 40 |   border-radius: @radius; // Opera 10.5, IE 9, Saf5, Chrome
 41 | }
 42 | 
 43 | // Top-to-Bottom Gradient
 44 | .gradientV(@start, @end){
 45 |   background: (@start + @end) / 2; // Non CSS3 browsers get the average color
 46 |   background-image: -moz-linear-gradient(top,  @start, @end); // FF 3.6
 47 |   background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); // Safari 4+, Chrome
 48 |   background-image: -webkit-linear-gradient(top, @start, @end); // Chrome 10+, Safari 5.1+
 49 |   background-image: -o-linear-gradient(top, @start, @end); // Opera 11.10+
 50 |   background-image: linear-gradient(top, @start, @end); // CSS3
 51 |   filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE6 & 7
 52 |   -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE8
 53 |   background-image: -ms-linear-gradient(top, @start, @end); // IE10
 54 | }
 55 | 
 56 | // Left-to-Right Gradient
 57 | .gradientH(@start, @end){
 58 |   background: (@start + @end) / 2; // Non CSS3 browsers get the average color
 59 |   background-image: -moz-linear-gradient(left,  @start, @end); // FF 3.6
 60 |   background-image: -webkit-gradient(linear, left center, right center, from(@start), to(@end)); // Safari 4+, Chrome
 61 |   background-image: -webkit-linear-gradient(left center, right center, from(@start), to(@end)); // Chrome 10+, Safari 5.1+
 62 |   background-image: -o-linear-gradient(left, @start, @end); // Opera 11.10+
 63 |   background-image: linear-gradient(left, @start, @end); // CSS3
 64 |   filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d, GradientType=1)", @start, @end); // IE6 & 7
 65 |   -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d, GradientType=1)", @start, @end); // IE8
 66 |   background-image: -ms-linear-gradient(left, @start, @end); // IE10
 67 | }
 68 | 
 69 | // Top-to-Bottom 3 Stop Gradient
 70 | .gradientV3(@start, @middle, @middlePos, @end){
 71 |   background: (@start + @end) / 2; // Non CSS3 browsers get the average color
 72 |   background-image: -moz-linear-gradient(top,  @start, @middle @middlePos * 1%, @end); // FF 3.6
 73 |   background-image: -webkit-gradient(linear, left top, left bottom, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Safari 4+, Chrome
 74 |   background-image: -webkit-linear-gradient(top, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Chrome 10+, Safari 5.1+
 75 |   background-image: -o-linear-gradient(top, @start 0%, @middle @middlePos * 1%, @end 100%); // Opera 11.10+
 76 |   filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE6 & 7
 77 |   -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE8
 78 |   background-image: linear-gradient(top, @start 0%, @middle @middlePos * 1%, @end 100%); // CSS3
 79 | }
 80 | 
 81 | // Left-to-Right 3 Stop Gradient
 82 | .gradientH3(@start, @middle, @middlePos, @end){
 83 |   background: (@start + @end) / 2; // Non CSS3 browsers get the average color
 84 |   background-image: -moz-linear-gradient(left,  @start, @middle @middlePos * 1%, @end); // FF 3.6
 85 |   background-image: -webkit-gradient(linear, left center, right center, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Safari 4+, Chrome
 86 |   background-image: -webkit-linear-gradient(left, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Chrome 10+, Safari 5.1+
 87 |   background-image: -o-linear-gradient(left, @start 0%, @middle @middlePos * 1%, @end 100%); // Opera 11.10+
 88 |   filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE6 & 7
 89 |   -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE8
 90 |   background-image: linear-gradient(left, @start 0%, @middle @middlePos * 1%, @end 100%); // CSS3
 91 | }
 92 | 
 93 | // Top-to-Bottom 4 Stop Gradient
 94 | .gradientV4(@color1, @color2, @position2, @color3, @position3, @color4){
 95 |   background: (@color1 + @color4) / 2; // Non CSS3 browsers get the average color
 96 |   background-image: -moz-linear-gradient(top,  @color1, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4); // FF 3.6
 97 |   background-image: -webkit-gradient(linear, left top, left bottom, from(@color1), color-stop(@position2 / 100, @color2), color-stop(@position3 / 100, @color3), to(@color4)); // Safari 4+, Chrome
 98 |   background-image: -webkit-linear-gradient(top, from(@color1), color-stop(@position2 / 100, @color2), color-stop(@position3 / 100, @color3), to(@color4)); // Chrome 10+, Safari 5.1+
 99 |   background-image: -o-linear-gradient(top, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // Opera 11.10+
100 |   filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @color1, @color4); // IE6 & 7
101 |   -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @color1, @color4); // IE8
102 |   background-image: linear-gradient(top, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // CSS3
103 | }
104 | 
105 | // Left-to-Right 4 Stop Gradient
106 | .gradientH4(@color1, @color2, @position2, @color3, @position3, @color4){
107 |   background: (@color1 + @color4) / 2; // Non CSS3 browsers get the average color
108 |   background-image: -moz-linear-gradient(left,  @color1, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4); // FF 3.6
109 |   background-image: -webkit-gradient(linear, left center, right center, from(@color1), color-stop(@position2 / 100, @color2), color-stop(@position3 / 100, @color3), to(@color4)); // Safari 4+, Chrome
110 |   background-image: -webkit-linear-gradient(left center, right center, from(@color1), color-stop(@position2 / 100, @color2), color-stop(@position3 / 100, @color3), to(@color4)); // Chrome 10+, Safari 5.1+
111 |   background-image: -o-linear-gradient(left, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // Opera 11.10+
112 |   filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d, GradientType=1)", @color1, @color4); // IE6 & 7
113 |   -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d, GradientType=1)", @color1, @color4); // IE8
114 |   background-image: linear-gradient(left, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // CSS3
115 | }
116 | 
117 | // Drop shadow
118 | .boxShadow(@params){
119 |   -moz-box-shadow: @params; // FF3.5+
120 |   -webkit-box-shadow: @params; // Saf3.0+, Chrome
121 |   box-shadow: @params; // Opera 10.5, IE9+, Chrome 10+
122 | }
123 | 
124 | // Transition
125 | .transition(@params){
126 |   -moz-transition: @params; // FF4+
127 |   -o-transition: @params; // Opera 10.5+
128 |   -webkit-transition: @params; // Safari 3.2+, Chrome
129 |   -ms-transition: @params; // IE10
130 |   transition: @params; // CSS3
131 | }
132 | 
133 | 
134 | // =========================== //
135 | // = Centered Content Blocks = //
136 | // =========================== //
137 | 
138 | // For designs that involve a centered column of fixed with, I've found that
139 | // for great browser compatability, it's useful to separate page elements
140 | // into discreet horizontal chunks when possible. These two classes help.
141 | //
142 | // example:
143 | // <div class="wrapOut">
144 | //   <div class="wrapIn">
145 | //     header content here
146 | //   </div>
147 | // </div>
148 | // <div class="wrapOut">
149 | //   <div class="wrapIn">
150 | //     your main content goes here
151 | //   </div>
152 | // </div>
153 | 
154 | // set the width of your body column
155 | @contentWidth: 960px;
156 | 
157 | html{
158 |   width: 100%;
159 |   height: 100%;
160 |   min-width: @contentWidth; // set so that browsers resized smaller do not change column content
161 | }
162 | 
163 | body{
164 |   position: relative; // to enable correct absolute positioning
165 | }
166 | 
167 | .wrapOut{
168 |   width: 100%;
169 |   .floatClear;
170 |   min-width: @contentWidth;
171 | }
172 | 
173 | .wrapIn{
174 |   width: @contentWidth;
175 |   margin: 0 auto;
176 | }
177 | 
178 | 
179 | // ====================================================== //
180 | // = Horizontal Centering for Objects of Variable Width = //
181 | // ====================================================== //
182 | 
183 | // example:
184 | //<div class="outer">
185 | //  <div class="inner">The amount of text in this div can change, and it would still be centered</div>
186 | //</div>
187 | 
188 | // It's worth noting that since .outer is positioned in the middle, it could protrude relatively
189 | // far off to the right depending on the width of the object being centered. I usually set
190 | // .outer's parent to overflow: hidden to make sure this doesn't affect the layout.
191 | 
192 | .outer{
193 |   .floatClear;
194 |   position: relative;
195 |   left: 50%;
196 | }
197 | 
198 | .inner{
199 |   position: relative;
200 |   left: -50%;
201 | }
202 | 
203 | 
204 | // ========================= //
205 | // = Call To Action Button = //
206 | // ========================= //
207 | 
208 | // Shiny buttons make people want to click them! Just add the class callToAction to any link!
209 | // Or mix it in with the color as a parameter!
210 | 
211 | .callToAction(@buttonColor: #c97200){
212 |   // slave colors
213 |   @defaultStart: @buttonColor + 35%;
214 |   @defaultEnd: @buttonColor;
215 |   @borderColor: @buttonColor - 50%;
216 |   
217 |   // button positioning
218 |   .floatClear;
219 |   margin: 10px 0 0 0;
220 |   padding: 4px 13px 2px 13px;
221 |   
222 |   // text styles
223 |   font-size: 30px;
224 |   color: #fff;
225 |   text-decoration: none;
226 |   letter-spacing: .1em;
227 |   text-transform: uppercase;
228 |   text-shadow: rgba(0,0,0,0.2) -1px 0, rgba(0,0,0,0.2) 0 -1px, rgba(255,255,255,0.2) 0 1px;
229 |   
230 |   // box styles
231 |   border: 1px solid @borderColor;
232 |   .borderRadius(6px);
233 |   .boxShadow(0px 0px 2px @borderColor);
234 |   .gradientV4(@defaultStart, @defaultStart, 46, @defaultEnd, 54, @defaultEnd);
235 |   
236 |   // hover state
237 |   &:hover{
238 |     color: #fff;
239 |     
240 |     // gradient colors
241 |     @start: @defaultStart - 20%;
242 |     @end: @defaultEnd - 20%;
243 |     
244 |     .gradientV4(@start, @start, 46, @end, 54, @end);
245 |   }
246 |   
247 |   // active (click) state
248 |   &:active{
249 |     color: #fff;
250 |     
251 |     // gradient colors
252 |     @start: @defaultStart - 40%;
253 |     @end: @defaultEnd - 40%;
254 |     
255 |     .gradientV4(@start, @start, 46, @end, 54, @end);
256 |   }
257 | }
258 | 
259 | 
260 | // ================== //
261 | // = General Styles = //
262 | // ================== //
263 | 
264 | // No margin or padding on docroot
265 | html{
266 |   margin: 0;
267 |   padding: 0;
268 | }
269 | 
270 | // No margin or padding on body, sensible font defaults
271 | body{
272 |   margin: 0;
273 |   padding: 0;
274 |   font-family: helvetica, arial, verdana, sans-serif;
275 |   text-rendering: optimizeLegibility; // enable better kerning and ligatures for Webkit. FF has this enabled by default for fonts >= 20px. IE does not support this
276 | }
277 | 
278 | // Stack your boxes easily with this
279 | .floatClear{
280 |   float: left;
281 |   clear: both;
282 | }
283 | 
284 | // Do you hate borders on your images and image links? Because I do.
285 | img{border: 0;}
286 | 
287 | // Wow! You also don't like bullets? Great to meet you.
288 | ul{list-style-type: none;}
289 | 
290 | // clearfix (thanks for the mixin-able syntax, Mark Otto!)
291 | .clearfix{
292 |   zoom: 1;
293 |   
294 |   &:after{
295 |     content: ".";
296 |     display: block;
297 |     height: 0;
298 |     clear: both;
299 |     visibility: hidden;
300 |   }
301 | }


--------------------------------------------------------------------------------