Un framework CSS simple et léger

KNACSS, c’est un peu comme une feuille de style CSS « reset » sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign).

KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d’éléments, les grilles de mise en page, dans l’esprit d’être adapté à toutes les tailles d’écran (responsive). Le tout automatiquement, en l'appliquant simplement sur votre structure HTML.

KNACSS est distribué librement sur Github sous licence WTFPL, toutes contributions sont bienvenues.

Juste une grille ? Contentez-vous de Grillade, 3ko seulement !

Fonctionnalités

Conçu par l’agence web Alsacreations.fr et pensé pour être couplé avec des préprocesseurs tels que Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projets web quel que soit son type ou son envergure.

Reset soft

Le reset de KNACSS est volontairement minimal et basé sur un socle Reboot, célèbre - et éprouvé - reset CSS employé sur Bootstrap.

Typographie

Accessible avant tout, KNACSS propose une gamme de tailles de polices d’unités fluides (em, rem) plutôt que le pixel, figé et non malléable.

Box-sizing

KNACSS débute par une variante de l’incontournable * {box-sizing: border-box} afin d’imposer le très pratique modèle de boîte CSS3 à tous les éléments du document.

Grilles de mise en forme

KNACSS intègre des modèles de grilles simples mais suffisants : colonnes égales, colonnes inégales, gouttière, etc. sont prévues et très intuitives.

Compatible Sass

Pensé pour être couplé avec des préprocesseurs tels que Sass, KNACSS prévoit un fichier de configuration avec toutes vos variables de projet.

Et bien plus…

- Responsive webdesign
- Positionnements avancés (Flexbox)
- Classes utilitaires
- Design de tableaux et formulaires
- Intégration WordPress
- Feuille de style print
- etc.

« Made with » KNACSS

Voici un petit échantillon de sites webb réalisés à l’aide d’une base CSS KNACSS :

Voir toute la galerie

Un mémento PDF et une documentation

Sachez qu'un pense-bête en PDF est disponible pour vous rappeler des classes utiles de KNACSS, et que vous trouverez une Documentation en ligne à tester.

Grillade, la grille de KNACSS !

Grillade est le système de grille de mise en page de KNACSS bâti pour les navigateurs modernes. Il peut être utilisé de manière autonome, ou intégré (par défaut) à KNACSS.

Prévu pour combler les principaux besoin d'une grille, Grillade se veut très léger et bien loin des gros frameworks complets tels que Bootstrap.

Voici un exemple de code permettant d'obtenir une grille simple de 3 colonnes :

<div class="grid-3"> <!-- parent div (ou autre) de 3 colonnes -->
  <div>un div ou n'importe quoi d'autre</div>
  <div>un 2e div ou n'importe quoi d'autre</div>
  <div>un 3e div ou n'importe quoi d'autre</div>
</div>

Le résultat :

un div ou n'importe quoi d'autre
un 2e div ou n'importe quoi d'autre
un 3e div ou n'importe quoi d'autre

N'hésitez pas à lire la documentation pour mieux comprendre comment fonctionne cet outil.

À propos de KNACSS

KNACSS est un projet fifou conçu par Raphaël, Rodolphe, Laurène, Philippe, Olivier d'Alsacréations.

Alsacréations est une innovante agence web alsacienne créée en 2006 qui répond à tous types de projets (développement, intégration, accessibilité, mobilité).

knacss-197 Created with Sketch. 002-download Created with Sketch.