<!DOCTYPE html>
<!--[if lte IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"><!--<![endif]--><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>KNACSS Documentation</title>
	<meta name="viewport" content="initial-scale=1.0, width=device-width">
	<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
	<link rel="stylesheet" href="KNACSS-Documentation_fichiers/knacss.html" media="all">
	<link rel="stylesheet" href="KNACSS-Documentation_fichiers/styles.html" media="all">
	<link href="KNACSS-Documentation_fichiers/css.css" rel="stylesheet" type="text/css">
	<style>
	.h2-like, .h3-like, h3 {
		font-weight: bold;
		text-align: left;
		margin-top: 1.5em;
	}
	h3, .h3-like {font-size: 1.5em;}
	h4, .h4-like {font-size: 1.1em; margin-top: 1.5em;}
	section {
		padding: 1em;
		background: rgba(0, 0, 0, 0.03);
	}
	section:first-of-type {margin-bottom: 0;}
	section:target {
		background: rgba(0, 0, 0, 0.1);
	}
	iframe {max-width: 100%;}
	.highlight {
		display: inline-block;
		padding: 4px 12px;
		background: rgba(0,0,0,.08);
	}
	@media (min-width: 1200px) {
		body {
			max-width: none !important;
			margin:0 !important;
			margin-left: 18em !important;
		}
		.toc {
			position: fixed;
				top: 0; left: 0; bottom: 0;
			width: 18em;
			margin-top: 0;
			border-radius: 0;
			border-right: 10px solid #ccc;
			background-color: #eee;
			color: #333;
			overflow-y: auto;
		}
		.toc .h2-like, .toc .h3-like, .toc a {
			color: #333;
		}
		.toc nav ul {
			padding-left: 0;
		}
		.toc nav > ul {
			margin-left: -1em;
		}
		.toc nav li {
			list-style: none;
		}
		.toc nav li li {
			padding-left: 2em;
			padding-bottom: .2em;
			color: rgba(0,0,0,.6);
			font-size: .9em
		}
		.toc nav a {
			display: inline-block;
			padding: .4em 1em;
			margin: 0 0 4px 0;
			background-color: rgba(0,0,0,.1);
			border-radius: 0 4px 4px 0;
			text-decoration: none;
			border: none;
			-webkit-transition: all .6s;
			-moz-transition: all .6s;
			-o-transition: all .6s;
			-ms-transition: all .6s;
			transition: all .6s;
		}
		.toc nav a:hover, .toc nav a:focus {
			background-color: rgba(0,0,0,.2);
			padding-left: 2em;
		}
		.warning {
			border-left: 5px solid #B64926;
			padding: .5em 1em .5em 1.5em;
			margin-top: 1em;
			background: rgba(255,255,255,.8);
		}
	}
	</style>

	<script type="text/javascript" async="" src="KNACSS-Documentation_fichiers/ga.js"></script><script type="text/javascript">
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-9345479-3']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	</script>
	
</head>
<body id="top" class="mw960p center" cz-shortcut-listen="true">
	<header>
		<h1 class="h1-like"><a href="http://www.knacss.com/"><img src="KNACSS-Documentation_fichiers/knacss-350.html" alt="knacss.com" width="350" height="135"></a></h1>
		<p class="tagline">how to use the KNACSS framework ?</p>
	</header>

	<section class="toc">
		<nav role="navigation">
			<ul>			
				<li><a href="#version">Which version ?</a></li>
				<li><a href="#reset">Soft reset</a></li>
				<li><a href="#typo">Typography</a></li>
				<li><a href="#layout">Layout</a>
					<ul>
						<li>Basics</li>
						<li>CSS table-cells</li>
						<li>inline-blocks</li>
						<li>Flexbox Layout</li>
					</ul>
				</li>
				<li><a href="#grids">Grids</a>
					<ul>
						<li>Grids with gutter</li>
						<li>Autogrids</li>
					</ul>
				</li>
				<li><a href="#rwd">Responsive design</a>
					<ul>
						<li>Breakpoints</li>
						<li>Automatic RWD</li>
						<li>Helper classes</li>
					</ul>
				</li>
				<li><a href="#tables">Data tables</a></li>
				<li><a href="#icons">Icons</a></li>
				<li><a href="#stuffs">Other stuffs</a>
					<ul>
						<li>Old IE support</li>
						<li>Design helpers</li>
					</ul>
				</li>
			</ul>
		</nav>
	</section>

	<div>
		<section>
			<h2 id="first-of-all">First of all</h2>
			<p>KNACSS is a collection of ready to use CSS styles and snippets to 
kick start your project. Feel free to use it as a “reset”, then make it 
grow to suit your needs.</p>
			<ul>
				<li>very light</li>
				<li>no JavaScript</li>
				<li>compatible with all browsers (including IE6 and IE7)</li>
				<li>no useless and obstrusive design on elements !</li>
			</ul>
		</section>
		
		<section id="version">
			<h2 id="which-version-should-you-chose-">Which version should you chose ?</h2>

			<p>At this time, KNACSS Builder propose to download three different versions, each of them are free and under WTFPL licence:</p>
			<ul>
				<li><b>Basic CSS version</b></li>
				<li><b>LESS version</b></li>
				<li><b>Sass version</b></li>
			</ul>
			<p class="warning">Note: you can also download the latest version directly with Bower: <code>bower install knacss</code>.</p>
			
			<h3 id="basic-css-version">Basic CSS version</h3>
			<p>If you aim to use KNACSS as a style reset and global CSS 
boilerplate, without changing it's configuration, just click on the 
KNACSS CSS version in the Builder and download the CSS file in your 
project.</p>
			<p>The classic CSS version is a minified CSS files that provides all 
necessary features: soft reset, typography, positionning, grids, 
responsive, navigation, tables, icons, etc.</p>
			<p>Just link it in your project:</p>
			<pre>&lt;link rel="stylesheet" href="knacss.css" media="all"&gt;</pre>

			<p>And voilà, you're ready to begin!</p>
			
			<h3 id="preprocessors-version">Preprocessors version</h3>
			<p>If you're used to deal with CSS preprocessors, your best choice is to install the LESS or Sass version of KNACSS.</p>
			<p>The features proposed in the preprocessor versions of KNACSS are:</p>
			<ul>
			<li>The ability to import (or not) each external file: grids, responsive, navigation, tables, icons, etc.</li>
			<li>The benefits of project variables which you can find in a whole 
config file: font sizes, font stacks, colors, backgrounds, breakpoints, 
etc.</li>
			<li>The possibility to enable or disable some feature booleans: old 
IE support, Google maps support, design helpers support, base styling, 
etc.</li>
			</ul>
			<p>Preprocessor versions of KNACSS are <b>far more flexible and scalable</b> than the basic CSS one.</p>
			<div class="warning"><p>If you use the LESS version know that all the properties are declared <b>without</b> vendor prefixes (-webkit-,-moz-,-ms-,…), to gain clarity, and length of initial code.</p>
			<p>You will certainely need to add these vendor prefixes yourself 
(this is usually done automatically today with Autoprefixer, Mixture, 
Prepros, Grunt, etc.).</p></div>
		</section>

		<section id="reset">
			<h2 class="h2-like">Soft Reset</h2>

			<p>KNACSS applies a minimal CSS reset to remove some problematical external margins and have a generic base for all elements.</p>

			<p>One important part is that KNACSS use the usefull <a href="http://blog.goetter.fr/post/27612618411/box-sizing-et-pourquoi-pas"><code>box-sizing: border-box</code></a> model to ease our life when dealing with paddings and borders&nbsp;; the exact size of all elements will now correspond to <code>width</code> property (and not <code>width</code> + <code>padding</code> + <code>border</code> anymore)&nbsp;:</p>

			<pre>* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}</pre>
		</section>
		
		<section id="typo">
			<h2 class="h2-like">Typography</h2>

			<p>For accessibility concerns, <code>em</code> and <code>rem</code> fluid units are used for font-size.</p>
			<p>To ease calculations, the root element (<code>&lt;html&gt;</code>) is set to 62.5% on the <code>&lt;html&gt;</code> element, which equals 10px while being fluid.</p>
			
			<p>Usual HTML elements will be softly designed:</p>
			<ul>
				<li>headings (<code>h1</code>,… <code>h6</code>)</li>
				<li>paragraphs (<code>p</code>)</li>
				<li>lists (<code>ul</code>, <code>ol</code>, <code>dl</code>)</li>
				<li><code>td</code>, <code>th</code>, <code>label</code>, <code>textarea</code>, <code>caption</code>, <code>details</code>, <code>figure</code>, etc.</li>
			</ul>
			
			<h3 class="h3-like">Codes, marks and quotations</h3>
			
			<p>If you haven't disabled the <code>@enable-styling</code> boolean in the <code>_00-config.less</code> (or <code>_00-config.scss</code>) file, some basic styles will be added on these elements: <code>code</code>, <code>pre</code>, <code>kbd</code>, <code>mark</code>, <code>sub</code>, <code>sup</code>, <code>q</code>.</p>
			
			<h3 class="h3-like">Text positionning</h3>
			
			<p>Use <code>.txtleft</code>, <code>.txtright</code> or <code>.txtcenter</code> to horizontaly align contents and pictures.</p>
			
			<h4>Exemple :</h4>

			<pre>&lt;div class="w80 center txtright mtl"&gt;…&lt;/div&gt;</pre>			
			<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/EGrcn">CodePen.io</a></p>
			
		</section>

		<section id="layout">
			<h2 class="h2-like">Layout with KNACSS</h2>

				<p>KNACSS proposes a collection of snippets to ease the positioning 
in 3 different ways: float, table, and inline blocks. More important, 
the whole thing relies on both lines and boxes.</p>
				
				<h3 id="basics">Basics</h3>
				<p>The global rules are very simple:</p>
				<ul>
					<li>Use <code>.center</code> to horizontaly center a block element.</li>
					<li>Use <code>.start</code> to left align a block element. You can also chose <code>.left</code> but this choice will be less scalable.</li>
					<li>Use <code>.end</code> (or <code>.right</code>) to right align a block element.</li>
				</ul>
				<h4>Example :</h4>

				<pre>&lt;div class="line"&gt;
	&lt;img class="start" src="..." alt="..."&gt;
	&lt;div class="mod"&gt;…&lt;/div&gt;
&lt;/div&gt;</pre>

				<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/tyulv">CodePen.io</a>
				</p>	
				
				<h3 class="h3-like">Lines and Mods</h3>
				
				<p>Two kinds of elements classes will be very usefull in KNACSS: <code>.mod</code> and <code>.line</code>.</p>
				<ul>
					<li>A <code>.mod</code> (“module”) element gains <a href="http://www.w3.org/TR/CSS2/visuren.html#normal-flow">"Block Formating Context"</a>, sort of superpowers (contains floats, do not flow around floats, has no margin collapsing, etc.)</li>
					<li><code>.line</code> elements are always meant to be stacked below  other elements and they always contain floats too.</li>
				</ul>
				
				<h4>Example:</h4>

				<pre>&lt;div class="line"&gt;
	&lt;div class="mod left w33"&gt;...&lt;/div&gt;
	&lt;div class="mod left w33"&gt;...&lt;/div&gt;
	&lt;div class="mod left w33"&gt;...&lt;/div&gt;
