From 0c4aa3e662a0c03ef0a7920a7f4f6436a4ba62fb Mon Sep 17 00:00:00 2001 From: raphaelgoettter Date: Mon, 9 Mar 2015 16:05:06 +0100 Subject: [PATCH] Documentation pages 4, 5, 6 et 7 --- doc/01-typo-et-reset.md | 18 +++- doc/02b-layout-positionnement.md | 6 +- doc/04-tableaux.md | 39 +++++++- doc/05-formulaires.md | 13 ++- doc/06-helpers.md | 149 ++++++++++++++++++++++++++++++- doc/07-responsive.md | 119 +++++++++++++++++++++++- 6 files changed, 336 insertions(+), 8 deletions(-) diff --git a/doc/01-typo-et-reset.md b/doc/01-typo-et-reset.md index 2a0e90e..89789e7 100644 --- a/doc/01-typo-et-reset.md +++ b/doc/01-typo-et-reset.md @@ -9,10 +9,26 @@ En résumé, voilà les bases typographiques de KNACSS : - taille de base des contenus de 1.4em (soit un équivalent de 14px) modifiable dans la configuration LESS / Sass - tailles de polices définies pour les niveaux de titres et des modificateurs tels que `.small`, `.smaller`, `.big`, `.bigger`, etc. -# Reset "light" +## Reset "light" Le reset de KNACSS est volotairement minimal, le but n'étant pas de tout mettre à zéro pour le redéfinir par la suite. La feuille de style débute ainsi 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. S'en suivent quelques mises à zéro de marges, alignements par défaut des images, et quelques spécificités sur des élements tels que `blockquote`, `figure`, `canvas`, `video` ou autres `svg`. + +## Masquage + +À noter que KNACSS prévoit une classe dédiée aux éléments devant être masqués sur écrans graphiques tout en demeurant accessibles aux assistances techniques. Il s'agit de la classe `.visually-hidden`, où le choix des hideux mots-clés `!important` se justifie : + +```css +.visually-hidden { + position: absolute !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(1px, 1px, 1px, 1px) !important; +} +``` diff --git a/doc/02b-layout-positionnement.md b/doc/02b-layout-positionnement.md index cf4f6b3..9bdf7ff 100644 --- a/doc/02b-layout-positionnement.md +++ b/doc/02b-layout-positionnement.md @@ -66,7 +66,7 @@ HTML : ``` - **Avantage :** positionnement dans le flux, compatible dès IE8 -- **Inconvénient :** +- **Inconvénient :** Le positionnement tabulaire observe [des règles parfois complexes](http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html) et surprenantes pour les non habitués. #### flexbox @@ -78,8 +78,8 @@ HTML : ``` -- **Avantage :** -- **Inconvénient :** +- **Avantage :** fluide, propre, simple +- **Inconvénient :** compatibilité IE10 minimum ### Deux blocs voisins dont un fixe et un fluide diff --git a/doc/04-tableaux.md b/doc/04-tableaux.md index 99f1089..547e0c4 100644 --- a/doc/04-tableaux.md +++ b/doc/04-tableaux.md @@ -1 +1,38 @@ -# todo \ No newline at end of file +# Tableaux de données + +KNACSS propose une feuille de style minimale appliquée aux tableaux de données ainsi qu'aus éléments disposant d'une classe `.table`. + +Pour débuter, KNACSS impose un modèle d'affichage fixé à tous les tableaux via `table-layout: fixed;`. Ainsi, ce ne sera plus le contenu qui décidera de la largeur des cellules, mais ce que vous aurez spécifié dans les tailles CSS. + +```css +table, +.table { + width: 100%; + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; + border: 1px solid #ccc; +} +.table { + display: table; +} +table#recaptcha_table, +table.table-auto { + table-layout: auto; +} +caption { + padding: 10px; + color: #555; + font-style: italic; +} +td, +th { + padding: 0.3em 0.8em; + border: 1px #aaa dotted; + vertical-align: top; + min-width: 20px; + cursor: default; + text-align: left; +} +``` diff --git a/doc/05-formulaires.md b/doc/05-formulaires.md index 99f1089..e74af1e 100644 --- a/doc/05-formulaires.md +++ b/doc/05-formulaires.md @@ -1 +1,12 @@ -# todo \ No newline at end of file +# Formulaires + +Afin d'harmoniser l'affichage par défaut des éléments de formulaires au sein de l'ensemble des navigateurs, un certain nombre de styles est prévu dans KNACSS. +Pour constituer cette base de "bonnes pratiques", les crédits reviennent notamment aux ressources suivantes : + +- [HTML5boilerplate](https://html5boilerplate.com/), +- [github.com/nathansmith/formalize](http://github.com/nathansmith/formalize), +- [sitepen.com](http://www.sitepen.com) + +Le reset "formulaire" de KNACSS tient compte des éléments suivants : `form`, `input`, `fieldset`, `button`, `select`, `label`, `legend`, `textarea`, etc. + +Notez également qu'en attribuant la classe `.btn` à un élément, vous le considérerez (et stylerez) tel un bouton de formulaire. diff --git a/doc/06-helpers.md b/doc/06-helpers.md index 99f1089..4214e18 100644 --- a/doc/06-helpers.md +++ b/doc/06-helpers.md @@ -1 +1,148 @@ -# todo \ No newline at end of file +# Helpers + +Les "Helpers" sont des classes purement visuelles et utilitaires (non "sémantiques"), pas très jolie mais rudement pratiques en production pour alléger vos feuilles de styles. + +**Attention toutefois !** Ce type de classes conduit fréquemment [à des abus au sein de votre code HTML](http://blog.goetter.fr/2014/11/10/bien-utiliser-un-framework-css/). + +Par exemple, Si vous avez 20 images au comportement identique dans la page, ne les affublez pas de classes visuelles multiples telles que `img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn"` mais optez plutôt pour une classe personnalisée : `img class="media"` par exemple. + +**Méthode :** Limitez-vous à 4 noms de classes au grand maximum par élément HTML. Si vous pensez qu’il vous en faut davantage, il est temps d’envisager une classe personnalisée, ou de profiter des pré-processeurs CSS. + +_Les valeurs de helpers peuvent être modifiées au sein du fichier de configuration LESS / Sass._ + +## les Helpers de largeur + +Largeurs fluides (en pourcentage) : + +```css +.w10 { + width: 10%; +} +.w20 { + width: 20%; +} +.w25 { + width: 25%; +} +... +.w100 { + width: 100%; +} + +``` + +Largeurs fixes (en pixel) : + +```css +.w50p { + width: 50px; +} +.w100p { + width: 100px; +} +.w150p { + width: 150px; +} +... +.w960p { + width: 960px; +} +.w1140p { + width: 1140px; +} + +``` + +Largeurs spéciales : + +```css +.mw960p { + max-width: 960px; +} +.mw1140p { + max-width: 1140px; +} +.wauto { + width: auto; +} +``` + + +## les Helpers d'espacement + +Les herpers d'espacement comportent des classes dédiées aux marges externes (margin) et aux marges internes (padding). + +Leur nommage est assez intuitif : + +- p,m = padding, margin +- a,t,r,b,l = all, top, right, bottom,left +- s,m,l,n (ou 0) = small, medium, large, none (ou 0) + +Exemples : + +- `.prs` signifie "padding-right small" (où "small" est défini dans votre fichier de configuration, par défaut 5px) +- `.man` signifie "margin all none" (fonctionne aussi avec la syntaxe `.ma0`) + +### les marges externes (margin) + +```css +.man, +.ma0 { + margin: 0; +} +.mas { + margin: 10px; +} +.mam { + margin: 20px; +} +.mal { + margin: 40px; +} +.mtn, +.mt0 { + margin-top: 0; +} +.mts { + margin-top: 10px; +} +.mtm { + margin-top: 20px; +} +.mtl { + margin-top: 40px; +} +... +``` + +### les marges internes (padding) + +```css +.ptn, +.pt0 { + padding-top: 0; +} +.pts { + padding-top: 10px; +} +.ptm { + padding-top: 20px; +} +.ptl { + padding-top: 40px; +} +.prn, +.pr0 { + padding-right: 0; +} +.prs { + padding-right: 10px; +} +.prm { + padding-right: 20px; +} +.prl { + padding-right: 40px; +} +... +``` diff --git a/doc/07-responsive.md b/doc/07-responsive.md index 99f1089..170a3c0 100644 --- a/doc/07-responsive.md +++ b/doc/07-responsive.md @@ -1 +1,118 @@ -# todo \ No newline at end of file +# Responsive Webdesign + +## Points de rupture + +Par défaut, KNACSS tient compte des valeurs de points de rupture suivants : + +- "tiny" : correspond à une fenêtre de 480px ou moins +- "small" : correspond à une fenêtre entre 481px et 768px inclus +- "medium"correspond à une fenêtre entre 769px et 1024px inclus +- "large"correspond à une fenêtre entre 1025px et 1280px inclus +- "extra-large"correspond à une fenêtre entre 1281px et 1600px inclus +- "ultra-large"correspond à une fenêtre à partir de 1601px + +_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._ + +## Préfixes de classe + +Pour les points de rupture "large", "medium", "small" et "tiny", des préfixes de classes ont été introduits dans KNACSS : + +- `.large-*` : préfixe KNACSS destiné aux styles sur écrans larges +- `.medium-*` : préfixe KNACSS destiné aux styles sur écrans medium +- `.small-*` : préfixe KNACSS destiné aux styles sur écrans small +- `.tiny-*` : préfixe KNACSS destiné aux styles sur écrans tiny + +### Exemple : le point de rupture "tiny" + +Voici quelques-unes des classes dédiées aux écrans de très petite taille… Le mot-clé `!important` est nécessaire pour être certain que les styles écrasent bien les styles appliqués par défaut. + +Masquage / visibilité : + +```css +.tiny-hidden { + display: none !important; +} +.tiny-visible { + display: block !important; +} +``` + +Modèles d'affichage : + +```css +.tiny-no-float { + float: none; +} +.tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; +} +.tiny-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; +} +.tiny-col { + display: table-cell !important; + vertical-align: top !important; +} +``` + +Largeurs : + +```css +.tiny-w25 { + width: 25% !important; +} +.tiny-w33 { + width: 33.3333% !important; +} +.tiny-w50 { + width: 50% !important; +} +.tiny-w66 { + width: 66.6666% !important; +} +.tiny-w75 { + width: 75% !important; +} +.tiny-w100, +.tiny-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; +} +``` + +Marges : + +```css +.tiny-man, + .tiny-ma0 { + margin: 0 !important; +} +.tiny-pan, +.tiny-pa0 { + padding: 0 !important; +} +``` + + +## Règles de styles particulières + +```css +@media (min-width: 1025px) { + /* rules for big resources and big screens like: background-images, font-faces, etc. */ +} +``` + +```css +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { + /* style adjustments for high density devices */ +} +```