CSS Responsive Framework Less

style.less

/*

	NOTE: There's some magic going on in .cols() to add a negative right margin.
	      This resolves the the inline-block issue for uncompressed html.  However,
	      it shouldn't be here - you should minify your html instead.  This will 
	      be removed in the immediate future.


	This is the core framework for the site.
	It implements the baseline LESS CSS Mixins and general style rules.


	Notes:
	Lots of pieces from various sources:

	* Grid/Layout: LessFramework 4 + Simpler CSS Grid
	  http://lessframework.com
	  http://webdesignerwall.com/tutorials/the-simpler-css-grid

	* Typography: BlueTrip
	  http://bluetrip.org/

	* Resets: Eric Meyer
	  http://meyerweb.com/eric/tools/css/reset/
	  (+ Blueprint CSS);

	* Variables & Mixins: LessCSS
	  http://lesscss.org/
	  (which is *not* the same as LessFramework)

TABLE OF CONTENTS:

0. DEBUG

1. RESETS

2. TYPOGRAPHY
	2.1 Basics
	2.2 Headings
	2.3 Quotes
	2.4 Forms
	2.5 Lists
	2.6 Tables
	2.7 Margins & Paddings

3. TEXT COLORS
	3.1 Basic Colors
	3.2 Link Colors
	3.3 Selection Colors

4. LAYOUT
	4.1 Default Layout
	4.2 Tablet Layout
	4.3 Mobile Layout
	4.4 Wide Mobile Layout
	4.5 Retina Media Query

5. FORMS

*/

/* 0. DEBUG */

.debug-type {
	background: transparent url(../images/typegrid.png) !important;
}


/* 1. RESETS */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,article,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
	margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent
}
body{line-height:1}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}


/* 2. TYPOGRAPHY */

/* 2.1 Basics */

/*
	Leave the rest of this alone! Magic from:
	http://www.elliotswan.com/2008/02/15/blueprint-css-how-to-customizing-typography-baselines/

	% of base font size = your font size in px / 16px)
*/

/* 16px to the em, default size */
@default-pixels-per-em = 16;
@ems-per-pixel = 1 / @default-pixels-per-em;

@size-ratio: @font-size / @default-pixels-per-em;

@font-size-base: percentage(@size-ratio);
/* We use a decimal multiplier for line-height so that it cascades properly. */
@line-height-base: 1.5;

.scale-font(@size) {
	@new-font-size: (@size * @ems-per-pixel / @size-ratio) * 1em;
	font-size: @new-font-size;
}

/* Old-style - takes ems.
.heading (@size: 1em, @box-size: 1em) {
	@remaining-size: (@box-size - @size) * @line-height-base / @size;
	@margin-top: @remaining-size / 2;
	@margin-bottom: @margin-top;

	font-size: @size;

	margin-top: @margin-top;
	margin-bottom: @margin-bottom;

	margin-left: 0;
	margin-right: 0;
}
*/

/* New style, takes px */
.heading (@size, @box-size: 1) {
	@new-font-size: (@size * @ems-per-pixel / @size-ratio) * 1em;
	font-size: @new-font-size;

	@line-height: @line-height-base * @box-size / @new-font-size;
	line-height: @line-height;

	/* All this voodoo sets valid margins.  Line height is faaaaar easier.
	@total-size: @box-size * @font-size * @line-height-base;
	total-size: @total-size;
	@remaining-size: @total-size - (@size * @line-height-base);
	remaining-size: @remaining-size;

	@total-margin-size: (@remaining-size * @ems-per-pixel) * @size-ratio / @line-height-base;
	total-margin-size: @total-margin-size;

	margin-top: @total-margin-size / 1.5em;
	margin-bottom: (@total-margin-size) / 3em;
	*/

}

