Documentation pages 4, 5, 6 et 7
This commit is contained in:
raphaelgoettter
parent
489e363ea1
commit
0c4aa3e662
|
|
@ -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;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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 :
|
|||
</div>
|
||||
```
|
||||
|
||||
- **Avantage :**
|
||||
- **Inconvénient :**
|
||||
- **Avantage :** fluide, propre, simple
|
||||
- **Inconvénient :** compatibilité IE10 minimum
|
||||
|
||||
### Deux blocs voisins dont un fixe et un fluide
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1,38 @@
|
|||
# todo
|
||||
# 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;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1 +1,12 @@
|
|||
# todo
|
||||
# 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.
|
||||
|
|
|
|||
|
|
@ -1 +1,148 @@
|
|||
# todo
|
||||
# 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;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1 +1,118 @@
|
|||
# todo
|
||||
# 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 */
|
||||
}
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user