Tu vois Bootstrap ? Bah, c'est pas ça.

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

Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.(v8)
Les deux projets sont à présent complètement séparés. Il n'y a aucune rétro-compatibilité ni historique. KNACSS (ancienne version v7) n'est plus mis à jour mais reste disponible.

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

KNACSSGithub Lire la documentation

Dernière version majeure :
v8.0 - décembre 2020
Notes de version

Juste une grille ? Contentez-vous de Grillade !

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 permet d'harmoniser l'apparence des éléments HTML sur l'ensemble des navigateurs.

Accessibilité

Accessible avant tout, KNACSS propose une panoplie de styles dédiés aux assistances techniques ainsi qu'une gamme d'unités fluides (em, rem, vw).

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

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

Sass / Tailwind

Dans la logique de Tailwind, et pensé pour être couplé avec le préprocesseur Sass, KNACSS prévoit un fichier de configuration avec toutes vos variables de projet.

Et bien plus…

- Responsive webdesign
- Positionnements avancés (Flexbox, Grid Layout)
- Classes utilitaires
- Design de tableaux et formulaires
- Feuille de style print
- etc.

« Made with » KNACSS

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

Voir toute la galerie

Une documentation à jour

Sachez qu'une Documentation en ligne est disponible pour vous rappeler des classes utiles de KNACSS.

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 grid-cols-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.