nouvelles grilles responsive, v4.3.1
This commit is contained in:
Raphael Goetter
parent
70a3bfbe48
commit
b88f32f6d0
9 changed files with 108 additions and 190 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "4.3.0",
|
||||
"version": "4.3.1",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
# changelog v4.3.1 (5 juillet 2015)
|
||||
|
||||
- Amélioration des grilles responsive. Par exemple la classe `grid-4-small-2-tiny-1` définira une grille de 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran. La notation `grid-4` fonctionne toujours, mais ne sera pas automatiquement responsive.
|
||||
|
||||
# changelog v4.3.0 (3 juillet 2015)
|
||||
|
||||
- Les grilles de KNACSS sont à présent rétrocompatibles jusqu'à IE8 et Android2 grâce à un fallback en `display: inline-block` pour ces anciens navigateurs. Cependant les fonctionnalités resteront limitées chez ces dinosaures (pas de `flex-item-double`, de `flex-item-first`, etc.)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com V4.2.3 (1er juillet 2015) @author: Raphael Goetter, Alsacreations
|
||||
* www.KNACSS.com V4.3.1 (5 juillet 2015) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
|
||||
|
|
@ -737,290 +737,187 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
letter-spacing: normal;
|
||||
text-rendering: auto;
|
||||
}
|
||||
.grid-2 > * {
|
||||
[class*="grid-2"] > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-2 > .flex-item-double {
|
||||
[class*="grid-2"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 2 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-2 > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-2 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-2 > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-2 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-3 > * {
|
||||
[class*="grid-3"] > * {
|
||||
width: calc(100% * 1 / 3 - 1em - .01px);
|
||||
}
|
||||
.grid-3 > .flex-item-double {
|
||||
[class*="grid-3"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 3 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-3 > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-3 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-3 > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-3 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-4 > * {
|
||||
[class*="grid-4"] > * {
|
||||
width: calc(100% * 1 / 4 - 1em - .01px);
|
||||
}
|
||||
.grid-4 > .flex-item-double {
|
||||
[class*="grid-4"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 4 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-4 > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-4 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-4 > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-4 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-5 > * {
|
||||
[class*="grid-5"] > * {
|
||||
width: calc(100% * 1 / 5 - 1em - .01px);
|
||||
}
|
||||
.grid-5 > .flex-item-double {
|
||||
[class*="grid-5"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 5 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-5 > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-5 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-5 > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-5 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-6 > * {
|
||||
[class*="grid-6"] > * {
|
||||
width: calc(100% * 1 / 6 - 1em - .01px);
|
||||
}
|
||||
.grid-6 > .flex-item-double {
|
||||
[class*="grid-6"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 6 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-6 > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-6 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-6 > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-6 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-7 > * {
|
||||
[class*="grid-7"] > * {
|
||||
width: calc(100% * 1 / 7 - 1em - .01px);
|
||||
}
|
||||
.grid-7 > .flex-item-double {
|
||||
[class*="grid-7"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 7 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-7 > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-7 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-7 > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-7 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-8 > * {
|
||||
[class*="grid-8"] > * {
|
||||
width: calc(100% * 1 / 8 - 1em - .01px);
|
||||
}
|
||||
.grid-8 > .flex-item-double {
|
||||
[class*="grid-8"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 8 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-8 > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-8 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-8 > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-8 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-10 > * {
|
||||
[class*="grid-10"] > * {
|
||||
width: calc(100% * 1 / 10 - 1em - .01px);
|
||||
}
|
||||
.grid-10 > .flex-item-double {
|
||||
[class*="grid-10"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 10 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-10 > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-10 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-10 > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-10 > .flex-item-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-12 > * {
|
||||
[class*="grid-12"] > * {
|
||||
width: calc(100% * 1 / 12 - 1em - .01px);
|
||||
}
|
||||
.grid-12 > .flex-item-double {
|
||||
[class*="grid-12"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 12 - 1em - .01px);
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-12 > * {
|
||||
/* Responsive grid */
|
||||
@media (max-width: 768px) {
|
||||
[class*="-small-4"] > * {
|
||||
width: calc(100% * 1 / 4 - 1em - .01px);
|
||||
}
|
||||
[class*="-small-4"] > .flexitem-double {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
.grid-12 > .flex-item-double {
|
||||
[class*="-small-3"] > * {
|
||||
width: calc(100% * 1 / 3 - 1em - .01px);
|
||||
}
|
||||
[class*="-small-3"] > .flexitem-double {
|
||||
width: calc(100% * 2 / 3 - 1em - .01px);
|
||||
}
|
||||
[class*="-small-2"] > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
[class*="-small-2"] > .flexitem-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
[class*="-small-1"] > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
[class*="-small-1"] > .flexitem-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-12 > * {
|
||||
[class*="-tiny-2"] > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
[class*="-tiny-2"] > .flexitem-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
.grid-12 > .flex-item-double {
|
||||
[class*="-tiny-1"] > * {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
[class*="-tiny-1"] > .flexitem-double {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-2-1 > *:nth-child(odd) {
|
||||
width: calc(66.66666666666666% - 1em);
|
||||
width: calc(66.66666666666666% - 1em - .01px);
|
||||
}
|
||||
.grid-2-1 > *:nth-child(even) {
|
||||
width: calc(33.33333333333333% - 1em);
|
||||
width: calc(33.33333333333333% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-2-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-1-2 > *:nth-child(odd) {
|
||||
width: calc(33.33333333333333% - 1em);
|
||||
width: calc(33.33333333333333% - 1em - .01px);
|
||||
}
|
||||
.grid-1-2 > *:nth-child(even) {
|
||||
width: calc(66.66666666666666% - 1em);
|
||||
width: calc(66.66666666666666% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-1-2 > *:nth-child(n) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-3-1 > *:nth-child(odd) {
|
||||
width: calc(75% - 1em);
|
||||
width: calc(75% - 1em - .01px);
|
||||
}
|
||||
.grid-3-1 > *:nth-child(even) {
|
||||
width: calc(25% - 1em);
|
||||
width: calc(25% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-3-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-1-3 > *:nth-child(odd) {
|
||||
width: calc(25% - 1em);
|
||||
width: calc(25% - 1em - .01px);
|
||||
}
|
||||
.grid-1-3 > *:nth-child(even) {
|
||||
width: calc(75% - 1em);
|
||||
width: calc(75% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-1-3 > *:nth-child(n) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-3-2 > *:nth-child(odd) {
|
||||
width: calc(60% - 1em);
|
||||
width: calc(60% - 1em - .01px);
|
||||
}
|
||||
.grid-3-2 > *:nth-child(even) {
|
||||
width: calc(40% - 1em);
|
||||
width: calc(40% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-3-2 > *:nth-child(n) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-2-3 > *:nth-child(odd) {
|
||||
width: calc(40% - 1em);
|
||||
width: calc(40% - 1em - .01px);
|
||||
}
|
||||
.grid-2-3 > *:nth-child(even) {
|
||||
width: calc(60% - 1em);
|
||||
width: calc(60% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-2-3 > *:nth-child(n) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-4-1 > *:nth-child(odd) {
|
||||
width: calc(80% - 1em);
|
||||
width: calc(80% - 1em - .01px);
|
||||
}
|
||||
.grid-4-1 > *:nth-child(even) {
|
||||
width: calc(20% - 1em);
|
||||
width: calc(20% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-4-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
.grid-1-4 > *:nth-child(odd) {
|
||||
width: calc(20% - 1em);
|
||||
width: calc(20% - 1em - .01px);
|
||||
}
|
||||
.grid-1-4 > *:nth-child(even) {
|
||||
width: calc(80% - 1em);
|
||||
width: calc(80% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-1-4 > *:nth-child(n) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
/* ----------------------------- */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -6,7 +6,7 @@ Il existe deux types principaux de systèmes de grilles dans KNACSS :
|
|||
|
||||
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 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`).
|
||||
**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
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ Par défaut, chaque colonne est séparée de sa voisine par une gouttière dont
|
|||
|
||||
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.
|
||||
|
||||
## Offsets
|
||||
## 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".
|
||||
|
||||
|
|
@ -112,7 +112,7 @@ Résultat :
|
|||
|
||||
Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
|
||||
|
||||
- `.flex-item-first` (l'élément apparaîtra avant tous les autres)
|
||||
- `.flex-item-first` (l'élément apparaîtra avant tous les autres)
|
||||
- `.flex-item-last` (l'élément apparaîtra tout à la fin de la grille)
|
||||
|
||||
HTML :
|
||||
|
|
@ -128,6 +128,23 @@ 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>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
|
@ -147,7 +164,7 @@ Il vous suffit de modifier les valeurs de ces variables de config pour répercut
|
|||
|
||||
### 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 :
|
||||
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
|
||||
- `.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
|
||||
|
|
@ -158,8 +175,8 @@ Indépendamment des variables de configuration, rien de vous empêche de créer
|
|||
|
||||
LESS (fichier de développement) :
|
||||
```css
|
||||
.grid-container {
|
||||
.grid(6);
|
||||
.grid-container {
|
||||
.grid(6);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -189,7 +206,7 @@ CSS compilé (sans Autoprefixer) :
|
|||
LESS (fichier de développement) :
|
||||
|
||||
```css
|
||||
.grid-truc {
|
||||
.grid-truc {
|
||||
.uneven-grid(2, 1);
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com V4.2.3 (1er juillet 2015) @author: Raphael Goetter, Alsacreations
|
||||
* www.KNACSS.com V4.3.1 (5 juillet 2015) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "4.3.0",
|
||||
"version": "4.3.1",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/raphaelgoetter/KNACSS/issues",
|
||||
"author": [
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com V4.2.3 (1er juillet 2015) @author: Raphael Goetter, Alsacreations
|
||||
* www.KNACSS.com V4.3.1 (5 juillet 2015) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue