Created
June 21, 2012 04:43
-
-
Save cameroooon/2963876 to your computer and use it in GitHub Desktop.
A CSS boilerplate
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
/* | |
============================================================================= | |
NORMALIZE (using HTML5 Boilerplate) | |
============================================================================= | |
*/ | |
/* HTML5 element display | |
========================================================================== */ | |
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } | |
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; } | |
/* Base | |
========================================================================== */ | |
html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } | |
body { margin: 0; font-size: 13px; line-height: 1.231; } | |
body, button, input, select, textarea { font-family: sans-serif; color: #222; } | |
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } | |
::selection { background: #fe57a1; color: #fff; text-shadow: none; } | |
/* Links | |
========================================================================== */ | |
a { color: #00e; } | |
a:visited { color: #551a8b; } | |
a:focus { outline: thin dotted; } | |
a:hover, a:active { outline: 0; } | |
/* Typography | |
========================================================================== */ | |
abbr[title] { border-bottom: 1px dotted; } | |
b, strong { font-weight: bold; } | |
blockquote { margin: 1em 40px; } | |
dfn { font-style: italic; } | |
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } | |
ins { background: #ff9; color: #000; text-decoration: none; } | |
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } | |
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } | |
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } | |
q { quotes: none; } | |
q:before, q:after { content: ""; content: none; } | |
small { font-size: 85%; } | |
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } | |
sup { top: -0.5em; } | |
sub { bottom: -0.25em; } | |
/* Lists | |
========================================================================== */ | |
ul, ol { margin: 1em 0; padding: 0 0 0 40px; } | |
dd { margin: 0 0 0 40px; } | |
nav ul, nav ol { list-style: none; margin: 0; padding: 0; } | |
/* Embedded content | |
========================================================================== */ | |
img { border: 0; -ms-interpolation-mode: bicubic; } | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
/* Figures | |
========================================================================== */ | |
figure { margin: 0; } | |
/* Forms | |
========================================================================== */ | |
form { margin: 0; } | |
fieldset { border: 0; margin: 0; padding: 0; } | |
legend { border: 0; *margin-left: -7px; padding: 0; } | |
label { cursor: pointer; } | |
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } | |
button, input { line-height: normal; *overflow: visible; } | |
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } | |
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } | |
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } | |
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } | |
textarea { overflow: auto; vertical-align: top; } | |
input:valid, textarea:valid { } | |
input:invalid, textarea:invalid { background-color: #f0dddd; } | |
/* Tables | |
========================================================================== */ | |
table { border-collapse: collapse; border-spacing: 0; } | |
/* | |
============================================================================= | |
PRIMARY STYLES | |
============================================================================= | |
*/ | |
// Less Library | |
// --------------------------------------------------- | |
@import "lib.less"; | |
// Local Functions | |
// --------------------------------------------------- | |
// Colors | |
// --------------------------------------------------- | |
// Greys | |
// Fonts | |
// --------------------------------------------------- | |
@ff1: Helvetica, Arial, sans-serif; | |
// Styles | |
// --------------------------------------------------- | |
/* BASE | |
=================== */ | |
/* LAYOUT | |
=================== */ | |
/* MODULE | |
=================== */ | |
/* | |
============================================================================= | |
MEDIA QUERIES | |
============================================================================= | |
*/ | |
@media only screen and (min-width: 320px) { | |
/* BASE | |
=================== */ | |
/* LAYOUT | |
=================== */ | |
/* MODULE | |
=================== */ | |
} | |
@media only screen and (min-width: 480px) { | |
/* BASE | |
=================== */ | |
/* LAYOUT | |
=================== */ | |
/* MODULE | |
=================== */ | |
} | |
@media only screen and (min-width: 768px) { | |
/* BASE | |
=================== */ | |
/* LAYOUT | |
=================== */ | |
/* MODULE | |
=================== */ | |
} | |
/* | |
============================================================================= | |
NON-SEMANTIC HELPER CLASSES - Please define your styles before this section. | |
============================================================================= | |
*/ | |
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } | |
.ir br { display: none; } | |
.hidden { display: none; visibility: hidden; } | |
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } | |
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } | |
.invisible { visibility: hidden; } | |
.clearfix:before, .clearfix:after { content: ""; display: table; } | |
.clearfix:after { clear: both; } | |
.clearfix { zoom: 1; } | |
/* | |
============================================================================= | |
PRINT STYLES | |
============================================================================= | |
*/ | |
@media print { | |
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ | |
a, a:visited { color: #444 !important; text-decoration: underline; } | |
a[href]:after { content: " (" attr(href) ")"; } | |
abbr[title]:after { content: " (" attr(title) ")"; } | |
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ | |
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } | |
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ | |
tr, img { page-break-inside: avoid; } | |
img { max-width: 100% !important; } | |
@page { margin: 0.5cm; } | |
p, h2, h3 { orphans: 3; widows: 3; } | |
h2, h3{ page-break-after: avoid; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment