KNACSS/knacss.scss

/**
 * www.KNACSS.com V2.5c @author: Raphael Goetter, Alsacreations
 * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
 */


/* ----------------------------- */
/*       Table of content        */
/* ----------------------------- */
/*
 *  0 - Mixins and variables
 *  1 - Reset
 *  2 - Layout and modules
 *  3 - Header
 *  4 - Sidebar
 *  5 - Footer
 *  6 - Forms
 *  7 - Main
 *  8 - IEfix
 *  9 - Print
 * 10 - Desktop medias
 * 11 - Mobile
 */

/* Compass imports */
@import "compass/css3/images";
@import "compass/css3";

/* ----------------------------- */
/* ==Mixins & variables          */
/* ----------------------------- */

/**
 * REM mixin with PX fallback 
 * @include rem('font-size', 1.4) outputs:
 * font-size: 14px;
 * font-size: 1.4rem;
 */
@mixin rem($property, $val) {
    #{$property}: ($val * 10) + px;
    #{$property}: $val + rem;
}

/**
 * Mixin handling media queries breakpoints 
 * Usage:
 * @include breakpoint(small) { ... }
 * Can be used INSIDE a rule
 */
@mixin breakpoint($point) {
    @if $point == small {
        @media (max-width: 45em) { @content; }
    }
    @if $point == medium {
        @media (max-width: 55em) { @content; }
    }
    @if $point == large {
        @media (min-width: 55em) { @content; } 
    }
}

/** 
 * Mixin making easier absolute/fixed positioning 
 * Usage:
 * @include position(0, 0, 0, 0, absolute);
 * Currently unused. Only here for posterity.
 */
@mixin position($top: auto, $right: auto, $bottom: auto, $left: auto, $position: absolute) {
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
	position: $position;
}

/**
 * Function to parse int a value 
 * parseInt(15px) returns 15
 * Value must be unquoted
 */
@function parseInt($number) {
  @return $number / ($number * 0 + 1);
}

/**
 * Mixin handling width-helpers classes 
 * Usage:
 * @include w(100px) -> .w100p { width: 100px; }
 * @include w(60%)   -> .w60   { width: 60%;   }
 * Also handles media-queries
 * If value >= 60% or 600px, becomes "auto" on tablets
 * If value >= 30% or 300px, becomes "auto" on mobiles
 * Change variables below to suit your needs
 */

$valuePercentTablet: 60;
$valuePercentMobile: 30; 
$valuePixelTablet: 600;
$valuePixelMobile: 300;

@mixin w($val, $modifier: '') {
	$int: parseInt($val);
	$unit: unit($val);
	$className: floor($int);
	@if $unit == '%' {
		#{'.w#{$className}'} {
			#{$modifier}width: $val;	
			
			@if $int >= $valuePercentTablet {
				@include breakpoint(medium) {
					width: auto;
				}
			}
			
			@if $int >= $valuePercentMobile {
				@include breakpoint(small) {
					width: auto;
				}
			}
		}
	} @else if $unit == 'px' {
		#{'.w#{$className}p'} {
			#{$modifier}width: $val;
		
			@if $int >= $valuePixelTablet {
				@include breakpoint(medium) {
					width: auto;
				}
			}

			@if $int >= $valuePixelMobile {
				@include breakpoint(small) {
					width: auto;
				}
			}
		}
	}  
}


/* ----------------------------- */
/* ==Reset                       */
/* ----------------------------- */

/**
 * Base font-size
 * corresponds to 10px 
 * adapted to rem unit 
 */
html {
	font-size: 62.5%;
	/* Orientation iOS font-size fix */
	@media (orientation: landscape) and (max-device-width: 768px) {
		-webkit-text-size-adjust: 100%;
	}
}

body {
	background: white;
	color: black;
	font-family: "Century Gothic", helvetica, arial, sans-serif;
	@include rem('font-size', 1.4); /* equiv 14px */
	line-height: 1.5; /* adapt to your design */
}

/**
 * Font-sizing for content
 * Preserve vertical rythm
 * Thanks to http://soqr.fr/vertical-rhythm/ 
 */
p, ul, ol, dl,
blockquote, pre,
td, th, 
label, textarea,
caption, details, figure, 
hgroup {
	@include rem('font-size', 1.4); /* equiv 14px */
	line-height: 1.5;
	margin: .75em 0 0;
}

/**
 * Titles from h1 (.h1-like) to h6 (.h6-like)
 * h1: 26px;
 * h2: 24px;
 * h3: 22px;
 * h4: 20px;
 * h5: 18px;
 * h6: 16px; 
 */
$j: 2.6; $k: 2.25;
@for $i from 1 through 6 {
	#{'h#{$i}'}, #{'.h#{$i}-like'} {
		@include rem('font-size', $j);
		@include rem('line-height', $k);
		font-weight: normal; 
	}
	$j: $j - 0.2; $k: $k + 0.2;
	@if $i == 3 { $k: 1.45; }
}

/**
 * Alternate font-sizing 
 * .smaller: 10px;
 * .small  : 12px;
 * .medium : 14px;
 * .big    : 16px;
 * .bigger : 18px;
 * .biggest: 20px;
 */
$l: 1;
$sizes: smaller, small, medium, big, bigger, biggest;
@each $size in $sizes {
	#{'.#{$size}'} { 
		@include rem('font-size', $l);
	}
	$l: $l + 0.2;
}

/* Soft reset */
html, body,
textarea, label
figure {
	margin: 0;
	padding: 0;
}
ul, ol {
	padding-left: 2em;
}
code, pre, samp {
	white-space: pre-wrap;
	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
}
code  { line-height: 1em; }
table { margin-bottom: 1.5em; }

/* Avoid top margins on first content element */
p, ul, ol, dl,
blockquote, pre,
h1,h2, h3, h4, h5, h6 {
	&:first-child {
		margin-top: 0;
	}
}

/* Avoid margins on nested elements */
li {
	p, ul, ol {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* Max width */
img, table, td, blockquote, code, pre, textarea, input, video {
	max-width: 100%;
}

/* You shall not pass */
div, textarea, table, td, th, code, pre, samp {
	word-wrap: break-word;
	@include hyphens(auto);
}

/* Pictures */
img {
	width: auto;
	height: auto;
	vertical-align: middle;
}
a img { border: 0; }

/* Scripts */
body > script { display: none !important; }

/* Skip-links */
.skip-links {
	position: absolute;
	
	a {
		position: absolute;
		left: -9999px;
		padding: 0.5em;
		background: black;
		color: white;
		text-decoration: none;

		&:focus {
			position: static;
		}
	}
}

/* ----------------------------- */
/* ==layout and modules          */
/* ----------------------------- */

/**
 * Switching box-model for all elements 
 * Content-box: width = width + padding + border
 * Padding-box: width = width + padding
 * Border-box : width = width (FUCK YEAH!)
 */
* {
	@include box-sizing(border-box);
}

/**
 * 1. Include this rule to trigger hasLayout and contain floats.
 * 2. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 3. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix {
	*zoom: 1;           /* 1 */

	&:after, &:before {
		content : ' ';  /* 2 */
		display: table; /* 3 */
	}

	&:after {
		clear: both;
	}
}

/* Clearfix blocks that must contain floats */
.line, .mod {
	@extend .clearfix;
}

/* Clear blocks that needs to be placed under floats */
.clear, .line, .row {
	clear: both;
}

/**
 * Float layout
 * ------------
 * Tutorial : http://knacss.com/demos/tutoriel.html 
 */

/* Module, contains floats (.item is the same) */
.mod, .item { 
	overflow: hidden;
}

/**
 * Table layout
 * ------------
 */
.row {
	display: table;
	table-layout: fixed;
	width: 100%;

	@include breakpoint(small) {
		display: block !important;
		width: 100% !important;
	}
}
.row > *,
.col {
	display: table-cell;
	vertical-align: top;
}

/**
 * Alignments (blocks and inline)
 * ------------------------------
 */

/* Left elements */
   .left { float: left; }
img.left { margin-right: 1em; }

/* Right elements */
   .right { float: right; }
img.right {	margin-left: 1em; }

img.left, 
img.right {	margin-bottom: 5px; }

.center    { margin-left: auto; margin-right: auto; }
.txtleft   { text-align: left; }
.txtright  { text-align: right; }
.txtcenter { text-align: center; }

/* Simply inline-block */
.inbl {
	@include inline-block(top); /* All browsers back to IE6 */
	margin-right: -.25em;
}

/**
 * Grids
 * -----
 */

/* Equal grids with 2% gutter */
[class*=grid] > * {float: left; } /* direct childrens are floating */
[class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */
.grid2 > * { width: 49%; }
.grid3 > * { width: 32%; }
.grid4 > * { width: 23.5%; }
.grid5 > * { width: 18.4%; }
.grid6 > * { width: 15%; }

/* Unequal grids (1-2, 2-1, 1-3 and 3-1) */
.grid2-1 > *:first-child,
.grid1-2 > * + * { width: 66%; }
.grid1-2 > *:first-child,
.grid2-1 > * + * { width: 32%; }
.grid1-3 > *:first-child,
.grid3-1 > * + * { width: 23.5%; }
.grid3-1 > *:first-child,
.grid1-3 > * + * { width: 74.5%; }

/**
 * Blocks widths (percentage and pixels) 
 * + media queries automagically handled
 */

/**
 * .w10  to .w100  (step 10) and
 * .w100 to .w1000 (step 100)
 */
@for $i from 1 through 10 {
  @include w($i*10%);
  @include w($i*100px);
}

/**
 * Additional not-round numbers
 * Add more to the list to suit your needs
 */
$runClasses: 25%, 33.33%, 50%, 66.66%, 75%, 50px, 150px, 960px;
@each $class in $runClasses {
	@include w($class);
}

/**
 * You can even prefix width with
 * 'max-' or 'min-' to handle min/max-width
 */
@include w(960px, 'max-');

/**
 * Spacing helpers
 * p = padding
 * m = margin
 * a = all
 * t = top
 * r = right
 * b = bottom
 * l = left
 * s = small  (10px)
 * m = medium (20px)
 * l = large  (30px)
 * n = none   (0)
 * Source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
 */
.m-reset, .ma0 { margin: 0; }
.p-reset, .pa0 { padding: 0; }
.ma1, .mas { margin: 10px; }
.ma2, .mam { margin: 20px; }
.ma3, .mal { margin: 30px; }
.pa1, .pas { padding: 10px; }
.pa2, .pam { padding: 20px; }
.pa3, .pal { padding: 30px; }

.mt0, .mtn { margin-top: 0; }
.mt1, .mts { margin-top: 10px; }
.mt2, .mtm { margin-top: 20px; }
.mt3, .mtl { margin-top: 30px; }
.mr0, .mrn { margin-right: 0; }
.mr1, .mrs { margin-right: 10px; }
.mr2, .mrm { margin-right: 20px; }
.mr3, .mrl { margin-right: 30px; }
.mb0, .mbn { margin-bottom: 0; }
.mb1, .mbs { margin-bottom: 10px; }
.mb2, .mbm { margin-bottom: 20px; }
.mb3, .mbl { margin-bottom: 30px; }
.ml0, .mln { margin-left: 0; }
.ml1, .mls { margin-left: 10px; }
.ml2, .mlm { margin-left: 20px; }
.ml3, .mll { margin-left: 30px; }

.pt0, .ptn { padding-top: 0; }
.pt1, .pts { padding-top: 10px; }
.pt2, .ptm { padding-top: 20px; }
.pt3, .ptl { padding-top: 30px; }
.pr0, .prn { padding-right: 0; }
.pr1, .prs { padding-right: 10px; }
.pr2, .prm { padding-right: 20px; }
.pr3, .prl { padding-right: 30px; }
.pb0, .pbn { padding-bottom: 0; }
.pb1, .pbs { padding-bottom: 10px; }
.pb2, .pbm { padding-bottom: 20px; }
.pb3, .pbl { padding-bottom: 30px; }
.pl0, .pln { padding-left: 0; }
.pl1, .pls { padding-left: 10px; }
.pl2, .plm { padding-left: 20px; }
.pl3, .pll { padding-left: 30px; }

/* Hidden yet accessible content */
.visually-hidden { 
	position: absolute !important; 
	overflow: hidden; 
	clip: rect(0 0 0 0); 
	height :  1px !important; 
	width  :  1px !important; 
	margin : -1px !important; 
	padding:  0   !important; 
	border: none; 
}

.desktop-hidden { /* Hidden on desktop */
	@include breakpoint(large) {
		display: none;
	}
}  
.mobile-hidden  { /* Hidden on mobile */
	@include breakpoint(small) {
		display: none;
	} 
}					
.tablet-hidden  { /* Hidden on tablets */
	@include breakpoint(medium) {
		display: none;
	} 
} 	

/* ----------------------------- */
/* ==Header						 */
/* ----------------------------- */

/* ----------------------------- */
/* ==Sidebar 					 */
/* ----------------------------- */

/* ----------------------------- */
/* ==Footer						 */
/* ----------------------------- */

/* ----------------------------- */
/* ==Forms						 */
/* ----------------------------- */
form,
fieldset {
	border: none;
}
input,
button,
select,
label,
.btn {
	vertical-align: middle; /* @bugfix alignment */
}
textarea {
	resize: vertical;
	font-family: inherit;
}

/* ----------------------------- */
/* ==Main 						 */
/* ----------------------------- */

/* ----------------------------- */
/* ==IEfix 						 */
/* ----------------------------- */


.ie67 {
	/* haslayout for IE6/IE7 */
	.clearfix, .line, .mod, .row, .col {
		zoom: 1;
	}

	/**
	 * inline-block and table-cell for IE6/IE7
	 * warning: .col needs width on IE6/IE7 
	 */
	.btn, .col {
		display: inline;
		zoom: 1;
	}

	/**
	 * Add a slash at the end of this comment
	 * to enable box-sizing for IE6/IE7
	 * @source https://github.com/Schepp/box-sizing-polyfill 
	 *

	* {
		behavior: url(/js/boxsizing.htc);
	}	

	/**/
}

.ie8 img {
	width: auto; /* @bugfix for IE8 */
}


/* ----------------------------- */
/* ==Print 						 */
/* ----------------------------- */

/* Quick print reset */
@media print {
	p, blockquote {
		orphans: 2;
		widows: 2;
	}
	blockquote,	ul,	ol {
		page-break-inside: avoid;
	}
	h1,	h2,	h3,	caption {
		page-break-after: avoid;
	}
}

/* ----------------------------- */
/* ==Desktop medias 			 */
/* ----------------------------- */

@include breakpoint(large) {
	/**
	 * Here go rules for big resources and big screens
	 * e.g. background-images, font-faces, etc. 
	 */
}

/* ----------------------------- */
/* ==Mobile 					 */
/* ----------------------------- */

/* quick tablet reset */
@include breakpoint(medium) {
	/* responsive widths for medium (m) screens, like tablets */
	.m25 { width: 25%; }
	.m33 { width: 33.3333%; }
	.m50 { width: 50%; }
	.m66 { width: 66.6666%; }
	.m75 { width: 75%; }
	.m100 {
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;		
	}
}

/* quick smartphone reset */
@include breakpoint(small) {
	.mod,
	.item,
	.col,
	fieldset {
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}
	/* responsive widths for tiny (t) screens, like smartphones */
	.t25 { width: 25%; }
	.t33 { width: 33.3333%; }
	.t50 { width: 50%; }
	.t66 { width: 66.6666%; }
	.t75 { width: 75%; }
	.t100 { 
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}
	th,
	td {
		display: block !important;
		width: auto !important;
		text-align: left !important;
	}
	thead { display: none; }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */
}