dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

.grid-item-first, .grid-item-medium et .grid-item-last

Browse source
This commit is contained in:
Raphael Goetter 2016-05-23 14:36:39 +02:00
parent 478e27b2f6
commit e75663c70e
5 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -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 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) - 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-` - 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/) - ajout de la library include-media (http://include-media.com/)
- grille "grillade" à présent en mobile first - 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 - 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 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 : - 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 ? ### Utilisateur de SPIP ?

9
changelog.md
View file

@ -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 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é) - 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 - 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-` - 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 - 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 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) - 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` - 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 - renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
- ajout de commentaires dans les grilles - 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 - 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) # changelog v4.4.5 (1er avril 2016)

1
doc/00-commencer.md
View file

@ -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 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) - 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-` - 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/) - ajout de la library include-media (http://include-media.com/)
- grille "grillade" à présent en mobile first - grille "grillade" à présent en mobile first

12
sass/_layout-general.scss
View file

@ -121,18 +121,22 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
min-width: 0; min-width: 0;
} }
.#{$kna-namespace}flex-item-first { .#{$kna-namespace}flex-item-first,
.#{$kna-namespace}grid-item-first {
order : -1; order : -1;
} }
.#{$kna-namespace}flex-item-medium { .#{$kna-namespace}flex-item-medium,
.#{$kna-namespace}grid-item-medium {
order : 0; order : 0;
} }
.#{$kna-namespace}flex-item-last { .#{$kna-namespace}flex-item-last,
.#{$kna-namespace}grid-item-last {
order : 1; order : 1;
} }
.#{$kna-namespace}flex-item-center { .#{$kna-namespace}flex-item-center,
.#{$kna-namespace}grid-item-center {
margin: auto; margin: auto;
} }

12
sass/_layout-grids.scss
View file

@ -36,7 +36,7 @@
& { & {
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px); width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
} }
&.flex-item-double { &.grid-item-double {
width: calc(100% - #{$grid-gutter} - .01px); width: calc(100% - #{$grid-gutter} - .01px);
} }
} }
@ -54,7 +54,7 @@
margin-left: $newgutter; margin-left: $newgutter;
} }
} }
& > .#{$kna-namespace}flex-item-double { & > .#{$kna-namespace}grid-item-double {
width: calc(100% * 2 / #{$grid-number} - #{$newgutter}); width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
} }
} }
@ -74,25 +74,25 @@
[class*="-small-4"] > * { [class*="-small-4"] > * {
width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px); 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); width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
} }
[class*="-small-3"] > * { [class*="-small-3"] > * {
width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px); 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); width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
} }
[class*="-small-2"] > * { [class*="-small-2"] > * {
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px); 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); width: calc(100% - #{$grid-gutter} - .01px);
} }
[class*="-small-1"] > * { [class*="-small-1"] > * {
width: calc(100% - #{$grid-gutter} - .01px); width: calc(100% - #{$grid-gutter} - .01px);
} }
[class*="-small-1"] > .flex-item-double { [class*="-small-1"] > .grid-item-double {
width: calc(100% - #{$grid-gutter} - .01px); width: calc(100% - #{$grid-gutter} - .01px);
} }
} }