diff --git a/README.md b/README.md index 04b7ff5..951717c 100644 --- a/README.md +++ b/README.md @@ -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 ? diff --git a/changelog.md b/changelog.md index b95d3b6..bd742e1 100644 --- a/changelog.md +++ b/changelog.md @@ -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) diff --git a/doc/00-commencer.md b/doc/00-commencer.md index 7675327..951717c 100644 --- a/doc/00-commencer.md +++ b/doc/00-commencer.md @@ -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 diff --git a/sass/_layout-general.scss b/sass/_layout-general.scss index 61d0062..9d398bb 100644 --- a/sass/_layout-general.scss +++ b/sass/_layout-general.scss @@ -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; } diff --git a/sass/_layout-grids.scss b/sass/_layout-grids.scss index c5a44b0..8f68357 100644 --- a/sass/_layout-grids.scss +++ b/sass/_layout-grids.scss @@ -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); } }