Fonctionnalités

Conçu par l’agence web Alsacreations.fr et pensé pour être couplé avec des préprocesseurs tels que LESS ou 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 Normalize.css, célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc.

• 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 LESS et Sass

  Pensé pour être couplé avec des préprocesseurs tels que LESS ou 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 web réalisés à l’aide d'une base CSS KNACSS :

• leboncoin

  

• liberation

  

• beIN Sports

  

• roquefort-societe

  

• cncp.gouv.fr

  

• supinternet

  

voir toute la galerie →

Documentation

La documentation complète de KNACSS est hébergée sur Github.
Vous y trouverez en détail, avec codes et illustrations, les différentes sections suivantes :

1. Comment débuter avec KNACSS
2. Typographie et reset
3. Gérer les alignements de base
4. Gérer le positionnement des éléments
5. Construire des grilles de mise en page
6. Styler les tableaux
7. Styler les formulaires
8. Classes "visuelles" (marges et largeurs)
9. Responsive Webdesign
10. Styles pour l'impression
11. Styles divers (césures, Google Maps, liens d'évitement)
12. Adaptations pour WordPress

Un mémento des classes utiles

Sachez qu'un pense-bête en PDF est disponible pour vous rappeler des classes utiles de KNACSS.

Une grille vite fait bien fait ?

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 :

La même en responsive ?

Pas de problème :

<div class="grid-3-small-2-tiny-1"> <!-- 3 colonnes, puis 2, puis 1 -->
    <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 :