&lt;/div&gt;</pre>

				<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/rufDj">CodePen.io</a>
				</p>
				
				<h3 id="table-cells">Table-cells</h3>
				<p>Use KNACSS table classes when you need equal height columns, simple vertical alignments or easy layouts.</p>
				<p>To enable it, you only have to use <code>.row</code> for rows and <code>.col</code> for columns.</p>

				<h4>Example:</h4>

				<pre>&lt;div class="row"&gt;
	&lt;div class="col w33"&gt;...&lt;/div&gt;
	&lt;div class="col w20"&gt;...&lt;/div&gt;
	&lt;div class="col"&gt;...&lt;/div&gt;
&lt;/div&gt;</pre>

				<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/rAxtH">CodePen.io</a></p>
				
				<h3 id="inline-blocks">Inline-blocks</h3>
				<p>Use KNACSS inline-block classes when you need to display elements one next to the other while being sizable: <code>.inbl</code> (inline-block).</p>
				
				<p class="warning">There is a CSS hack to enable this behaviour on IE6 and IE7.</p>

				<h4>Example:</h4>

			<pre>&lt;div class="line"&gt;
	&lt;div class="inbl w33"&gt;...&lt;/div&gt;
	&lt;div class="inbl w50"&gt;...&lt;/div&gt;
&lt;/div&gt;</pre>

			<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/qEGrd">CodePen.io</a></p>
				
				<h3 id="flexbox">Flexbox</h3>
				
				
				
				<p><a href="http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html" hreflang="fr">Flexbox layout</a> module is a very powerfull tool especially for easily reordering elements.</p>
				<ul>
					<li><code>.flex</code> on a parent creates a flexbox context for direct children</li>
					<li><code>.flex-h</code> and <code>.flex-v</code> on parent for horizontal and vertical direction</li>
					<li> <code>.flex-start</code>, <code>.flex-mid</code> or <code>.flex-end</code> on a child to reorder it among it's brothers</li>
				</ul>
				<p class="warning"><code>flexbox</code> <a href="http://caniuse.com/#search=flexbox">isn't supported on &lt;IE10</a>, so use it  preferably for modifying layouts on smartphones and tablets.</p>

				<h4>Example:</h4>

			<pre>&lt;div class="flex flex-h"&gt;
	&lt;div&gt;first block&lt;/div&gt;
	&lt;div class="flex-fluid"&gt;second block&lt;/div&gt;
	&lt;div class="flex-start"&gt;third block&lt;/div&gt;
&lt;/div&gt;</pre>

			<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/FyvfE">CodePen.io</a></p>
				
			<p class="warning">Note : if you want to use Flexbox, the file<code>@import "_07-flexbox";</code> has to be enabled in knacss.less (or knacss.scss) file.</p>

				
		</section>


		<section id="grids">
		
			<h2 class="h2-like">Grids in KNACSS</h2>
			
			<p>KNACSS offers some very light, but usefull, grid systems.</p>
			
			<p class="warning">Note : <code>@import "_02-grids";</code> must be enabled in knacss.less (or knacss.scss) file.</p>
			
			<h3 class="h3-like">Grids with gutters</h3>
				
			<p>Creating Grids with KNACSS is simple: just name your parent with a <code>.grid2</code>, <code>.grid3</code>, …, <code>grid12</code> class. <br>Direct children will automagically become <code>inline-block</code> elements, spaced by your chosen gutter (%, px, em, or rem) and with a %-based width.</p>

			<p class="warning">There has to be an overall container, which must be a <code>.grid</code> element. You can manage as many "grid-cell" childrens as you like&nbsp;!</p>

			<h4>Example:</h4>

			<pre>&lt;div class="grid"&gt;
	&lt;div class="grid3"&gt;
		&lt;div&gt;...&lt;/div&gt;
		&lt;div&gt;...&lt;/div&gt;
		&lt;div&gt;...&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>

			<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/GAenb">CodePen.io</a></p>

			<h4 class="h4-like">Unequal grids</h4>
			<p>You can also manage unequal grids in KNACSS, like a distribution to 2/3 and 1/3 with gutter:</p>
			<pre>&lt;div class="grid"&gt;
	&lt;div class="grid2-1"&gt;
		&lt;div&gt;...&lt;/div&gt;
		&lt;div&gt;...&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>

			<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/jmAkx">CodePen.io</a></p>
			
			<p>The helper classes for unequal grids are:</p>
			<ul>
				<li><code>.grid2-1</code>: distribution to 2/3 and 1/3</li>
				<li><code>.grid1-2</code>: distribution to 1/3 and 2/3</li>
				<li><code>.grid3-1</code>: distribution to 3/4 and 1/4</li>
				<li><code>.grid1-3</code>: distribution to 1/4 and 3/4</li>
			</ul>


			<h3 class="h3-like">Autogrids</h3>

			<p>"Autogrid" is an automatic distribution of boxes: whatever the 
number of your boxes, they will rank themselves, of equal size, by 2, 3,
 4,… or 12 if this is your choice.</p>
			<p>You can not decide the value of the gutter in an Autogrid layout model.</p>
				
			<p class="warning">Parent must be a <code>.autogrid2</code> or <code>.autogrid3</code>… <code>.autogrid12</code> element. You can manage as many autogrids childrens as you like.</p>

			<p>Autogrids childrens will display as inline-blocks, be justified in their container, and get an automatic %-based width.</p>
			<p>An autogrid layout model will automatically adapt itself responsively to screen width changes&nbsp;!</p>

			<pre>&lt;div class="autogrid3"&gt;  &lt;!-- 3 columns  --&gt;
  &lt;div&gt;lorem ipsum&lt;/div&gt;
  &lt;div&gt;lorem ipsum&lt;/div&gt;
  &lt;div&gt;lorem ipsum&lt;/div&gt;
  &lt;div&gt;lorem ipsum&lt;/div&gt;
  &lt;div&gt;lorem ipsum&lt;/div&gt;
  &lt;div&gt;lorem ipsum&lt;/div&gt;
&lt;/div&gt;</pre>

			<p class="mbm highlight">→ Test online with <a href="http://codepen.io/raphaelgoetter/pen/Kqehf">CodePen</a></p>
</section>

		<section id="rwd">
			<h2 id="responsive">Responsive web design</h2>
			<p>KNACSS is built for Responsive web design projetcs and handles many features for this specific task.</p>
			<p class="warning">Note : to apply Responsive helpers in KNACSS, <code>@import "_06-rwd";</code> must be enabled in knacss.less (or knacss.scss) file.</p>
			
			<h3>Breakpoints variables</h3>
			
			<p>The LESS and Sass versions of KNACSS already provides some breakpoints variables, which you can adapt to your needs:</p>
			<ul>
				<li><code>@tiny-screen : 480px;</code> // tiny screens media query (less than 480px)</li>
				<li><code>@small-screen : 768px;</code> // screens between 481px and 768px</li>
				<li><code>@medium-screen : 1024px;</code> // screens between 769px and 1024px</li>
				<li><code>@large-screen : 1280px;</code> // screens between 1025px and 1280px</li>
				<li><code>@extra-large-screen : 1600px;</code> // screens between 1281px and 1600px</li>
				<li><code>@ultra-large-screen : 1920px;</code> // screens wider than 1601px</li>
			</ul>
			
			<h3>What is done automatically ?</h3>
			
			<p>Many features and KNACSS elements are provided to automatically adapt to different screen widths:</p>
			<ul>
				<li>Every width helpers in pixels (such as <code>.w400p</code>, <code>.w600p</code>, <code>.w800p</code>,…) become fluid depending on screen size.</li>
				<li>Tables, fieldsets, <code>.mod</code>, <code>.row</code> and <code>.col</code> become classic block and display one below the other</li>
				<li>Grids with gutter and Autogrids also adjust their number of columns to the size of the screen.</li>
			</ul>
			
			<h3>RWD Helper classes</h3>
			
			<p>Many classes allow to obtain a different design depending on the screen size.</p>
			
			<p>The prefix classes for responsive web design are:</p>
			<ul>
				<li><code>.large-</code> for large screen (ex. : <code>.large-hidden</code>, <code>.large-no-float</code> , <code>.large-w33</code> , <code>.large-wauto-</code> , <code>.large-man</code>)</li>
				<li><code>.small-</code> for small screen (ex. : <code>.small-hidden</code>, <code>.small-no-float</code> , <code>.small-w33</code> , <code>.small-wauto-</code> , <code>.small-man</code>)</li>
				<li><code>.tiny-</code> for tiny screen (ex. : <code>.tiny-hidden</code>, <code>.tiny-no-float</code> , <code>.tiny-w33</code> , <code>.tiny-wauto-</code> , <code>.tiny-man</code>)</li>
			</ul>
			
		</section>

		<section id="tables">

		<h2 class="h2-like">Data Tables</h2>
		<p>KNACSS handles some basic styles for data tables, alternate styles and stripes.</p>
		<p class="warning">Note : <code>@import "_03-tables";</code> must be enabled in knacss.less (or knacss.scss) file.</p>

			<pre>&lt;table class="striped alternate" summary=""&gt;
	&lt;caption&gt;.striped .alternate data table&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th scope="col"&gt;Fruit&lt;/th&gt;
			&lt;th scope="col"&gt;Note&lt;/th&gt;
			&lt;th class="txtright" scope="col"&gt;Prix&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;Kiwi&lt;/td&gt;
			&lt;td&gt;★★★&lt;/td&gt;
			&lt;td class="txtright"&gt;13.37€&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</pre>

			<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/dkgDw">CodePen.io</a></p>
		</section>

		<section id="icons">
			<h2 class="h2-like">Icons and bullets</h2>
			<p>KNACSS offers a pack of UNICODE icons: no download, no HTTP request and fully vector.</p>
			<p class="warning">Note : <code>@import "_05-icons";</code> must be enabled in knacss.less (or knacss.scss) file.</p>

				<pre>&lt;a class="icon icon-rate" href="#"&gt;This is a .icon-rate&lt;/a&gt;
&lt;a class="icon icon-unrate" href="#"&gt;This is a .icon-unrate&lt;/a&gt;
&lt;a class="icon icon-check" href="#"&gt;This is a .icon-check&lt;/a&gt;
&lt;a class="icon icon-check after" href="#"&gt;This is a .icon-check after&lt;/a&gt;</pre>

				<p class="mbm highlight">→ Test online on <a href="http://codepen.io/raphaelgoetter/pen/uBJGl">CodePen.io</a></p>
		</section>
		
		<section id="stuffs">
			<h2 class="h2-like">Other stuffs</h2>
			<h3>Old IE support</h3>
			<p>Unless you disable the <code>@enable-ie678</code> boolean in the <code>_00-config.less</code> (or <code>_00-config.scss</code>) file, KNACSS will provide a relatively good support for old versions of Internet Explorer (IE6, IE7 and IE8), such as:</p>
			<ul>
				<li><code>box-sizing</code> support with <code>boxsizing.htc</code></li>
				<li><code>inline-block</code> fallback</li>
				<li><code>rem</code> fallback</li>
				<li>Google maps fix on IE8</li>
				<li>Grids and autogrids fallback</li>
				<li>inputs and textarea bug fixes</li>
				<li>etc.</li>
			</ul>
			<h3>Design helpers</h3>
			<p>A framework like KNACSS provides best practises, layout helpers and code snippets, but also some "visual classes" such as <code>.left</code>, <code>.prs</code>, <code>.txtright</code>, etc.</p>
			<p class="warning">Using properly a framework is not applying <strong>only</strong>
 visual classes. Begin to give sense to the main elements and choose 
"visual" reusable classes only where it is necessary, for example for 
repetitive elements (patterns).</p>
			<h4>width helpers</h4>
			<p>Here are some width helpers:</p>
			<ul>
				<li><code>.w10</code> stands for <code>width: 10%</code> (also exists <code>.w20</code>, <code>.w25</code>,… <code>.w100</code>)</li>
				<li><code>.w50p</code> stands for <code>width: 50px</code> (also exists <code>.w100p</code>, <code>.w150p</code>, <code>.w960p</code>… <code>.w1140p</code>)</li>
				<li><code>.mw960p</code> and <code>.mw1140p</code> stand for <code>max-width: 960px</code> and <code>max-width: 1140px</code></li>
				<li><code>.wauto</code> stands for <code>width: auto</code></li>
			</ul>
			<p class="warning">Note : to apply these classes, <code>@enable-helpers-width</code> must be enabled in the <code>_00-config.less</code> (or <code>_00-config.scss</code>) file.</p>
			
			<h4>margin and padding helpers</h4>
			<p>Here are some spacing helpers:</p>
			<ul>
				<li><code>.mts</code>,  <code>.mtm</code>, <code>.mtl</code> stand for <code>margin-top: @small-value</code>, <code>margin-top: @medium-value</code> and <code>margin-top: @large-value</code></li>
				<li><code>.mtn</code> stands for <code>margin-top: 0</code></li>
				<li><code>.mas</code>,  <code>.mam</code>, <code>.mal</code> stand for <code>margin: @small-value</code>, <code>margin: @medium-value</code> and <code>margin: @large-value</code></li>
				<li><code>.pts</code>,  <code>.ptm</code>, <code>.ptl</code> stand for <code>padding-top: @small-value</code>, <code>padding-top: @medium-value</code> and <code>padding-top: @large-value</code></li>
				<li><code>.ptn</code> stands for <code>padding-top: 0</code></li>
				<li><code>.pas</code>,  <code>.pam</code>, <code>.pal</code> stand for <code>padding: @small-value</code>, <code>padding: @medium-value</code> and <code>padding: @large-value</code></li>
			</ul>
			<p class="warning">Note : to apply these classes, <code>@enable-helpers-spacing</code> must be enabled in the <code>_00-config.less</code> (or <code>_00-config.scss</code>) file.</p>
		</section>

		<section id="videos">
			<h2 class="h2-like">Vidéo : KNACSS basics</h2>
			<p>Open video in fullscreen for better quality</p>
			<iframe src="http://www.dailymotion.com/embed/video/x14230g" width="480" height="270" frameborder="0"></iframe><br><a href="http://www.dailymotion.com/video/x14230g_01-knacss-basics_tech" target="_blank">01 KNACSS basics</a> <i>par <a href="http://www.dailymotion.com/Alsacreations" target="_blank">Alsacreations</a></i>

			<h2 class="h2-like">Video : beginning with Layout</h2>
			<p>Open video in fullscreen for better quality</p>
			<iframe src="http://www.dailymotion.com/embed/video/x1423e1" width="480" height="270" frameborder="0"></iframe><br><a href="http://www.dailymotion.com/video/x1423e1_02-knacss-layout-basics_tech" target="_blank">02 KNACSS Layout basics</a> <i>par <a href="http://www.dailymotion.com/Alsacreations" target="_blank">Alsacreations</a></i>

			<h2 class="h2-like">Video : CSS table layout</h2>
			<p>Open video in fullscreen for better quality</p>
			<iframe src="http://www.dailymotion.com/embed/video/x1423hr" width="480" height="270" frameborder="0"></iframe><br><a href="http://www.dailymotion.com/video/x1423hr_03-knacss-css-table-layout_tech" target="_blank">03 KNACSS CSS table layout</a> <i>par <a href="http://www.dailymotion.com/Alsacreations" target="_blank">Alsacreations</a></i>

			<h2 class="h2-like">Video : grids and gutters</h2>
			<p>Open video in fullscreen for better quality</p>
			<iframe src="http://www.dailymotion.com/embed/video/x1423kq" width="480" height="270" frameborder="0"></iframe><br><a href="http://www.dailymotion.com/video/x1423kq_04-knacss-grids_tech" target="_blank">04 KNACSS grids</a> <i>par <a href="http://www.dailymotion.com/Alsacreations" target="_blank">Alsacreations</a></i>

			<h2 class="h2-like">Video : CSS3 Flexbox layout module</h2>
			<p>Open video in fullscreen for better quality</p>
			<iframe src="http://www.dailymotion.com/embed/video/x1423mp" width="480" height="270" frameborder="0"></iframe><br><a href="http://www.dailymotion.com/video/x1423mp_05-knacss-flexbox_tech" target="_blank">05 KNACSS flexbox</a> <i>par <a href="http://www.dailymotion.com/Alsacreations" target="_blank">Alsacreations</a></i>
		</section>

		<section id="sheet">
			<h2 class="h2-like">PDF CheatSheet</h2>
			<p>Here's a (almost) complete KNACSS reminder, summarizing the classes and variables of the CSS framework <b>(click on picture to open and download the 45ko PDF)</b>&nbsp;:</p>
			<p><a href="https://knacss.com/archive/KNACSS-cheatsheet.pdf"><img src="KNACSS-Documentation_fichiers/sheet.html" alt="KNACSS cheatsheet" title="KNACSS cheatsheet (PDF 45ko)" width="583" height="799"></a></p>
		</section>

	</div> <!-- /autogrid3 -->

		<footer class="line mw960p mt2 mb2 center">
		<p>KNACSS is a tool made by <a href="">Raphaël Goetter</a> (Alsacreations) with care. Great thanx to <a href="http://hugogiraudel.com/">Hugo Giraudel</a> for translating KNACSS into english and <a href="http://www.inpixelitrust.fr/">Stéphanie Walter</a> for logo conception&nbsp;!</p>
	</footer>


</body></html>