knacss.com

simple and lightweight CSS framework

KNACSS is a minimalist, responsive and extensible CSS framework to kick-start any professional web project no matter its size.

Designed by Alsacreations web agency and used on a daily basis in production, KNACSS relies on common best practices and experience on the topic, provides CSS reset, helpfull snippets, grids and layout tricks even on old browsers.

Just use it!

There is no need to install anything. It is no more than a CSS file you can call in the head of your document with a <link> element.

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

You can download KNACSS via the Builder, grab it from Github or install it with Bower: bower install knacss.

KNACSS contains some basic CSS rules to kick start your project, following an efficient and reusable naming convention. You might consider it as a “reset” and make it grow according to your project.
You can also tke advantage of LESS or Sass

Take a moment to read all the notes and advices (in this tutorial) before jumping on. KNACSS doesn’t always fit beginners’ needs. Remember great power comes with great responsibilities.

Some features

Soft reset

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

Box-Sizing

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 is used as the main unit for major elements font sizes.

To ease calculations, the baseline is set to 62.5% on the <html> element, which equals 10px while being fluid and adapted to rem unit. Then <body> applies the global font-size for every children (1.4em as default) :

html {
	font-size: 62.5%;
}
body {
	font-size: 1.4em; /* equiv 14px */
	line-height: 1.5; /* adapt to your design */
}

Layout snippets

KNACSS proposes a collection of snippets to ease the positioning in 3 different ways: float, table, and inline-block.
More important, the whole thing relies on two major elements: .mod (“module”) and .line boxes.

You'll need to read carefully the Tutorial in order to understand the principles.

Which other things can KNACSS do for you ?

CSS reset best practices and conventions typography positioning models advanced positioning (FlexBox) high browser support grids and gutters responsive webdesign table classes LESS version Sass version

A quick example ?

HTML code :

<div class="line">
	<span class="left mrs">...</span>
	<div class="mod">...</div>
</div>

See the Pen muxbB by Raphael Goetter (@raphaelgoetter) on CodePen

Another example ?

HTML code :

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

See the Pen KNACSS layout by Raphael Goetter (@raphaelgoetter) on CodePen

Ah, mais vous êtes français ?

KNACSS est un projet de framework CSS français. Si la langue de Shakespeare vous rebute, sachez que vous pouvez tout de même profiter d'une présentation détaillée du projet dans un article sur Alsacréations :

Découverte de KNACSS