mise à jour de la documentation
This commit is contained in:
Raphael Goetter
parent
8b84456527
commit
1be013b355
9 changed files with 177 additions and 408 deletions
25
README.md
25
README.md
|
|
@ -28,12 +28,12 @@ KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos go
|
|||
Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère.
|
||||
Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu :
|
||||
|
||||
```
|
||||
```HTML
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vive les knack!</title>
|
||||
<title>Vive les knacks!</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="css/knacss.css">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
|
|
@ -48,8 +48,8 @@ Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feui
|
|||
|
||||
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
|
||||
|
||||
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](https://github.com/raphaelgoetter/KNACSS/blob/master/sass/_config-variables.scss) contenant toutes les variables du projet est intégré.
|
||||
Libre à vous de le modifier selon les contraintes de votre projet.
|
||||
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 [dossier de configuration](https://github.com/alsacreations/KNACSS/tree/v6/sass/_config) contenant toutes les variables du projet, les breakpoints et les mixins est intégré.
|
||||
Libre à vous de modifier ces fichiers selon les contraintes de votre projet.
|
||||
|
||||
La version Sass, à compiler par vos soins, sera bien évidemment plus malléable grâce à l'apport de variables et fonctions.
|
||||
Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, WordPress, classes utilitaires, etc.).
|
||||
|
|
@ -71,7 +71,7 @@ Que vous ayez opté pour la version CSS simple ou la version Sass, il est viveme
|
|||
Sachez qu'un [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf) et un [**Guide de styles**](http://codepen.io/raphaelgoetter/full/LNwOjz/) sont également disponibles pour vous souvenir des classes utiles de KNACSS.
|
||||
|
||||
Dans le cas d'un usage via Sass, vos deux fichiers de travail principaux seront :
|
||||
- le fichier `sass/_config-variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||
- le fichier `sass/_config/_variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||
- le fichier `sass/knacss.scss` qui importe tous les autres fichiers que vous risquez d'employer dans votre projet.
|
||||
|
||||
En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss` pour obtenir votre fichier CSS final.
|
||||
|
|
@ -80,17 +80,24 @@ En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss
|
|||
|
||||
### 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.
|
||||
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** (Autoprefixer réglé à "last 2 versions").
|
||||
|
||||
**Par contre, dans la version 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](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
||||
**Par contre, dans la version 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 à l'excellent outil qu'est [autoprefixer](https://github.com/postcss/autoprefixer).
|
||||
|
||||
### Mise à jour depuis une version précédente de KNACSS ?
|
||||
|
||||
La version `5.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `4.*.*`.
|
||||
La version `6.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `6.*.*`.
|
||||
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS :
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 6 de KNACSS :
|
||||
|
||||
#### Modifications majeures depuis la `5.*.*`
|
||||
|
||||
- le grille de mise en forme a été entièrement modifiée. Détails de modifications: https://github.com/alsacreations/KNACSS/issues/207
|
||||
- les positionnements tabulaires. `.row`, `.col` et `.line`, devenus inutiles et confusants depuis Flexbox, ont été supprimés
|
||||
- de nouvelles valeurs de breakpoints ont été définies. Détails: https://github.com/alsacreations/KNACSS/issues/210
|
||||
- suppression de l'outils *include-media* (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final)
|
||||
|
||||
#### Modifications majeures depuis la `4.*.*`
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
- ajout des objects courants : media et autogrid
|
||||
- suppression des positionnements tabulaires. `.row`, `.col` et `.line` n'ont plus lieu d'être depuis Flexbox, peuvent entrer en conflit avec d'autres frameworks et ne font que parasiter KNACSS
|
||||
- amélioration du fichier Gulpfile.js
|
||||
- corrections de bugs divers
|
||||
- mise à jour de la doc
|
||||
|
||||
# changelog v5.0.1 (24 mai 2016)
|
||||
- les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex. `.w700p {width: 700px;}` devient `@include media('>640px') {.w700p {width: 700px;}}`. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive.
|
||||
|
|
|
|||
|
|
@ -28,12 +28,12 @@ KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos go
|
|||
Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère.
|
||||
Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu :
|
||||
|
||||
```
|
||||
```HTML
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vive les knack!</title>
|
||||
<title>Vive les knacks!</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="css/knacss.css">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
|
|
@ -48,8 +48,8 @@ Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feui
|
|||
|
||||
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
|
||||
|
||||
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](https://github.com/raphaelgoetter/KNACSS/blob/master/sass/_config-variables.scss) contenant toutes les variables du projet est intégré.
|
||||
Libre à vous de le modifier selon les contraintes de votre projet.
|
||||
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 [dossier de configuration](https://github.com/alsacreations/KNACSS/tree/v6/sass/_config) contenant toutes les variables du projet, les breakpoints et les mixins est intégré.
|
||||
Libre à vous de modifier ces fichiers selon les contraintes de votre projet.
|
||||
|
||||
La version Sass, à compiler par vos soins, sera bien évidemment plus malléable grâce à l'apport de variables et fonctions.
|
||||
Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, WordPress, classes utilitaires, etc.).
|
||||
|
|
@ -71,7 +71,7 @@ Que vous ayez opté pour la version CSS simple ou la version Sass, il est viveme
|
|||
Sachez qu'un [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf) et un [**Guide de styles**](http://codepen.io/raphaelgoetter/full/LNwOjz/) sont également disponibles pour vous souvenir des classes utiles de KNACSS.
|
||||
|
||||
Dans le cas d'un usage via Sass, vos deux fichiers de travail principaux seront :
|
||||
- le fichier `sass/_config-variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||
- le fichier `sass/_config/_variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||
- le fichier `sass/knacss.scss` qui importe tous les autres fichiers que vous risquez d'employer dans votre projet.
|
||||
|
||||
En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss` pour obtenir votre fichier CSS final.
|
||||
|
|
@ -80,17 +80,24 @@ En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss
|
|||
|
||||
### 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.
|
||||
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** (Autoprefixer réglé à "last 2 versions").
|
||||
|
||||
**Par contre, dans la version 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](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
||||
**Par contre, dans la version 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 à l'excellent outil qu'est [autoprefixer](https://github.com/postcss/autoprefixer).
|
||||
|
||||
### Mise à jour depuis une version précédente de KNACSS ?
|
||||
|
||||
La version `5.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `4.*.*`.
|
||||
La version `6.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `6.*.*`.
|
||||
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS :
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 6 de KNACSS :
|
||||
|
||||
#### Modifications majeures depuis la `5.*.*`
|
||||
|
||||
- le grille de mise en forme a été entièrement modifiée. Détails de modifications: https://github.com/alsacreations/KNACSS/issues/207
|
||||
- les positionnements tabulaires. `.row`, `.col` et `.line`, devenus inutiles et confusants depuis Flexbox, ont été supprimés
|
||||
- de nouvelles valeurs de breakpoints ont été définies. Détails: https://github.com/alsacreations/KNACSS/issues/210
|
||||
- suppression de l'outils *include-media* (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final)
|
||||
|
||||
#### Modifications majeures depuis la `4.*.*`
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ KNACSS a prévu des classes spécifiques pour mieux vous en sortir avec les flot
|
|||
|
||||
- **le super élément `.mod`**. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un [contexte "BFC"](http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html)
|
||||
- `.clearfix`. Les éléments disposant de cette classe contiennent les flottants, tel les `.mod`
|
||||
- les éléments `.clear`, `.line` et `.row` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
|
||||
- les éléments `.clear` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
|
||||
|
||||
## Concrètement : je veux faire quoi ?
|
||||
|
||||
|
|
@ -42,21 +42,7 @@ HTML :
|
|||
|
||||
|
||||
|
||||
Version table-cell (HTML) :
|
||||
```html
|
||||
<section class="col">
|
||||
<div class="w50 center">centré horizontalement et verticalement</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
Version table-cell (CSS) :
|
||||
```css
|
||||
section {
|
||||
vertical-align: middle;
|
||||
}
|
||||
```
|
||||
|
||||
Version flexbox (HTML):
|
||||
```html
|
||||
<section class="flex-container-v">
|
||||
<div class="center w50">centré horizontalement et verticalement</div>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,13 @@ Les types de positionnements inclus nativement dans KNACSS sont les suivants :
|
|||
|
||||
- positionnement flottant
|
||||
- positionnement avec `display: inline-block`
|
||||
- positionnement avec `display: table-cell`
|
||||
- positionnement avec Flexbox
|
||||
|
||||
Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
|
||||
|
||||
Votre décision pourra être guidée par les indices suivants :
|
||||
- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`)
|
||||
- Flexbox est certainement le modèle le plus polyvalent et propre, mais n'est compatible qu'à partir de IE10+.
|
||||
- Flexbox est certainement le modèle le plus polyvalent et propre, il est compatible qu'à partir de IE10+.
|
||||
|
||||
## Concrètement : je veux faire quoi ?
|
||||
|
||||
|
|
@ -55,20 +54,8 @@ HTML :
|
|||
- **Avantage :** positionnement dans le flux, compatible dès IE8
|
||||
- **Inconvénient :** un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé
|
||||
|
||||
#### table-cell et table-cell
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col w400p">premier</div>
|
||||
<div class="col w400p">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- **Avantage :** positionnement dans le flux, compatible dès IE8
|
||||
- **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
|
||||
#### Flexbox
|
||||
|
||||
HTML :
|
||||
```html
|
||||
|
|
@ -97,19 +84,10 @@ HTML :
|
|||
|
||||
#### inline-block et inline-block
|
||||
|
||||
Pas possible [Résolu]
|
||||
Pas possible
|
||||
|
||||
#### table-cell et table-cell
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col w400p">premier</div>
|
||||
<div class="col">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flexbox
|
||||
#### Flexbox
|
||||
|
||||
HTML :
|
||||
```html
|
||||
|
|
@ -127,25 +105,14 @@ Les choix offerts avec KNACSS :
|
|||
|
||||
#### flottant et flottant
|
||||
|
||||
Pas possible [Résolu]
|
||||
Pas possible
|
||||
|
||||
#### inline-block et inline-block
|
||||
|
||||
Pas possible [Résolu]
|
||||
Pas possible
|
||||
|
||||
#### table-cell et table-cell
|
||||
|
||||
Par défaut, les éléments constituant des "cellules de tableau", donc `table-cell` ont automatiquement la même hauteur entre frères. Il n'y a donc rien à faire si l'on opte pour ce positionnement : ça marche tout seul.
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col">premier</div>
|
||||
<div class="col">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flexbox
|
||||
#### Flexbox
|
||||
|
||||
Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,280 +1,25 @@
|
|||
# Grilles de mise en page
|
||||
|
||||
Une grille "KNACSS" a les caractéristiques globales suivantes :
|
||||
"Grillade" est un système de grille simple et élaboré avec CSS3 Flexbox. Il est intégré par défaut dans le micro-framework KNACSS d'Alsacréations mais peut être utilisé de manière autonome sans nécessiter KNACSS ou d'autre dépendance.
|
||||
|
||||
- Les largeurs des colonnes sont fluides (définies en pourcentage du parent),
|
||||
- Une gouttière sépare chaque colonne (la valeur de cette gouttière est modifiable dans le fichier `sass/knacss.scss`),
|
||||
- Par défaut, une grille est "mobile-first" (une seule colonne sur petit écran, 2 colonnes sur écran "small") et il est très simple d'activer la fonctionnalité "Responsive",
|
||||
- La technologie employée est [CSS3 Flexbox](http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html).
|
||||
Grillade a les caractéristiques globales suivantes :
|
||||
|
||||
> Le système de grilles de KNACSS existe en version CSS autonome, nommée "Grillade", que vous pouvez [télécharger directement (4.2ko)](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css) sans avoir à installer le reste du framework.
|
||||
- Double système de grille :
|
||||
- Mono-ligne : possibilité par défaut d'émuler [l'objet "autogrid"](http://codepen.io/raphaelgoetter/pen/KMgBJd?editors=1100) : `.grid` affiche sur une ligne autant d'enfants que nécessaires (et de taille identique)
|
||||
- Multi-ligne : possibilité de passer en multi-lignes dès que l'on ajoute un suffixe numéroté (ex. `.grid-2`, `.grid-3` ... `.grid-12`)
|
||||
- "Mobile-first" : par défaut une grille sera disposée sur une colonne, et ne s'active que lorsque l'écran dépasse le breakpoint `$tiny`
|
||||
- Largeurs de colonnes fluides et égales par défaut, mais possibilité de définir individuellement la taille de chaque enfant si besoin (ex. `.one-half`, `.one-third`, `.one-quarter`, `.two-thirds`, etc.)
|
||||
- Possibilité d'inverser toute la grille grâce au suffixe `--reverse`
|
||||
- Possibilité de préciser le nombre de colonnes en taille d'écran "small" à l'aide du suffixe `-small-X` (X colonnes)
|
||||
- Possibilité d'appliquer une gouttière entre les éléments
|
||||
- Possibilité d'offsets (pull / push)
|
||||
- Possibilité de réordonner les éléments (au début / à la fin)
|
||||
- Possibilité de réaliser ses propres grilles multi-colonnes via un mixin Sass. ex. `.o-grid-perso { @include grid(4, 3rem); }`
|
||||
|
||||
Il existe deux types principaux de systèmes de grilles dans KNACSS :
|
||||
Spécificités techniques :
|
||||
|
||||
- Les grilles à colonnes égales
|
||||
- Les grilles à colonnes inégales
|
||||
- Grillade est basé sur CSS3 Flexbox, ce qui le rend incompatible avec les anciennes versions d'Internet Explorer (IE9 inclus) ainsi que certains anciens navigateurs (Android <4.4 par exemple)
|
||||
- Les préfixes CSS3 (`-webkit-`, `-moz-`, `-ms-`, …) sont pris en charge au sein de la version CSS de Grillade, mais pas dans sa version Sass. Il vous sera donc nécessaire de les ajouter, de préférence automatiquement grâce à l'excellent outil autoprefixer.
|
||||
- Les valeurs par défaut des points de rupture responsive (Breakpoints) de Grillade sont : `$tiny = 544px` et `$small = 768px`, vous pouvez modifier ou ajouter des valeurs dans la version Sass.
|
||||
|
||||
Dans les deux cas, la technique associée depuis KNACSS v4 pour concevoir les grilles est **CSS3 Flexbox**, ce qui signifie que la compatibilité de **cette fonctionnalité sera réservée aux [navigateurs modernes](http://caniuse.com/#search=flexbox)** (IE10, Android 4.4+ et tous les autres).
|
||||
|
||||
Quelques exemples pour vous échauffer :
|
||||
- `<div class="grid-4">` : grille de 4 colonnes également réparties
|
||||
- `<div class="grid-2-1">` : grille de répartition 2/3 - 1/3
|
||||
- `<div class="grid-3-small-1">` : grille de 3 colonnes égales, puis 1 colonne sur écran "small"
|
||||
- `<div class="grid-6-small-3">` : grille de 6 colonnes, puis 3 colonnes sur écran "small"
|
||||
- *note* : sur écran très petit ("tiny"), il n'y aura systématiquement qu'une seule colonne.
|
||||
|
||||
Et maintenant passons aux explications !
|
||||
|
||||
## Précautions à prendre
|
||||
|
||||
Qui dit CSS3 dit précautions à prendre.
|
||||
La bonne nouvelle est que Flexbox est plutôt bien reconnu par l'ensemble des navigateurs de la planète; la mauvaise est que certains anciens navigateurs (Android par exemple) ne reconnaissent que certaines versions précédentes des spécifications. Il est donc encore nécessaire d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que vos grilles fonctionneront partout.
|
||||
|
||||
Au sein de la version CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier**.
|
||||
|
||||
**Par contre, dans la version 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](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
||||
|
||||
## Exemple concret
|
||||
|
||||
Pour vous faire une idée, et jouer avec les valeurs possibles, vous trouverez [un exemple "bac à sable"](http://codepen.io/raphaelgoetter/pen/BybOag?editors=110) sur CodePen.
|
||||
|
||||
**Exemple de grille de colonnes égales :**
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4"> <!-- parent div (ou autre) de 4 colonnes -->
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
**Exemple de grille de colonnes inégales (3/4 - 1/4) :**
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-3-1"> <!-- parent div (ou autre) de 3-1 colonnes -->
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
## Mise en oeuvre
|
||||
|
||||
Il est très simple de construire une grille, il vous suffit :
|
||||
|
||||
- D'un **conteneur**
|
||||
- D'autant **d'enfants** que vous souhaitez
|
||||
|
||||
Le **conteneur** sera l'élément HTML que vous voulez (`div`, `section`, `ul`, ...). Il vous suffit simplement de le munir d'une classe selon votre choix de grille :
|
||||
|
||||
- `.grid-2`, `.grid-3`, `.grid-4`, ... `.grid-12` pour les grilles de largeur égale
|
||||
- `.grid-2-1`, `.grid-1-2`, `.grid-3-1`, `.grid-1-3`, `.grid-3-2`, `.grid-2-3`, `.grid-4-1`, `.grid-1-4` pour les grilles de largeurs inégales (`.grid-2-1` vaut pour "2/3 - 1/3" par exemple).
|
||||
|
||||
Par défaut, chaque colonne est séparée de sa voisine par une gouttière dont la largeur par défaut est `1em`. Pour modifier ce réglage, il sera nécessaire de passer par la version préprocesseur (LESS, Sass) de KNACSS (voir plus loin).
|
||||
|
||||
Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent automatiquement au sein de la grille formée par leur conteneur. Par exemple, 6 enfants contenus dans un parent de classe `.grid-3` se répartiront en 3 colonnes de 2 lignes.
|
||||
|
||||
- Tester une [grille simple en ligne](http://codepen.io/raphaelgoetter/pen/GAenb?editors=110) (Codepen).
|
||||
- Tester une [grille de largeur inégale en ligne](http://codepen.io/raphaelgoetter/pen/jmAkx?editors=110) (Codepen).
|
||||
|
||||
## Grilles responsive
|
||||
|
||||
Les grilles KNACSS sont mobile-first et "plus ou moins" responsive naturellement, dans la mesure où par défaut :
|
||||
- elles s'affichent systématiquement sur une seule colonne sur un très petit écran ("tiny"),
|
||||
- elles s'affichent en 2 colonnes sur un écran de taille réduite ("small"),
|
||||
- elles occupent le nombre de colonnes définies dans la variable `$grid-number` sur un écran suffisamment large.
|
||||
|
||||
Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide du mot-clé : `-small-*`.
|
||||
Ce mot-clé définit le nombre de colonnes lorsque le point de rupture se situe au-delà de la taille "tiny" et en-deçà de la taille "medium".
|
||||
|
||||
La grille ci-dessous s'affichera en 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran :
|
||||
```html
|
||||
<div class="grid-4-small-2">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Offsets
|
||||
|
||||
Il vous est très facile de "pousser" un élément à droite ou à gauche de sa ligne dans la grille, et créer ainsi un espacement volontaire, ce que l'on appelle "offset".
|
||||
|
||||
Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément :
|
||||
|
||||
- la classe `.push` pour le pousser à droite sur sa ligne (applique un `margin-left: auto`)
|
||||
- la classe `.pull` pour le pousser à gauche sur sa ligne (applique un `margin-right: auto`)
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="push">je suis poussé à droite</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
## Mise en exergue
|
||||
|
||||
Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille.
|
||||
|
||||
Pour ce faire, appliquez la classe `.grid-item-double` à cet élément.
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="grid-item-double">je suis deux fois plus large que mes frères</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
## Pousser au début ou à la fin
|
||||
|
||||
Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
|
||||
|
||||
- `.grid-item-first` (l'élément apparaîtra avant tous les autres)
|
||||
- `.grid-item-last` (l'élément apparaîtra tout à la fin de la grille)
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="grid-item-first">je m'affiche avant tous mes frères</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
|
||||
|
||||
## Grilles imbriquées
|
||||
|
||||
Il est parfaitement possible d'imbriquer une grille dans une grille (mais n'en abusez pas !). Par exemple :
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-2-1">
|
||||
<div>
|
||||
<ul class="unstyled grid-3">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<aside>
|
||||
2- lorem ipsum Hopla choucroute !
|
||||
</aside>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
## Plus loin avec les préprocesseurs
|
||||
|
||||
KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS ou Sass. Il existe par conséquent un fichier de variables de configuration et des mixins prévus pour étendre les possibilités des grilles notamment.
|
||||
|
||||
### Modifier les variables globales
|
||||
|
||||
Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` :
|
||||
|
||||
```css
|
||||
$grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-number: 4 !default; // number of equal columns
|
||||
$grid-left: 2 !default; // left side of uneven columns
|
||||
$grid-right: 1 !default; // right side of uneven columns
|
||||
```
|
||||
|
||||
Il vous suffit de modifier les valeurs de ces variables de config pour répercuter vos préférences sur l'ensemble du projet dès que vos fichiers Sass seront compilés en CSS.
|
||||
|
||||
### Générer des grilles personnalisées
|
||||
|
||||
Indépendamment des variables de configuration, rien de vous empêche de créer une grille personnalisée en incluant directement l'un des deux mixins possibles dans vos éléments :
|
||||
|
||||
- `.grid(n,g)` pour personnaliser une grille de colonnes **égales**. Les arguments sont "n" = nombre de colonnes et "g" = largeur de la grille
|
||||
- `.uneven-grid(l,r)` pour personnaliser une grille de colonnes **inégales**. Les arguments sont "l" = pour le ratio de la colonne de gauche, "r" = pour le ratio de la colonne de droite
|
||||
|
||||
#### Grille de colonnes égales en Sass
|
||||
|
||||
**Objectif : je souhaite créer un mixin sur mon élément `.grid-container` afin que celui-ci crée une grille de 6 colonnes égales**
|
||||
|
||||
Sass (fichier de développement) :
|
||||
```css
|
||||
.grid-container {
|
||||
@include grid(4, 12px)
|
||||
}
|
||||
```
|
||||
|
||||
**Important : il est nécessaire que le nom de votre classe globale contienne la chaîne `grid-` pour que le mixin fonctionne (ex. `grid-container`, `grid-box`, `grid-truc4`, etc.)**
|
||||
|
||||
CSS compilé (sans Autoprefixer) :
|
||||
|
||||
```css
|
||||
.grid-container {
|
||||
margin-left: -12px;
|
||||
}
|
||||
.grid-container > * {
|
||||
width: calc(100% * 1 / 4 - 12px - .01px);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.grid-container > .grid-item-double {
|
||||
width: calc(100% * 2 / 4 - 12px);
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
#### Grille de colonnes inégales en LESS
|
||||
|
||||
**Objectif : je souhaite que mon élément `.grid-truc` crée une grille de 2 colonnes réparties en 2/3 et 1/3.**
|
||||
|
||||
LESS (fichier de développement) :
|
||||
|
||||
```css
|
||||
.grid-truc {
|
||||
@include uneven-grid(2, 1);
|
||||
}
|
||||
```
|
||||
|
||||
**Important : il est nécessaire que le nom de votre classe globale contienne la chaîne `grid-` pour que le mixin fonctionne (ex. `grid-container`, `grid-box`, `grid-truc4`, etc.)**
|
||||
|
||||
|
||||
CSS compilé (sans Autoprefixer) :
|
||||
|
||||
```css
|
||||
@media (min-width: 641px) {
|
||||
.grid-truc :nth-child(odd) {
|
||||
width: calc(66.66667% - 2rem);
|
||||
}
|
||||
.grid-truc :nth-child(even) {
|
||||
width: calc(33.33333% - 2rem);
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
## Article associé
|
||||
|
||||
Si vous voulez comprendre dans le détail le fonctionnement des grilles Flexbox de KNACSS, je vous invite à suivre l'article d'Alsacréations ["Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)"](http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html).
|
||||
**documentation complète, illustrée et détaillée sur le site http://grillade.knacss.com**
|
||||
|
|
|
|||
|
|
@ -6,20 +6,111 @@ Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
|
|||
|
||||
```
|
||||
// breakpoints (choose unit you prefer)
|
||||
@tiny-screen : 320px; // tiny screens media query (less-equal than 320px)
|
||||
@tiny-plus-screen : 480px; // screens between 321px and 480px
|
||||
@small-screen : 640px; // screens between 481px and 640px
|
||||
@small-plus-screen : 768px; // screens between 641px and 768px
|
||||
@medium-screen : 960px; // screens between 769px and 960px
|
||||
@medium-plus-screen : 1024px; // screens between 961px and 1024px
|
||||
@large-screen : 1280px; // screens between 1025px and 1280px
|
||||
@large-plus-screen : 1440px; // screens between 1281px and 1440px
|
||||
@extra-large-screen : 1600px; // screens between 1441px and 1600px
|
||||
@ultra-large-screen : 1920px; // ultra large screens
|
||||
$tiny: 544px !default; // or 'em' if you prefer, of course
|
||||
$small: 768px !default;
|
||||
$medium: 1024px !default;
|
||||
$large: 1200px !default;
|
||||
$extra-large: 1440px !default;
|
||||
```
|
||||
|
||||
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
||||
|
||||
## Convention d'écriture
|
||||
|
||||
### Choix des valeurs de breakpoints
|
||||
|
||||
1. Choisir principalement des valeurs de breakpoints selon votre design, pas par rapport à des devices (se servir des variables de breakpoints fournies si l'on ne peut pas se baser sur son design)
|
||||
2. En plus de vos propres valeurs, il est possible d'employer :
|
||||
- les variables fournies (`$tiny`, `$small`, `$medium`, `$large`),
|
||||
- mais aussi des alias qui représentent des intervalles et que l'on utilise sous forme de mixins: (`mobile`, `portrait`, `landscape`, `desktop`)
|
||||
3. Éviter de multiplier les valeurs. Un maximum de 5 ou 6 breakpoints devrait suffire dans la grande majorité des projets
|
||||
4. Pour éviter les intervalles qui se chevauchent, ou des Media Queries trop variés, adopter une convention pour définir la valeur d’un Breakpoint : `(max-width: $BP) and (min-width: ($BP + 1))`
|
||||
|
||||
Exemple :
|
||||
|
||||
Non, pas bien :
|
||||
```
|
||||
@media (min-width: 768px) {...}
|
||||
@media (max-width: 767px) {...}
|
||||
```
|
||||
|
||||
Oui, bien :
|
||||
```
|
||||
@media (min-width: 769px) {...}
|
||||
@media (max-width: 768px) {...}
|
||||
@media (max-width: $small-screen) {...}
|
||||
@media (min-width: $small-screen + 1) and (max-width: $large-screen) {...}
|
||||
```
|
||||
|
||||
## Mixins "Alias"
|
||||
|
||||
En addition aux variables, des mixins de breakpoints "utilitaires" (des "alias" des valeurs précédentes) liées aux types de devices (forcément indicatifs, mais simples à retenir) sont prévues :
|
||||
|
||||
**NOTE : je commence à avoir du mal avec les « large, medium, small » : en pratique, je ne sais jamais à quoi ça correspond et je dois systématiquement aller vérifier dans le fichier de variables.
|
||||
Au final, je me dis qu’un « mobile, tablet, desktop », même purement indicatif est bien plus parlant**
|
||||
|
||||
```
|
||||
// Additionnal "utility" breakpoints aliases
|
||||
@function breakpoint($bp) {
|
||||
@if $bp == 'mobile' {
|
||||
@return '(max-width: #{$tiny})';
|
||||
}
|
||||
@else if $bp == 'portrait' {
|
||||
@return '(min-width: #{$tiny + 1}) and (max-width: #{$small})';
|
||||
}
|
||||
@else if $bp == 'landscape' {
|
||||
@return '(min-width: #{$small + 1}) and (max-width: #{$medium})';
|
||||
}
|
||||
@else if $bp == 'desktop' {
|
||||
@return '(min-width: #{$medium + 1})';
|
||||
}
|
||||
@else if $bp == 'portrait-down' {
|
||||
@return '(max-width: #{$small})';
|
||||
}
|
||||
@else if $bp == 'portrait-up' {
|
||||
@return '(min-width: #{$tiny + 1})';
|
||||
}
|
||||
@else if $bp == 'landscape-down' {
|
||||
@return '(max-width: #{$medium})';
|
||||
}
|
||||
@else if $bp == 'landscape-up' {
|
||||
@return '(min-width: #{$small + 1})';
|
||||
}
|
||||
@else if $bp == 'retina' {
|
||||
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
|
||||
}
|
||||
}
|
||||
|
||||
@mixin respond-to($value) {
|
||||
$string: breakpoint($value);
|
||||
@media screen and #{$string} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
||||
Exemple d'usage :
|
||||
|
||||
```
|
||||
// styles
|
||||
.when-portrait-up {
|
||||
@include respond-to("portrait-up") {
|
||||
background: green;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.is-hidden-mobile {
|
||||
@include respond-to("mobile") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Voir le CodePen : http://codepen.io/raphaelgoetter/pen/EyRwAp/?editors=1100
|
||||
|
||||
Illustration :
|
||||
|
||||
|
||||
## Préfixes de classe
|
||||
|
||||
|
|
@ -56,15 +147,6 @@ Modèles d'affichage :
|
|||
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 :
|
||||
|
|
@ -101,7 +183,7 @@ Marges :
|
|||
|
||||
```css
|
||||
.tiny-man,
|
||||
.tiny-ma0 {
|
||||
.tiny-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.tiny-pan,
|
||||
|
|
@ -109,18 +191,3 @@ Marges :
|
|||
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 */
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -30,10 +30,11 @@ KNACSS propose des styles par défaut pour ces liens : masqués au départ, ils
|
|||
|
||||
## Césures
|
||||
|
||||
KNACSS gère automatiquement les césures et les mots longs dès lors que le point de rupture "small" est atteint.
|
||||
KNACSS gère automatiquement les césures et les mots longs dès lors que le point de rupture "$tiny" est atteint.
|
||||
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
```
|
||||
// hyphens on tiny screens
|
||||
@media (max-width: $tiny) {
|
||||
/* you shall not pass */
|
||||
div,
|
||||
textarea,
|
||||
|
|
@ -44,28 +45,15 @@ KNACSS gère automatiquement les césures et les mots longs dès lors que le poi
|
|||
pre,
|
||||
samp {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// use .no-wrapping to disallow hyphens on tiny screens
|
||||
@media (max-width: $tiny) {
|
||||
.no-wrapping {
|
||||
word-wrap: normal;
|
||||
hyphens: manual;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Google maps
|
||||
|
||||
KNACSS règle les bugs d'affichage dans le cas spécifique des images google.
|
||||
|
||||
```css
|
||||
.gm-style img {
|
||||
height: 100%;
|
||||
}
|
||||
:not(.gm-style) img {
|
||||
height: auto;
|
||||
}
|
||||
.gm-style img,
|
||||
.gmnoscreen img,
|
||||
.gmnoprint img {
|
||||
max-width: none !important;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// use .no-wrapping to disallow hyphens on small screens
|
||||
// use .no-wrapping to disallow hyphens on tiny screens
|
||||
@media (max-width: $tiny) {
|
||||
.no-wrapping {
|
||||
word-wrap: normal;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue