simple and lightweight CSS framework
MILF !
(Made In La France)
KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and my experience on the topic.
Designed by Alsacreations agency and used on a daily basis in production, KNACSS is not only a lightweight documented framework but also a CSS reset, adapted to every project no matter its size.
It handles basic elements, box sizing, margins, floats, simple and complex aligns, positioning, layout grids, gutters, old IE fallbacks and last but not least responsiveness, everything automagically !
Both minimal and clean, far away from usual Rube Goldberg machines, KNACSS is meant to be customized as you wish according to your project.
KNACSS focuses on reusability and semantic CSS class names, following the path of Object Oriented CSS (OOCSS).
KNACSS doesn’t forget accessibility and responsive web design thanks to fluid grid layout.
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">
This file contains some basic CSS rules to kick start your project, following an efficient and reusable naming convention. You might consider KNACSS as a “reset” and make it grow according to your project.
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.
HTML code :
<div class="line"> <span class="left mrs">span class="left mrs"</span> <div class="mod">div class="mod" <br> Lorem Elsass ipsum réchime amet non Choucroute knack tchao bissame hopla. …</div> </div>
Obtained result :
→ Test this example online on my CodePen sandbox
HTML code :
<section class="line w600p grid3"> <div>Lorem Elsass ipsum réchime amet non Choucroute</div> <div>Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ? Yeuh non che suis au réchime, je ne mange plus que des Grumbeere</div> <div>Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. <br> Tiens, un Picon sur le comptoir. Hopla, KNACSS !</div> </section>
Obtained result :
→ Test this example online on my CodePen sandbox
KNACSS is provided free version completely customizable (choose your modules), but also variants LESS or Sass.
To better soak tricks and subtleties of mini KNACSS framework, a page of CSS is commented and documented at your disposal.
Not sure I understand the principle ? I strongly suggest that you work through the tutorial explaining in detail and with examples the use of KNACSS.
KNACSS (pronounced “knakees”) has multiple origins. First of all, it’s a short and CSS-containing domain name. Good start.
Then, the word “knacks” design Strasbourg’s sausages in France, which gives this humourous thing I like to have in every Alsacreations project.
I recently made a website dedicated to gather sites built (at least partially) upon KNACSS. You will find them in a gallery linking to the original sites.
Please, have a look at these sites :
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 en version PDF sur Slideshare :