Created
August 4, 2011 17:32
-
-
Save Richtermeister/1125707 to your computer and use it in GitHub Desktop.
A simpified blueprint based on less, stripped of all the presumptious classes/colors/etc
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
/* -------------------------------------------------------------- | |
reset.css | |
* Resets default browser CSS. | |
-------------------------------------------------------------- */ | |
html, body, div, span, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, code, | |
del, dfn, em, img, q, dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, dialog, figure, footer, header, | |
hgroup, nav, section { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-weight: inherit; | |
font-style: inherit; | |
font-size: 100%; | |
font-family: inherit; | |
vertical-align: baseline; | |
} | |
article, aside, dialog, figure, footer, header, | |
hgroup, nav, section { | |
display:block; | |
} | |
body { | |
line-height: 1.5; | |
} | |
/* Tables still need 'cellspacing="0"' in the markup. */ | |
table { border-collapse: separate; border-spacing: 0; } | |
caption, th, td { text-align: left; font-weight: normal; } | |
table, td, th { vertical-align: middle; } | |
/* Remove possible quote marks (") from <q>, <blockquote>. */ | |
blockquote:before, blockquote:after, q:before, q:after { content: ""; } | |
blockquote, q { quotes: "" ""; } | |
/* Remove annoying border on linked images. */ | |
a img { border: none; } | |
/* -------------------------------------------------------------- | |
typography.css | |
* Sets up some sensible default typography. | |
-------------------------------------------------------------- | |
// Setup defaults for links and fonts/colors*/ | |
@font-color: #333; | |
@a-color: blue; | |
@a-hover-color: @a-color; | |
@quiet-color: @font-color + #444; | |
@loud-color: #000; | |
@default_fonts: "Helvetica Neue", Arial, Helvetica, sans-serif; | |
/* Default font settings. | |
The font-size percentage is of 16px. (0.75 * 16px = 12px) */ | |
html { font-size:100.01%; } | |
body { | |
font-size: 75%; | |
color: @font-color; | |
background: #fff; | |
font-family: @default_fonts; | |
} | |
/* Headings | |
-------------------------------------------------------------- */ | |
h1,h2,h3,h4,h5,h6 { font-weight: normal; color: @font-color; } | |
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } | |
h2 { font-size: 2em; margin-bottom: 0.75em; } | |
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } | |
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } | |
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } | |
h6 { font-size: 1em; font-weight: bold; } | |
h1 img, h2 img, h3 img, | |
h4 img, h5 img, h6 img { | |
margin: 0; | |
} | |
/* Text elements | |
-------------------------------------------------------------- */ | |
p { margin: 0 0 1.5em; } | |
/* | |
These can be used to pull an image at the start of a paragraph, so | |
that the text flows around it (usage: <p><img class="left">Text</p>) | |
*/ | |
.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } | |
.right { float: right; margin: 1.5em 0 1.5em 1.5em; } | |
a, a:focus{ color: @a-color; } | |
a:hover{ color:@a-hover-color; } | |
blockquote { margin: 1.5em; color: @quiet-color; font-style: italic; } | |
strong,dfn { font-weight: bold; } | |
em,dfn { font-style: italic; } | |
dfn { font-weight: bold; } | |
sup, sub { line-height: 0; } | |
abbr, | |
acronym { border-bottom: 1px dotted @quiet-color; } | |
address { margin: 0 0 1.5em; font-style: italic; } | |
del { color:@quiet-color; } | |
pre { margin: 1.5em 0; white-space: pre; } | |
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } | |
/* Lists | |
-------------------------------------------------------------- | |
*/ | |
ul { list-style-type: disc; } | |
ol { list-style-type: decimal; } | |
li ul, | |
li ol { margin: 0; } | |
ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; } | |
dl { margin: 0 0 1.5em 0; } | |
dl dt { font-weight: bold; } | |
dd { margin-left: 1.5em;} | |
/* Tables | |
-------------------------------------------------------------- */ | |
table { margin-bottom: 1.4em; width:100%; } | |
th { font-weight: bold; } | |
thead th { background: #c3d9ff; } | |
th,td,caption { padding: 4px 10px 4px 5px; } | |
tfoot { font-style: italic; } | |
caption { background: #eee; } | |
/* -------------------------------------------------------------- | |
grid.css | |
* Sets up an easy-to-use grid of x columns. | |
By default, the grid is 950px wide, with 24 columns | |
spanning 30px, and a 10px margin between columns. | |
If you need fewer or more columns, namespaces or semantic | |
element names, the following | |
-------------------------------------------------------------- */ | |
@width: 950px; | |
@column: 30px; | |
@margin: 10px; | |
@box_background: #E5ECF9; | |
/* A container should group all your columns. */ | |
.container { | |
width: @width; | |
margin: 0 auto; | |
} | |
/* Columns | |
-------------------------------------------------------------- */ | |
/* Sets up basic grid floating and margin. */ | |
.column () { | |
float: left; | |
margin-right: @margin; | |
} | |
/* Use this mixin to set the width of a column. you should avoid @levels wider then @width */ | |
.span (@level: 1) { | |
.column; | |
width: (@level * @column) + ((@level - 1) * 10px); | |
} | |
/* The last column in a row needs this class. */ | |
.last { margin-right: 0; } | |
/* Use these classes to set the width of an input. */ | |
.input_span (@level: 1) { | |
border-left-width: 1px; | |
border-right-width: 1px; | |
padding-left: 5px; | |
padding-right: 5px; | |
width: ((@level * @column) + ((@level - 1) * 10px) - 12px); | |
} | |
/* Add these to a column to append empty cols. */ | |
.append (@level: 1) { | |
padding-right: ((@column * @level) + (@level * 10px)); | |
} | |
/* Add these to a column to prepend empty cols. */ | |
.prepend (@level: 1) { | |
padding-left: ((@column * @level) + (@level * 10px)); | |
} | |
/* Border on right hand side of a column. */ | |
.border () { | |
padding-right: 4px; | |
margin-right: 5px; | |
border-right: 1px solid #eee; | |
} | |
/* Border with more whitespace, spans one column. */ | |
.colborder () { | |
padding-right: 24px; | |
margin-right: 25px; | |
border-right: 1px solid #eee; | |
} | |
/* Use these classes on an element to push it into the | |
next column, or to pull it into the previous column. */ | |
.pull (@level: 1) { | |
margin-left: (@column * @level * -1) + (@level * -10px); | |
float: left; | |
position:relative; | |
} | |
.push (@level: 1) { | |
margin: 0 ((@column * @level * -1) + (@level * -10px)) 1.5em ((@column * @level) + (@level * 10px)); | |
float: right; | |
position:relative; | |
} | |
/* Misc classes and elements | |
-------------------------------------------------------------- */ | |
/* In case you need to add a gutter above/below an element */ | |
.prepend-top { | |
margin-top:1.5em; | |
} | |
.append-bottom { | |
margin-bottom:1.5em; | |
} | |
/* Use a .box to create a padded box inside a column. */ | |
.box { | |
padding: 1.5em; | |
margin-bottom: 1.5em; | |
background: @box_background; | |
} | |
/* Use this to create a horizontal ruler across a column. */ | |
hr { | |
background: #ddd; | |
color: #ddd; | |
clear: both; | |
float: none; | |
width: 100%; | |
height: .1em; | |
margin: 0 0 1.45em; | |
border: none; | |
} | |
hr.space { | |
background: #fff; | |
color: #fff; | |
visibility: hidden; | |
} | |
/* Clearing floats without extra markup | |
Based on How To Clear Floats Without Structural Markup by PiE | |
[http://www.positioniseverything.net/easyclearing.html] */ | |
/* | |
.clearfix:after, .container:after { | |
content: "\0020"; | |
display: block; | |
height: 0; | |
clear: both; | |
visibility: hidden; | |
overflow:hidden; | |
} | |
*/ | |
.clearfix, .container {display: block;} | |
/* Regular clearing | |
apply to column that should drop below previous ones. */ | |
.clear { clear:both; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment