.grid-item-first, .grid-item-medium et .grid-item-last
This commit is contained in:
Raphael Goetter
parent
478e27b2f6
commit
e75663c70e
5 changed files with 22 additions and 15 deletions
|
|
@ -90,6 +90,7 @@ Voici les principales modifications dont il faudra tenir compte lors d'une bascu
|
|||
- 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-`
|
||||
- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
|
||||
- ajout de la library include-media (http://include-media.com/)
|
||||
- grille "grillade" à présent en mobile first
|
||||
|
||||
|
|
@ -98,7 +99,7 @@ Voici les principales modifications dont il faudra tenir compte lors d'une bascu
|
|||
- La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`) : `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche; `.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
|
||||
- Les noms des conteneurs de grille ont changé et nécessitent systématiquement un trait d'union : ancien nommage : `.grid2`, `.grid1-3`; nouveau nommage : `.grid-2`, `.grid-1-3`
|
||||
- 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). Nouveau nommage :
|
||||
`.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last`
|
||||
`.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last`
|
||||
|
||||
### Utilisateur de SPIP ?
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
# changelog v5.0.0 (16 mai 2016)
|
||||
# changelog v5.0.0 (23 mai 2016)
|
||||
- suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
|
||||
- suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)
|
||||
- mise à jour vers Normalize 4.1.1 : https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md
|
||||
- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
|
||||
- ajout de la library include-media (http://include-media.com/) pour faciliter la gestion des media queries
|
||||
- adaptation des variables de breakpoint pour les rendre compatibles avec include-media
|
||||
- adaptation des fichiers gulpfile, package.json et bower.json
|
||||
- grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
|
||||
- nommage de variables préfixé pour plus de maintenabilité : `$gutter` -> `$grid-gutter`, `$number` -> `$grid-number`, `$left` -> `$grid-left` et `$right` -> `$grid-right`
|
||||
- mise à jour de la documentation
|
||||
- ajout de commentaires dans les grilles
|
||||
- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
|
||||
- ajout des éléments de layout : `.grid-item-first`, `.grid-item-medium` et `.grid-item-last`
|
||||
- ajout de Table des Matières dans la feuille de style non minifiée
|
||||
- adaptation des fichiers gulpfile, package.json et bower.json
|
||||
- mise à jour de la documentation
|
||||
|
||||
# changelog v4.4.5 (1er avril 2016)
|
||||
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@ Voici les principales modifications dont il faudra tenir compte lors d'une bascu
|
|||
- 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-`
|
||||
- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
|
||||
- ajout de la library include-media (http://include-media.com/)
|
||||
- grille "grillade" à présent en mobile first
|
||||
|
||||
|
|
|
|||
|
|
@ -121,18 +121,22 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-first {
|
||||
.#{$kna-namespace}flex-item-first,
|
||||
.#{$kna-namespace}grid-item-first {
|
||||
order : -1;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-medium {
|
||||
.#{$kna-namespace}flex-item-medium,
|
||||
.#{$kna-namespace}grid-item-medium {
|
||||
order : 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-last {
|
||||
.#{$kna-namespace}flex-item-last,
|
||||
.#{$kna-namespace}grid-item-last {
|
||||
order : 1;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-center {
|
||||
.#{$kna-namespace}flex-item-center,
|
||||
.#{$kna-namespace}grid-item-center {
|
||||
margin: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
& {
|
||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
&.flex-item-double {
|
||||
&.grid-item-double {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
margin-left: $newgutter;
|
||||
}
|
||||
}
|
||||
& > .#{$kna-namespace}flex-item-double {
|
||||
& > .#{$kna-namespace}grid-item-double {
|
||||
width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
|
||||
}
|
||||
}
|
||||
|
|
@ -74,25 +74,25 @@
|
|||
[class*="-small-4"] > * {
|
||||
width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-4"] > .flex-item-double {
|
||||
[class*="-small-4"] > .grid-item-double {
|
||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-3"] > * {
|
||||
width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-3"] > .flex-item-double {
|
||||
[class*="-small-3"] > .grid-item-double {
|
||||
width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-2"] > * {
|
||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-2"] > .flex-item-double {
|
||||
[class*="-small-2"] > .grid-item-double {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-1"] > * {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-1"] > .flex-item-double {
|
||||
[class*="-small-1"] > .grid-item-double {
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue