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

flexbox renommage des classes

Browse source
This commit is contained in:
raphaelgoettter 2015-04-13 16:10:55 +02:00
parent 0d9c9d9477
commit 7e73344592
8 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
doc/02b-layout-positionnement.md
View file

@ -115,7 +115,7 @@ HTML :
```html ```html
<div class="flexbox"> <div class="flexbox">
<div class="w400p">premier</div> <div class="w400p">premier</div>
<div class="flexitem-fluid">deuxième</div> <div class="flex-item-fluid">deuxième</div>
</div> </div>
``` ```

10
doc/03-grilles.md
View file

@ -93,13 +93,13 @@ Résultat :
Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille. Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille.
Pour ce faire, appliquez la classe `.flexitem-double` à cet élément. Pour ce faire, appliquez la classe `.flex-item-double` à cet élément.
HTML : HTML :
```html ```html
<div class="grid-4"> <div class="grid-4">
<div>un div ou n'importe quoi d'autre</div> <div>un div ou n'importe quoi d'autre</div>
<div class="flexitem-double">je suis deux fois plus large que mes frères</div> <div class="flex-item-double">je suis deux fois plus large que mes frères</div>
<div>un 3è div ou n'importe quoi d'autre</div> <div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div> <div>etc.</div>
</div> </div>
@ -112,14 +112,14 @@ Résultat :
Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes : Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
- `.flexitem-first` (l'élément apparaîtra avant tous les autres) - `.flex-item-first` (l'élément apparaîtra avant tous les autres)
- `.flexitem-last` (l'élément apparaîtra tout à la fin de la grille) - `.flex-item-last` (l'élément apparaîtra tout à la fin de la grille)
HTML : HTML :
```html ```html
<div class="grid-4"> <div class="grid-4">
<div>un div ou n'importe quoi d'autre</div> <div>un div ou n'importe quoi d'autre</div>
<div class="flexitem-first">je m'affiche avant tous mes frères</div> <div class="flex-item-first">je m'affiche avant tous mes frères</div>
<div>un 3è div ou n'importe quoi d'autre</div> <div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div> <div>etc.</div>
</div> </div>

19
less/_02-layout.less
View file

@ -102,34 +102,35 @@ body > script {
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/ */
.flexbox, .flex-container {
.flexbox-h,
.flexbox-v {
display : flex; display : flex;
flex-wrap: wrap; flex-wrap: wrap;
}
.flex-container-h {
flex-direction: row; flex-direction: row;
} }
.flexbox-v { .flex-container-v {
flex-direction: column; flex-direction: column;
} }
.flexitem-fluid { .flex-item-fluid {
flex: 1; flex: 1;
} }
.flexitem-first { .flex-item-first {
order : -1; order : -1;
} }
.flexitem-medium { .flex-item-medium {
order : 0; order : 0;
} }
.flexitem-last { .flex-item-last {
order : 1; order : 1;
} }
.flexitem-center { .flex-item-center {
margin: auto; margin: auto;
} }

6
less/_03-grids.less
View file

@ -38,14 +38,14 @@
& > * { & > * {
width: ~'calc(100% * 1 / @{number} - @{gutter})'; width: ~'calc(100% * 1 / @{number} - @{gutter})';
} }
& > .flexitem-double { & > .flex-item-double {
width: ~'calc(100% * 2 / @{number} - @{gutter})'; width: ~'calc(100% * 2 / @{number} - @{gutter})';
} }
@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) { @media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
& > * { & > * {
width: ~'calc(100% * 1 / 2 - @{gutter})'; width: ~'calc(100% * 1 / 2 - @{gutter})';
} }
& > .flexitem-double { & > .flex-item-double {
width: ~'calc(100% - @{gutter})'; width: ~'calc(100% - @{gutter})';
} }
} }
@ -53,7 +53,7 @@
& > * { & > * {
width: ~'calc(100% - @{gutter})'; width: ~'calc(100% - @{gutter})';
} }
& > .flexitem-double { & > .flex-item-double {
width: ~'calc(100% - @{gutter})'; width: ~'calc(100% - @{gutter})';
} }
} }

2
less/_07-responsive.less
View file

@ -269,7 +269,7 @@
border: 0; border: 0;
} }
.flexbox { .flex-container {
flex-direction: column; flex-direction: column;
} }

19
sass/_02-layout.scss
View file

@ -102,34 +102,35 @@ body > script {
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/ */
.flexbox, .flex-container {
.flexbox-h,
.flexbox-v {
display : flex; display : flex;
flex-wrap: wrap; flex-wrap: wrap;
}
.flex-container-h {
flex-direction: row; flex-direction: row;
} }
.flexbox-v { .flex-container-v {
flex-direction: column; flex-direction: column;
} }
.flexitem-fluid { .flex-item-fluid {
flex: 1; flex: 1;
} }
.flexitem-first { .flex-item-first {
order : -1; order : -1;
} }
.flexitem-medium { .flex-item-medium {
order : 0; order : 0;
} }
.flexitem-last { .flex-item-last {
order : 1; order : 1;
} }
.flexitem-center { .flex-item-center {
margin: auto; margin: auto;
} }

6
sass/_03-grids.scss
View file

@ -38,14 +38,14 @@
& > * { & > * {
width: calc(100% * 1 / #{$number} - #{$gutter}); width: calc(100% * 1 / #{$number} - #{$gutter});
} }
& > .flexitem-double { & > .flex-item-double {
width: calc(100% * 2 / #{$number} - #{$gutter}); width: calc(100% * 2 / #{$number} - #{$gutter});
} }
@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) { @media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
& > * { & > * {
width: calc(100% * 1 / 2 - #{$gutter}); width: calc(100% * 1 / 2 - #{$gutter});
} }
& > .flexitem-double { & > .flex-item-double {
width: calc(100% - #{$gutter}); width: calc(100% - #{$gutter});
} }
} }
@ -53,7 +53,7 @@
& > * { & > * {
width: calc(100% - #{$gutter}); width: calc(100% - #{$gutter});
} }
& > .flexitem-double { & > .flex-item-double {
width: calc(100% - #{$gutter}); width: calc(100% - #{$gutter});
} }
} }

2
sass/_07-responsive.scss
View file

@ -268,7 +268,7 @@
border: 0; border: 0;
} }
.flexbox { .flex-container {
flex-direction: column; flex-direction: column;
} }