KNACSS Documentation

First of all

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.

very light
no JavaScript
compatible with all browsers (including IE6 and IE7)
no useless and obstrusive design on elements !

Which version should you chose ?

At this time, KNACSS Builder propose to download three different versions, each of them are free and under WTFPL licence:

Basic CSS version
LESS version
Sass version

Note: you can also download the latest version directly with Bower: bower install knacss.

Basic CSS version

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.

The classic CSS version is a minified CSS files that provides all necessary features: soft reset, typography, positionning, grids, responsive, navigation, tables, icons, etc.

Just link it in your project:

<link rel="stylesheet" href="knacss.css" media="all">

And voilà, you're ready to begin!

Preprocessors version

If you're used to deal with CSS preprocessors, your best choice is to install the LESS or Sass version of KNACSS.

The features proposed in the preprocessor versions of KNACSS are:

The ability to import (or not) each external file: grids, responsive, navigation, tables, icons, etc.
The benefits of project variables which you can find in a whole config file: font sizes, font stacks, colors, backgrounds, breakpoints, etc.
The possibility to enable or disable some feature booleans: old IE support, Google maps support, design helpers support, base styling, etc.

Preprocessor versions of KNACSS are far more flexible and scalable than the basic CSS one.

If you use the LESS version know that all the properties are declared without vendor prefixes (-webkit-,-moz-,-ms-,…), to gain clarity, and length of initial code.

You will certainely need to add these vendor prefixes yourself (this is usually done automatically today with Autoprefixer, Mixture, Prepros, Grunt, etc.).

Soft Reset

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

One important part is that KNACSS use the usefull box-sizing: border-box model to ease our life when dealing with paddings and borders ; the exact size of all elements will now correspond to width property (and not width + padding + border anymore) :

* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

Typography

For accessibility concerns, em and rem fluid units are used for font-size.

To ease calculations, the root element (<html>) is set to 62.5% on the <html> element, which equals 10px while being fluid.

Usual HTML elements will be softly designed:

headings (h1,… h6)
paragraphs (p)
lists (ul, ol, dl)
td, th, label, textarea, caption, details, figure, etc.

Codes, marks and quotations

If you haven't disabled the @enable-styling boolean in the _00-config.less (or _00-config.scss) file, some basic styles will be added on these elements: code, pre, kbd, mark, sub, sup, q.

Text positionning

Use .txtleft, .txtright or .txtcenter to horizontaly align contents and pictures.

Exemple :

<div class="w80 center txtright mtl">…</div>

→ Test online on CodePen.io

Layout with KNACSS

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.

Basics

The global rules are very simple:

Use .center to horizontaly center a block element.
Use .start to left align a block element. You can also chose .left but this choice will be less scalable.
Use .end (or .right) to right align a block element.

Example :

<div class="line">
	<img class="start" src="..." alt="...">
	<div class="mod">…</div>
</div>

→ Test online on CodePen.io

Lines and Mods

Two kinds of elements classes will be very usefull in KNACSS: .mod and .line.

A .mod (“module”) element gains "Block Formating Context", sort of superpowers (contains floats, do not flow around floats, has no margin collapsing, etc.)
.line elements are always meant to be stacked below other elements and they always contain floats too.

Example:

<div class="line">
	<div class="mod left w33">...</div>
	<div class="mod left w33">...</div>
	<div class="mod left w33">...</div>
</div>

→ Test online on CodePen.io

Table-cells

Use KNACSS table classes when you need equal height columns, simple vertical alignments or easy layouts.

To enable it, you only have to use .row for rows and .col for columns.

Example:

<div class="row">
	<div class="col w33">...</div>
	<div class="col w20">...</div>
	<div class="col">...</div>
</div>

→ Test online on CodePen.io

Inline-blocks

Use KNACSS inline-block classes when you need to display elements one next to the other while being sizable: .inbl (inline-block).

There is a CSS hack to enable this behaviour on IE6 and IE7.

Example:

<div class="line">
	<div class="inbl w33">...</div>
	<div class="inbl w50">...</div>
</div>

→ Test online on CodePen.io

Flexbox

Flexbox layout module is a very powerfull tool especially for easily reordering elements.

.flex on a parent creates a flexbox context for direct children
.flex-h and .flex-v on parent for horizontal and vertical direction
.flex-start, .flex-mid or .flex-end on a child to reorder it among it's brothers

flexbox isn't supported on <IE10, so use it preferably for modifying layouts on smartphones and tablets.

Example:

<div class="flex flex-h">
	<div>first block</div>
	<div class="flex-fluid">second block</div>
	<div class="flex-start">third block</div>
</div>

→ Test online on CodePen.io

Note : if you want to use Flexbox, the file@import "_07-flexbox"; has to be enabled in knacss.less (or knacss.scss) file.

Grids in KNACSS

KNACSS offers some very light, but usefull, grid systems.

Note : @import "_02-grids"; must be enabled in knacss.less (or knacss.scss) file.

Grids with gutters

Creating Grids with KNACSS is simple: just name your parent with a .grid2, .grid3, …, grid12 class.
Direct children will automagically become inline-block elements, spaced by your chosen gutter (%, px, em, or rem) and with a %-based width.

There has to be an overall container, which must be a .grid element. You can manage as many "grid-cell" childrens as you like !

Example:

<div class="grid">
	<div class="grid3">
		<div>...</div>
		<div>...</div>
		<div>...</div>
	</div>
</div>

→ Test online on CodePen.io

Unequal grids

You can also manage unequal grids in KNACSS, like a distribution to 2/3 and 1/3 with gutter:

<div class="grid">
	<div class="grid2-1">
		<div>...</div>
		<div>...</div>
	</div>
</div>

→ Test online on CodePen.io

The helper classes for unequal grids are:

.grid2-1: distribution to 2/3 and 1/3
.grid1-2: distribution to 1/3 and 2/3
.grid3-1: distribution to 3/4 and 1/4
.grid1-3: distribution to 1/4 and 3/4

Autogrids

"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.

You can not decide the value of the gutter in an Autogrid layout model.

Parent must be a .autogrid2 or .autogrid3… .autogrid12 element. You can manage as many autogrids childrens as you like.

Autogrids childrens will display as inline-blocks, be justified in their container, and get an automatic %-based width.

An autogrid layout model will automatically adapt itself responsively to screen width changes !

<div class="autogrid3">  <!-- 3 columns  -->
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
  <div>lorem ipsum</div>
</div>

→ Test online with CodePen

Responsive web design

KNACSS is built for Responsive web design projetcs and handles many features for this specific task.

Note : to apply Responsive helpers in KNACSS, @import "_06-rwd"; must be enabled in knacss.less (or knacss.scss) file.

Breakpoints variables

The LESS and Sass versions of KNACSS already provides some breakpoints variables, which you can adapt to your needs:

@tiny-screen : 480px; // tiny screens media query (less than 480px)
@small-screen : 768px; // screens between 481px and 768px
@medium-screen : 1024px; // screens between 769px and 1024px
@large-screen : 1280px; // screens between 1025px and 1280px
@extra-large-screen : 1600px; // screens between 1281px and 1600px
@ultra-large-screen : 1920px; // screens wider than 1601px

What is done automatically ?

Many features and KNACSS elements are provided to automatically adapt to different screen widths:

Every width helpers in pixels (such as .w400p, .w600p, .w800p,…) become fluid depending on screen size.
Tables, fieldsets, .mod, .row and .col become classic block and display one below the other
Grids with gutter and Autogrids also adjust their number of columns to the size of the screen.

RWD Helper classes

Many classes allow to obtain a different design depending on the screen size.

The prefix classes for responsive web design are:

.large- for large screen (ex. : .large-hidden, .large-no-float , .large-w33 , .large-wauto- , .large-man)
.small- for small screen (ex. : .small-hidden, .small-no-float , .small-w33 , .small-wauto- , .small-man)
.tiny- for tiny screen (ex. : .tiny-hidden, .tiny-no-float , .tiny-w33 , .tiny-wauto- , .tiny-man)

Data Tables

KNACSS handles some basic styles for data tables, alternate styles and stripes.

Note : @import "_03-tables"; must be enabled in knacss.less (or knacss.scss) file.

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

→ Test online on CodePen.io

Icons and bullets

KNACSS offers a pack of UNICODE icons: no download, no HTTP request and fully vector.

Note : @import "_05-icons"; must be enabled in knacss.less (or knacss.scss) file.

<a class="icon icon-rate" href="#">This is a .icon-rate</a>
<a class="icon icon-unrate" href="#">This is a .icon-unrate</a>
<a class="icon icon-check" href="#">This is a .icon-check</a>
<a class="icon icon-check after" href="#">This is a .icon-check after</a>

→ Test online on CodePen.io

Other stuffs

Old IE support

Unless you disable the @enable-ie678 boolean in the _00-config.less (or _00-config.scss) file, KNACSS will provide a relatively good support for old versions of Internet Explorer (IE6, IE7 and IE8), such as:

box-sizing support with boxsizing.htc
inline-block fallback
rem fallback
Google maps fix on IE8
Grids and autogrids fallback
inputs and textarea bug fixes
etc.

Design helpers

A framework like KNACSS provides best practises, layout helpers and code snippets, but also some "visual classes" such as .left, .prs, .txtright, etc.

Using properly a framework is not applying only 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).

width helpers

Here are some width helpers:

.w10 stands for width: 10% (also exists .w20, .w25,… .w100)
.w50p stands for width: 50px (also exists .w100p, .w150p, .w960p… .w1140p)
.mw960p and .mw1140p stand for max-width: 960px and max-width: 1140px
.wauto stands for width: auto

Note : to apply these classes, @enable-helpers-width must be enabled in the _00-config.less (or _00-config.scss) file.

margin and padding helpers

Here are some spacing helpers:

.mts, .mtm, .mtl stand for margin-top: @small-value, margin-top: @medium-value and margin-top: @large-value
.mtn stands for margin-top: 0
.mas, .mam, .mal stand for margin: @small-value, margin: @medium-value and margin: @large-value
.pts, .ptm, .ptl stand for padding-top: @small-value, padding-top: @medium-value and padding-top: @large-value
.ptn stands for padding-top: 0
.pas, .pam, .pal stand for padding: @small-value, padding: @medium-value and padding: @large-value

Note : to apply these classes, @enable-helpers-spacing must be enabled in the _00-config.less (or _00-config.scss) file.