see changelog
This commit is contained in:
Raphael Goetter
parent
2022f8bd79
commit
7c9cf52761
38 changed files with 793 additions and 5079 deletions
|
|
@ -15,12 +15,14 @@ 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 :
|
||||
|
||||
- en version [CSS classique](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss-unminified.css) (ou [minifié](vhttps://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss.css))
|
||||
- en version [LESS](https://github.com/raphaelgoetter/KNACSS/tree/master/less)
|
||||
- en version [Sass](https://github.com/raphaelgoetter/KNACSS/tree/master/sass)
|
||||
|
||||
_Les versions LESS et Sass seront bien évidemment plus malléables grâce à l'apport de variables et fonctions._
|
||||
_La version Sass sera bien évidemment plus malléable grâce à l'apport de variables et fonctions._
|
||||
|
||||
À noter que KNACSS est basé sur un socle [Normalize.css](http://necolas.github.io/normalize.css/), célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc.
|
||||
À noter que KNACSS est basé sur deux outils :
|
||||
|
||||
- [Normalize.css](http://necolas.github.io/normalize.css/), célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc.
|
||||
- [include-media](http://include-media.com/), mixins Sass pour la gestion des Media Queries.
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -32,11 +34,8 @@ Il est également possible de l'installer (toutes versions) via [Bower](http://b
|
|||
|
||||
## Compatibilité
|
||||
|
||||
KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE8 inclus.
|
||||
KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE10 inclus.
|
||||
|
||||
Seules exceptions :
|
||||
|
||||
- les positionnements avancés à base de Flexbox (IE10+ minimum), c'est à dire toutes les classes débutant par `.flex-`
|
||||
|
||||
## RTFM!
|
||||
|
||||
|
|
@ -51,19 +50,15 @@ Sachez qu'un [pense-bête en PDF](http://knacss.com/KNACSS-cheatsheet.pdf) est
|
|||
|
||||
KNACSS en version complète ne vous convient pas ? Seule la grille flexbox vous intéresse ? Bienvenue dans *Grillade* !
|
||||
|
||||
### votre grillade avec LESS ?
|
||||
### votre grillade avec Sass ?
|
||||
|
||||
Il est possible de n'utiliser KNACSS que pour sa fonctionnalité de grille de positionnement et de bénéficier de colonnes égales, inégales, responsive, des offsets, des pull et push et des mises en exergue. Bref, de [tout l'attirail des grilles KNACSS](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md).
|
||||
|
||||
Il vous suffit pour cela de récupérer le fichier suivant : [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less)
|
||||
|
||||
Ce fichier n'est rien d'autre que la concaténation de deux fichiers essentiels :
|
||||
- `_00-config.less` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints)
|
||||
- `_03-grids.less` (ben oui, quand même)
|
||||
Il vous suffit pour cela de récupérer le fichier suivant : [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss)
|
||||
|
||||
### votre grillade plutôt nature ?
|
||||
|
||||
Vous souhaitez simplement bénéficier d'une grille de mise en page simple mais fonctionnelle, en pur CSS sans passer par LESS ou Sass ?
|
||||
Vous souhaitez simplement bénéficier d'une grille de mise en page simple mais fonctionnelle, en pur CSS sans passer par Sass ?
|
||||
|
||||
Alors contentez-vous du fichier <a href="https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css"><strong>grillade.css</strong></a>, il est parfaitement autonome et ne pèse que 4ko seulement !
|
||||
|
||||
|
|
@ -72,18 +67,18 @@ Par contre, n'oubliez quand même pas de lire [la documentation](https://github.
|
|||
|
||||
## 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).
|
||||
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc 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/less/_00-config.less) contenant toutes les variables du projet est intégré.
|
||||
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.
|
||||
|
||||
**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`.
|
||||
**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`**.
|
||||
|
||||
Dans le cas d'un usage via préprocesseur, vos deux fichiers de travail principaux seront :
|
||||
- le fichier `less/_00-config.less` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||
- le fichier `less/knacss.less` qui importe tous les fichiers que vous risquez d'employez dans votre projet (`layout.css`, `responsive.css`, `forms.css`, `print.css`, etc.).
|
||||
- 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 fichiers que vous risquez d'employez dans votre projet.
|
||||
|
||||
En cours de développement, il vous suffit de compiler ce fichier `less/knacss.less` (ou `sass/knacss.scss`) pour obtenir vos fichiers CSS utiles.
|
||||
En cours de développement, il vous suffit de compiler ce fichier `sass/knacss.scss` pour obtenir vos fichiers CSS utiles.
|
||||
|
||||
### Préfixes navigateurs
|
||||
|
||||
|
|
@ -91,15 +86,25 @@ Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une
|
|||
|
||||
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 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](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 aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
||||
|
||||
### Mise à jour depuis une version précédente de KNACSS ?
|
||||
|
||||
La version `4.*.*` 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 `3.*.*`.
|
||||
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.*.*`.
|
||||
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 4 de KNACSS :
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS :
|
||||
|
||||
#### Alignements et flottants
|
||||
#### Modifications majeures depuis la `4.*.*`
|
||||
|
||||
- suppression de la version LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge)
|
||||
- suppression des fallbacks pour IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
|
||||
- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
|
||||
- ajout de la library include-media (http://include-media.com/)
|
||||
- grille "grillade" à présent en mobile first
|
||||
|
||||
#### Modifications majeures depuis la `3.*.*`
|
||||
|
||||
##### Alignements et flottants
|
||||
|
||||
La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`) :
|
||||
|
||||
|
|
@ -107,7 +112,7 @@ La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.
|
|||
- `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite
|
||||
- `.start` et `.end` n'existent plus
|
||||
|
||||
#### Nommages des grilles
|
||||
##### Nommages des grilles
|
||||
|
||||
Le système de grilles de KNACSS 4 est à présent basé sur flexbox (mais demeure compatible IE8 grâce à une alternative inline-block).
|
||||
|
||||
|
|
@ -118,7 +123,7 @@ Exemple :
|
|||
- ancien nommage : `.grid2`, `.grid1-3`
|
||||
- nouveau nommage : `.grid-2`, `.grid-1-3`
|
||||
|
||||
#### Nommages de flexbox
|
||||
##### Nommages de flexbox
|
||||
|
||||
Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes).
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
Une grille "KNACSS" a les caractéristiques globales suivantes :
|
||||
|
||||
- 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 les fichiers `less/knacss.less` ou `sass/knacss.scss`),
|
||||
- Par défaut, une grille n'est pas responsive mais il est très simple d'activer cette fonctionnalité,
|
||||
- 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).
|
||||
|
||||
Il existe deux types principaux de systèmes de grilles dans KNACSS :
|
||||
|
|
@ -12,18 +12,17 @@ Il existe deux types principaux de systèmes de grilles dans KNACSS :
|
|||
- Les grilles à colonnes égales
|
||||
- Les grilles à colonnes inégales
|
||||
|
||||
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). Note : une alternative, basée sur `inline-block` est cependant proposée automatiquement pour les anciens navigateurs (IE8, Android 2).
|
||||
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-tiny-1">` : grille de 3 colonnes égales, puis 1 colonne sur très petit écran
|
||||
- `<div class="grid-6-small-3-tiny-2">` : grille de 6 colonnes, puis 3 colonnes sur écran "small", puis 2 colonnes sur écran "tiny".
|
||||
- `<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 !
|
||||
|
||||
**NOTE pour les utilisateurs de LESS / Sass :** par défaut, les grilles sont activées dans KNACSS. Si vous avez le moindre souci, vérifiez que `@import "_03-grids";` est présent et non commenté dans votre fichier `less/knacss.less` ou `sass/knacss.scss`).
|
||||
|
||||
## Précautions à prendre
|
||||
|
||||
Qui dit CSS3 dit précautions à prendre.
|
||||
|
|
@ -31,7 +30,7 @@ La bonne nouvelle est que Flexbox est plutôt bien reconnu par l'ensemble des na
|
|||
|
||||
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 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](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 aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
||||
|
||||
## Exemple concret
|
||||
|
||||
|
|
@ -86,6 +85,26 @@ Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent au
|
|||
- 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 par défaut en 2 colonnes sur un écran de taille réduite ("small"),
|
||||
- elles occupent le nombre de colonnes définies dans la variable `$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".
|
||||
|
|
@ -147,22 +166,7 @@ HTML :
|
|||
Résultat :
|
||||
|
||||
|
||||
## Grilles responsive
|
||||
|
||||
Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide des mots-clés suivants :
|
||||
|
||||
- `-small-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `small-screen`
|
||||
- `-tiny-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `tiny-screen`
|
||||
|
||||
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-tiny-1">
|
||||
<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>
|
||||
```
|
||||
|
||||
## Grilles imbriquées
|
||||
|
||||
|
|
@ -193,32 +197,32 @@ KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS
|
|||
|
||||
### Modifier les variables globales
|
||||
|
||||
Les variables de configuration des grilles se trouvent dans le fichier `less/_00-config.less` (pour les utilisateurs de LESS) et `sass/_00-config.scss` (en version Sass) :
|
||||
Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` :
|
||||
|
||||
```css
|
||||
@gutter: 1em;
|
||||
@number: 4; // for equal columns
|
||||
@left: 2; // left side of uneven columns
|
||||
@right: 1; // right side of uneven columns
|
||||
$gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$number: 4 !default; // number of equal columns
|
||||
$left: 2 !default; // left side of uneven columns
|
||||
$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 LESS/Sass seront compilés en CSS.
|
||||
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)` pour personnaliser une grille de colonnes **égales**. Les arguments sont "n" = nombre de colonnes
|
||||
- `.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 LESS
|
||||
#### 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**
|
||||
|
||||
LESS (fichier de développement) :
|
||||
Sass (fichier de développement) :
|
||||
```css
|
||||
.grid-container {
|
||||
.grid(6);
|
||||
@include grid(4, 12px)
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -228,17 +232,14 @@ CSS compilé (sans Autoprefixer) :
|
|||
|
||||
```css
|
||||
.grid-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1em;
|
||||
margin-left: -12px;
|
||||
}
|
||||
.grid-container > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.66666667%;
|
||||
display: block; /* IE fix */
|
||||
border-left: 1em solid transparent;
|
||||
background-clip: padding-box !important; /* no background on border */
|
||||
width: calc(100% * 1 / 4 - 12px - .01px);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.grid-container > .flex-item-double {
|
||||
width: calc(100% * 2 / 4 - 12px);
|
||||
}
|
||||
...
|
||||
```
|
||||
|
|
@ -251,7 +252,7 @@ LESS (fichier de développement) :
|
|||
|
||||
```css
|
||||
.grid-truc {
|
||||
.uneven-grid(2, 1);
|
||||
@include uneven-grid(2, 1);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -261,22 +262,13 @@ LESS (fichier de développement) :
|
|||
CSS compilé (sans Autoprefixer) :
|
||||
|
||||
```css
|
||||
.grid-truc {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1em;
|
||||
}
|
||||
.grid-truc > * {
|
||||
display: block; /* IE fix */
|
||||
border-left: 1em solid transparent;
|
||||
background-clip: padding-box !important; /* no background on border */
|
||||
}
|
||||
.grid-truc > *:nth-child(odd) {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.grid-truc > *:nth-child(even) {
|
||||
width: 33.33333333%;
|
||||
@media (min-width: 641px) {
|
||||
.grid-truc :nth-child(odd) {
|
||||
width: calc(66.66667% - 2rem);
|
||||
}
|
||||
.grid-truc :nth-child(even) {
|
||||
width: calc(33.33333% - 2rem);
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue