Created
June 19, 2013 21:31
-
-
Save waterpipe/5818279 to your computer and use it in GitHub Desktop.
less Boilerplatte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= // | |
// = Boilerplate Less CSS Styles = // | |
// = by Michael P. Geraci, 2011 - www.michaelgeraci.com = // | |
// = tell me what's missing: mgeraci@gmail.com | @mgeraci = // | |
// = free for all to use and modify (MIT License) = // | |
// ========================================================= // | |
// ============= // | |
// = CSS Reset = // | |
// ============= // | |
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{ | |
margin: 0; | |
padding: 0; | |
border: 0; | |
outline: 0; | |
vertical-align: baseline; | |
background: transparent; | |
font-weight: inherit; | |
font-style: inherit; | |
font-size: 100%; | |
font-family: inherit; | |
} | |
// HTML5 display-role reset for older browsers | |
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ | |
display: block; | |
} | |
// ================ // | |
// = CSS3 Helpers = // | |
// ================ // | |
// Rounded Corners | |
.borderRadius(@radius){ | |
-moz-border-radius: @radius; // FF 1+ | |
-webkit-border-radius: @radius; // FF 1+ | |
border-radius: @radius; // Opera 10.5, IE 9, Saf5, Chrome | |
} | |
// Top-to-Bottom Gradient | |
.gradientV(@start, @end){ | |
background: (@start + @end) / 2; // Non CSS3 browsers get the average color | |
background-image: -moz-linear-gradient(top, @start, @end); // FF 3.6 | |
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); // Safari 4+, Chrome | |
background-image: -webkit-linear-gradient(top, @start, @end); // Chrome 10+, Safari 5.1+ | |
background-image: -o-linear-gradient(top, @start, @end); // Opera 11.10+ | |
background-image: linear-gradient(top, @start, @end); // CSS3 | |
filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE6 & 7 | |
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE8 | |
background-image: -ms-linear-gradient(top, @start, @end); // IE10 | |
} | |
// Left-to-Right Gradient | |
.gradientH(@start, @end){ | |
background: (@start + @end) / 2; // Non CSS3 browsers get the average color | |
background-image: -moz-linear-gradient(left, @start, @end); // FF 3.6 | |
background-image: -webkit-gradient(linear, left center, right center, from(@start), to(@end)); // Safari 4+, Chrome | |
background-image: -webkit-linear-gradient(left center, right center, from(@start), to(@end)); // Chrome 10+, Safari 5.1+ | |
background-image: -o-linear-gradient(left, @start, @end); // Opera 11.10+ | |
background-image: linear-gradient(left, @start, @end); // CSS3 | |
filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d, GradientType=1)", @start, @end); // IE6 & 7 | |
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d, GradientType=1)", @start, @end); // IE8 | |
background-image: -ms-linear-gradient(left, @start, @end); // IE10 | |
} | |
// Top-to-Bottom 3 Stop Gradient | |
.gradientV3(@start, @middle, @middlePos, @end){ | |
background: (@start + @end) / 2; // Non CSS3 browsers get the average color | |
background-image: -moz-linear-gradient(top, @start, @middle @middlePos * 1%, @end); // FF 3.6 | |
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Safari 4+, Chrome | |
background-image: -webkit-linear-gradient(top, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Chrome 10+, Safari 5.1+ | |
background-image: -o-linear-gradient(top, @start 0%, @middle @middlePos * 1%, @end 100%); // Opera 11.10+ | |
filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE6 & 7 | |
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE8 | |
background-image: linear-gradient(top, @start 0%, @middle @middlePos * 1%, @end 100%); // CSS3 | |
} | |
// Left-to-Right 3 Stop Gradient | |
.gradientH3(@start, @middle, @middlePos, @end){ | |
background: (@start + @end) / 2; // Non CSS3 browsers get the average color | |
background-image: -moz-linear-gradient(left, @start, @middle @middlePos * 1%, @end); // FF 3.6 | |
background-image: -webkit-gradient(linear, left center, right center, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Safari 4+, Chrome | |
background-image: -webkit-linear-gradient(left, from(@start), color-stop(@middlePos / 100, @middle), to(@end)); // Chrome 10+, Safari 5.1+ | |
background-image: -o-linear-gradient(left, @start 0%, @middle @middlePos * 1%, @end 100%); // Opera 11.10+ | |
filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE6 & 7 | |
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE8 | |
background-image: linear-gradient(left, @start 0%, @middle @middlePos * 1%, @end 100%); // CSS3 | |
} | |
// Top-to-Bottom 4 Stop Gradient | |
.gradientV4(@color1, @color2, @position2, @color3, @position3, @color4){ | |
background: (@color1 + @color4) / 2; // Non CSS3 browsers get the average color | |
background-image: -moz-linear-gradient(top, @color1, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4); // FF 3.6 | |
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 | |
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+ | |
background-image: -o-linear-gradient(top, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // Opera 11.10+ | |
filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @color1, @color4); // IE6 & 7 | |
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @color1, @color4); // IE8 | |
background-image: linear-gradient(top, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // CSS3 | |
} | |
// Left-to-Right 4 Stop Gradient | |
.gradientH4(@color1, @color2, @position2, @color3, @position3, @color4){ | |
background: (@color1 + @color4) / 2; // Non CSS3 browsers get the average color | |
background-image: -moz-linear-gradient(left, @color1, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4); // FF 3.6 | |
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 | |
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+ | |
background-image: -o-linear-gradient(left, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // Opera 11.10+ | |
filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d, GradientType=1)", @color1, @color4); // IE6 & 7 | |
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d, GradientType=1)", @color1, @color4); // IE8 | |
background-image: linear-gradient(left, @color1 0%, @color2 @position2 * 1%, @color3 @position3 * 1%, @color4 100%); // CSS3 | |
} | |
// Drop shadow | |
.boxShadow(@params){ | |
-moz-box-shadow: @params; // FF3.5+ | |
-webkit-box-shadow: @params; // Saf3.0+, Chrome | |
box-shadow: @params; // Opera 10.5, IE9+, Chrome 10+ | |
} | |
// Transition | |
.transition(@params){ | |
-moz-transition: @params; // FF4+ | |
-o-transition: @params; // Opera 10.5+ | |
-webkit-transition: @params; // Safari 3.2+, Chrome | |
-ms-transition: @params; // IE10 | |
transition: @params; // CSS3 | |
} | |
// =========================== // | |
// = Centered Content Blocks = // | |
// =========================== // | |
// For designs that involve a centered column of fixed with, I've found that | |
// for great browser compatability, it's useful to separate page elements | |
// into discreet horizontal chunks when possible. These two classes help. | |
// | |
// example: | |
// <div class="wrapOut"> | |
// <div class="wrapIn"> | |
// header content here | |
// </div> | |
// </div> | |
// <div class="wrapOut"> | |
// <div class="wrapIn"> | |
// your main content goes here | |
// </div> | |
// </div> | |
// set the width of your body column | |
@contentWidth: 960px; | |
html{ | |
width: 100%; | |
height: 100%; | |
min-width: @contentWidth; // set so that browsers resized smaller do not change column content | |
} | |
body{ | |
position: relative; // to enable correct absolute positioning | |
} | |
.wrapOut{ | |
width: 100%; | |
.floatClear; | |
min-width: @contentWidth; | |
} | |
.wrapIn{ | |
width: @contentWidth; | |
margin: 0 auto; | |
} | |
// ====================================================== // | |
// = Horizontal Centering for Objects of Variable Width = // | |
// ====================================================== // | |
// example: | |
//<div class="outer"> | |
// <div class="inner">The amount of text in this div can change, and it would still be centered</div> | |
//</div> | |
// It's worth noting that since .outer is positioned in the middle, it could protrude relatively | |
// far off to the right depending on the width of the object being centered. I usually set | |
// .outer's parent to overflow: hidden to make sure this doesn't affect the layout. | |
.outer{ | |
.floatClear; | |
position: relative; | |
left: 50%; | |
} | |
.inner{ | |
position: relative; | |
left: -50%; | |
} | |
// ========================= // | |
// = Call To Action Button = // | |
// ========================= // | |
// Shiny buttons make people want to click them! Just add the class callToAction to any link! | |
// Or mix it in with the color as a parameter! | |
.callToAction(@buttonColor: #c97200){ | |
// slave colors | |
@defaultStart: @buttonColor + 35%; | |
@defaultEnd: @buttonColor; | |
@borderColor: @buttonColor - 50%; | |
// button positioning | |
.floatClear; | |
margin: 10px 0 0 0; | |
padding: 4px 13px 2px 13px; | |
// text styles | |
font-size: 30px; | |
color: #fff; | |
text-decoration: none; | |
letter-spacing: .1em; | |
text-transform: uppercase; | |
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; | |
// box styles | |
border: 1px solid @borderColor; | |
.borderRadius(6px); | |
.boxShadow(0px 0px 2px @borderColor); | |
.gradientV4(@defaultStart, @defaultStart, 46, @defaultEnd, 54, @defaultEnd); | |
// hover state | |
&:hover{ | |
color: #fff; | |
// gradient colors | |
@start: @defaultStart - 20%; | |
@end: @defaultEnd - 20%; | |
.gradientV4(@start, @start, 46, @end, 54, @end); | |
} | |
// active (click) state | |
&:active{ | |
color: #fff; | |
// gradient colors | |
@start: @defaultStart - 40%; | |
@end: @defaultEnd - 40%; | |
.gradientV4(@start, @start, 46, @end, 54, @end); | |
} | |
} | |
// ================== // | |
// = General Styles = // | |
// ================== // | |
// No margin or padding on docroot | |
html{ | |
margin: 0; | |
padding: 0; | |
} | |
// No margin or padding on body, sensible font defaults | |
body{ | |
margin: 0; | |
padding: 0; | |
font-family: helvetica, arial, verdana, sans-serif; | |
text-rendering: optimizeLegibility; // enable better kerning and ligatures for Webkit. FF has this enabled by default for fonts >= 20px. IE does not support this | |
} | |
// Stack your boxes easily with this | |
.floatClear{ | |
float: left; | |
clear: both; | |
} | |
// Do you hate borders on your images and image links? Because I do. | |
img{border: 0;} | |
// Wow! You also don't like bullets? Great to meet you. | |
ul{list-style-type: none;} | |
// clearfix (thanks for the mixin-able syntax, Mark Otto!) | |
.clearfix{ | |
zoom: 1; | |
&:after{ | |
content: "."; | |
display: block; | |
height: 0; | |
clear: both; | |
visibility: hidden; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment