knacss.com

how to use the KNACSS framework ?

Table of Content

Use KNACSS wisely !

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

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

KNACSS the benefits ?

KNACSS is a minimalist, responsive and extensible CSS framework to start integrating HTML / CSS, designed by the webagency Alsacreations.fr and used daily in our productions.

Install

There is nothing to install. It is only a CSS file you can call as usual in the head of your document with a <link> element:

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

You can also build your custom KNACSS with the Builder Tool. or even install or update directly with Bower : bower install knacss.

KNACSS is a collection of ready to use styles and snippets to kick start your project. Feel free to use it as a “reset”, then make it grow to suit your needs.

Take the time to read the documentation before jumping in. Indeed, KNACSS doesn’t always suit beginners’ needs since a little things can have big consequences.

As an example, KNACSS uses border-box as a box model. This actually means something and having a basic knowledge of box sizing stuff is required to do things right.

Preprocessors (LESS, Sass)

KNACSS is initially produced from LESS files, and exists in CSS, LESS and Sass form.

CSS preprocessors like LESS and Sass are designed to make life easier during the development phase.
Some great CSS preprocessors tools are variables, nesting, mixins and other features, before generating a classic stylesheet.

Config variables

Configuration variables (found in the 00-config.less file for LESS), allowing to quickly adapt a new web project are quite numerous, see for yourself:

// LESS values : adapt them to your design
@basefont : 14px; // if "14px" then 1em = 14px
@lh : 1.5; // equiv line-height 1.5em
@h1-size : 32px; // equiv "32px"
...
@basecolor : #000; // text color on body
@basebg : #fff; // body background color
@basecolor-link : #333; // primary links color;
@basecolor-link-hover : #000; // primary hovered/focused links color;
@smallvalue : 10px; // small value for margins / paddings
@mediumvalue : 20px; // medium value for margins / paddings
@largevalue : 30px; // large value for margins / paddings
@tinyscreen : 480px; // tiny screens media query
@smallscreen : 768px; // small screens media query
@largescreen : 1280px; // large screens media query
@gutter : 20px; // gutter value (%, px, em, rem, etc) for grid layouts
@fontstack1 : Helvetica, Arial, sans-serif; // common font
@fontstack2 : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
@fontstack3 : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack

Vendor Prefixes

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

In most cases, text content is meant to fit in a <p> tags.

For accessibility concerns, em is used as the main unit for font-size.

To avoid cascading issues (em recursively inherits font-size from parent), only low placed elements are given a em-based font-size (p, li, td, th and textarea).

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

To put it simple:

Pro tip : you should avoid setting em-based font-size to intermediate elements; keep it for low placed elements.

By the way, here are some alternate font-sizes :

Layout basics

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.

Lines and Mods

Depending on your choice regarding the way of positioning your elements (see paragraph above), the naming convention will be slightly different:

Exemple :

HTML code :

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

Result :

demo 0

→ Test online with CodePen

Floats

.left and .right classes do no more than a float: left or float: right.

Some elements are configured to "contain floating", they will spill over (see "lines and boxes")

.mod are set to "not flow around floating", they always appear to the left or right

Example of floats :

HTML code :

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

Result :

demo 1

→ Test online with CodePen

Example of .left class :

HTML :

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

Result :

demo 2

→ Test online with CodePen

Display: table

For modern browsers, there is another way to position elements: display: table. This is an easy way to have same height columns, vertical centering, and much more.

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

Example of display table :

HTML :

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

Result :

demo 3

→ Test online with CodePen

Inline-block

You also can use a class meant 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 of .inbl :

HTML :

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

Result :

demo 4

→ Test online with CodePen

Flexbox

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

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

Example of .flex :

HTML :

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

Result :

demo flex

→ Test online with CodePen

Grids with gutters

Equal width grids

Grids are automagically set to a line with class of .grid2, .grid3, …, grid12. Children are floated, spaced by your chosen gutter (%, px, em, or rem) and with a %-based width.

Overall container must be a .grid element. You can manage as many "grid-cell" childrens as you like !

Two blocks with gutter

HTML :

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

Result :

demo 5

→ Test online with CodePen

Three blocks with gutter

HTML :

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

Result :

demo 6

Unequal grids

Distribution to 2/3 and 1/3 with gutter

HTML :

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

Result :

demo 7

→ Test online with CodePen

Distribution to 1/4 and 3/4 with gutter

HTML :

<div class="grid">
	<div class="grid1-3">
		<div>...</div>
		<div>...</div>
	</div>
</div>

Result :

demo 8

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.

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

Container must has to 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 !

Example of a .autogrid3

HTML :

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

Various results :

autogrids

→ Test online with CodePen

Data Tables

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

HTML :

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

Result :

tables

→ Test online with CodePen

Icons and bullets

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

HTML :

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

Result :

icons

→ Test online with CodePen

Vidéo : KNACSS basics

Open video in fullscreen for better quality


01 KNACSS basics par Alsacreations

Video : beginning with Layout

Open video in fullscreen for better quality


02 KNACSS Layout basics par Alsacreations

Video : CSS table layout

Open video in fullscreen for better quality


03 KNACSS CSS table layout par Alsacreations

Video : grids and gutters

Open video in fullscreen for better quality


04 KNACSS grids par Alsacreations

Video : CSS3 Flexbox layout module

Open video in fullscreen for better quality


05 KNACSS flexbox par Alsacreations

PDF CheatSheet

Here's a (almost) complete KNACSS reminder, summarizing the classes and variables of the CSS framework (click on picture to open and download the 45ko PDF) :

KNACSS cheatsheet