/* 2.1 Basic Typography */
body { font-size: @font-size-base; line-height: @line-height-base; font-family: @fonts-primary; }
strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
cite, em, dfn { font-style: italic; }
code, kbd, samp, pre, tt, var { font-size: 90%; font-family: @fonts-code; }
input[type='text'], input[type='password'], textarea { font-family: @fonts-input; }
del { text-decoration: line-through; color: #666; }
ins, dfn { border-bottom: 1px solid #ccc; }
small, sup, sub { font-size: 85%; }
abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
a abbr, a acronym { border: none; }
abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
sup { vertical-align: super; }
sub { vertical-align: sub; }

/* 2.2 Headings */
h1 { .heading(28px, 3em) }
h2 { .heading(24px, 3em) }
h3 { .heading(20px, 2em) }
h4 { .heading(18px, 2em) }
h5 { .heading(16px, 2em) }
h6 { .heading(14px, 2em) }

/* 2.3 Quotes */
blockquote { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666; }
blockquote *:first-child:before { content: "\201C"; }
blockquote *:first-child:after { content: "\201D"; }

/* 2.4 Forms */
fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend { font-weight: bold; font-size:1.2em; }
label { font-weight: bold; }
textarea, input[type='text'], input[type='password'], select { border: 1px solid #ccc; background: #fff; }
textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #aaa; }
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #888; outline: 2px solid #ffffaa; }
input, select { cursor: pointer; }
input[type='text'],input[type='password'] { cursor: text; }

/* 2.5 Lists */
ul { list-style-type: disc; }
ul ul { list-style-type: square; }
ul ul ul { list-style-type: circle; }
ol { list-style-position: outside; list-style-type: decimal; }
dt { font-weight: bold; }

/* 2.6 Tables */
table { border-top: 1px solid #ccc;  border-left: 1px solid #ccc; }
th, td { border-bottom: 1px solid #ddd; border-right: 1px solid #ccc; }

/* 2.7 Margins & Paddings */
blockquote *:first-child { margin: 1em 0; }
hr, p, ul, ol, dl, pre, blockquote, address, table, form, { margin-bottom: @line-height-base * 1em; }
th, td { padding: (@line-height-base * 1em) 0 }
caption { padding-bottom: @line-height-base * 1em } /* padding instead of margin for ie */
blockquote { padding: 0 1em; margin: (@line-height-base * 1em) 0; }
fieldset { padding: 0 1em (@line-height-base * 1em); margin: (@line-height-base * 1em) 0; } /*** padding-top is margin-top for fieldsets in Opera ***/
legend { padding-left: 1em; padding-right: 1em; }
legend+* { margin-top: (@line-height-base * 1em); } /* compensates for the opera margin bug */
textarea, input { padding: .3em .4em .15em .4em; } /* TODO: fix this. */
select { padding: .1em .2em 0 .2em; } /* TODO: fix this. */
option { padding: 0 .4em; } /* TODO: fix this. */
dt,ul,ol { margin-bottom: (@line-height-base * 1em)}
ul { margin-left: 2em; }
ol { margin-left: 2em; }
li { margin-left: 0; }

/* 3. TEXT COLORS */

/* 3.1 Basic Colors */

.main-link {
	color: @color-link-main;

	&:hover {
		color: @color-link-main-hover;
	}
}

.alt-link {
	color: @color-link-alt;

	&:hover {
		color: @color-link-alt-hover;
	}
}

a {
	.main-link;
}


/* 3.2 Link Colors */

/* 3.3 Selection Colors */

.selection {background-color: @color-selection;}

::selection 	 	{.selection}
::-moz-selection 	{.selection}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
#wrapper {-webkit-tap-highlight-color: @color-selection;}



/* 4. LAYOUT */

/* 4.1 Globals */

/* Wrapper for columns.  Magic! */
.cols (@cols: @totalcols, @adjustment: 0) {
	width: @adjustment + ((@colwidth * @cols) + (@gutterwidth * (@cols - 1))) * 1px;
	display: inline-block;
	zoom: 1; *display: inline; /* IE < 8: fake inline-block */
	vertical-align: top;
	margin-left: @gutterwidth;
	margin-right: -4px; /* Negative margin hack for inline-blocks */
}
.fit(@maxwidth) {
	@tempcols: floor(@maxwidth / (@colwidth + @gutterwidth));
	.cols(@tempcols);
}

.first {
	margin-left: 0px;
}


body {
	width: 100%;
}

/* 4.2 Default Layout */

#wrapper {
	.cols();
	float: none;
	margin: 0px auto;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}


/* 4.3 Tablet Layout */
/*		Tablet Layout: 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {

	#wrapper {
		.fit(768px);
	}
}


/* 4.3 Mobile Layout */
/*		Mobile Layout: 320px. */

@media only screen and (max-width: 767px) {

	#wrapper {
		.fit(320px);
	}

}

/* 4.4 Wide Mobile Layout */
/*		Wide Mobile Layout: 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	#wrapper {
		.fit(480px);
	}

}

/* 4.5 Retina Media Query */
/*	Retina media query.
	Overrides styles for devices with a
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {

	#wrapper {

	}

}