dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
feuille de styles CSS sur-vitaminée
351 commits 2 branches 63 tags 2.8 MiB
CSS 69.5%
SCSS 29.2%
JavaScript 1.3%
Find a file
Damien d4d08a5ef4 Ajout des classes "Margin" et "Padding" dans les parties responsives. 
- Large
 - Medium
 - Small
 - Tiny
2015-09-17 21:25:28 +02:00
css Ajout des classes "Margin" et "Padding" dans les parties responsives. 2015-09-17 21:25:28 +02:00
doc Update 00-commencer.md 2015-08-27 20:19:00 +02:00
less Ajout des classes "Margin" et "Padding" dans les parties responsives. 2015-09-17 21:25:28 +02:00
sass Ajout des classes "Margin" et "Padding" dans les parties responsives. 2015-09-17 21:25:28 +02:00
.editorconfig tabs to spaces + editorconfig 2015-07-01 13:47:48 +02:00
.gitattributes .git files 2013-03-31 21:31:04 +02:00
.gitignore changelog v4.1.4 (14 avril 2015) 2015-04-14 10:04:17 +02:00
bower.json Proposition de résolution #158 2015-09-05 14:17:31 +02:00
changelog.md modifs visually hidden 2015-08-27 11:11:40 +02:00
gulpfile.js erreur de compil due à sourcemap 2015-07-08 09:53:24 +02:00
package.json version 4.3.4 2015-08-27 11:24:56 +02:00
README.md Update README.md 2015-09-09 12:44:35 +02:00

README.md

KNACSS

http://www.knacss.com

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 (reponsive). Le tout automatiquement !

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.

Installation

La version courte est "il n'y a rien à installer".

Selon votre environnement de travail vous suffit de récupérer la feuille de styles :

Les versions LESS et Sass seront bien évidemment plus malléables grâce à l'apport de variables et fonctions.

À noter que KNACSS est basé sur un socle Normalize.css, célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc.

Usage

KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos goûts), qu'il vous suffit d'ajouter à votre page HTML :

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

Il est également possible de l'installer (toutes versions) via Bower : bower install knacss

Compatibilité

KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE8 inclus.

Seules exceptions :

  • les positionnements avancés à base de Flexbox (IE10+ minimum), c'est à dire toutes les classes débutant par .flex-
  • les grilles de mise en page, également basées sur flexbox (IE10, Android 4.4+), c'est à dire toutes les classes débutant par .grid-. Note : une alternative, basée sur inline-block est cependant proposée automatiquement pour les anciens navigateurs (IE8, Android 2).

Documentation

KNACSS se veut être un outil simple (contrairement aux usines à gaz que sont Bootstrap ou Foundation), mais évolutif. La contrepartie est que cela nécessite de votre part de bonnes connaissances en CSS et un petit effort de compréhension et de d'apprentissage des mécanismes de l'outil.

Je vous invite vivement à parcourir la documentation avant de vous jeter sur KNACSS.

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

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

Préprocesseurs

KNACSS est conçu et pensé pour être adapté aux préprocesseurs que sont LESS et Sass. Nous employons LESS en interne, nos fichiers de travail sont donc des .less et non des .css (cela fonctionne aussi avec Sass).

Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un fichier de configuration contenant toutes les variables du projet est intégré. Libre à vous de le modifier selon les contraintes de votre projet.

Attention, si vous importez KNACSS automatiquement via Bower par exemple (dans un dossier vendor), ce fichier de configuration risque d'être écrasé à chaque mise à jour de KNACSS. Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de vendor.

Préfixes navigateurs

Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (-webkit-, -moz-, -ms-, ...) pour être certain que les propriétés CSS fonctionneront partout.

Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, vous n'avez donc pas à vous en soucier (paramètres de Autoprefixer : "last 2 versions").

Par contre, dans les versions LESS et Sass de KNACSS, les préfixes n'apparaissent pas pour ne pas polluer la lecture du fichier de travail. Il vous sera donc nécessaire de les ajouter, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont autoprefixer ou pleeease.

Liens utiles