diff --git a/changelog.md b/changelog.md index 1a61b4a..4ea8d89 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,9 @@ +# changelog v4.3.4 (27 août 2015) + +- ajout des classes `.pull` et `.push` pour les offsets des grilles +- corrections de la doc Print et Commencer +- corrections de nommages reliquats : `.flexitem-double` -> `.flex-item-double` + # changelog v4.3.3 (6 août 2015) - ajout de helpers (breakpoints responsive) diff --git a/less/_03-grids.less b/less/_03-grids.less index 632860e..a8441ca 100644 --- a/less/_03-grids.less +++ b/less/_03-grids.less @@ -4,37 +4,35 @@ // Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html // Demo : http://codepen.io/raphaelgoetter/pen/zxBMLW - // Usage in vanilla CSS: // -
for an equal fourth columns grid container // -
for an uneven columns grid container - // Usage with preprocessors : if you're using LESS, you can config grids variables : // n = number of columns (default = 4) // example : .grid-perso { .grid(12); } // ... or uneven grids : // left = left ratio column (default = 2) / right = right ratio column (default = 1) // example : .grid-perso { .uneven-grid(2, 1); } - /* grid container */ + [class*="@{kna-namespace}grid-"] { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -@gutter; - /* inline-block fallback for IE9 generation */ + letter-spacing: -0.31em; text-rendering: optimizespeed; } - /* grid childs */ + [class*="@{kna-namespace}grid-"] > * { flex: 0 0 auto; width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)'; margin-left: @gutter; - /* inline-block fallback for IE9 generation */ + display: inline-block; vertical-align: top; letter-spacing: normal; @@ -43,11 +41,15 @@ // LESS mixins for *equal* columns grid container // example : .grid-perso { .grid(12); } -.grid(@number:@number, @gutter:@gutter) { +.grid(@number: @number, +@gutter: @gutter) { & > * { width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)'; } - & > .@{kna-namespace}flex-item-double { + & > .@ { + kna-namespace + } + flex-item-double { width: ~'calc(100% * 2 / @{number} - @{gutter} - .01px)'; } } @@ -56,81 +58,92 @@ [class*="@{kna-namespace}grid-2"] { .grid(2); } + [class*="@{kna-namespace}grid-3"] { .grid(3); } + [class*="@{kna-namespace}grid-4"] { .grid(4); } + [class*="@{kna-namespace}grid-5"] { .grid(5); } + [class*="@{kna-namespace}grid-6"] { .grid(6); } + [class*="@{kna-namespace}grid-7"] { .grid(7); } + [class*="@{kna-namespace}grid-8"] { .grid(8); } + [class*="@{kna-namespace}grid-10"] { .grid(10); } + [class*="@{kna-namespace}grid-12"] { .grid(12); } - /* Responsive grid */ + // "small-2" = 2 columns when small screen // example : .grid-4-small-2 will be 4 then 2 columns @media (max-width: @small-screen) { [class*="-small-4"] > * { width: ~'calc(100% * 1 / 4 - @{gutter} - .01px)'; } - [class*="-small-4"] > .flexitem-double { + [class*="-small-4"] > .flex-item-double { width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; } [class*="-small-3"] > * { width: ~'calc(100% * 1 / 3 - @{gutter} - .01px)'; } - [class*="-small-3"] > .flexitem-double { + [class*="-small-3"] > .flex-item-double { width: ~'calc(100% * 2 / 3 - @{gutter} - .01px)'; } [class*="-small-2"] > * { width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; } - [class*="-small-2"] > .flexitem-double { + [class*="-small-2"] > .flex-item-double { width: ~'calc(100% - @{gutter} - .01px)'; } [class*="-small-1"] > * { width: ~'calc(100% - @{gutter} - .01px)'; } - [class*="-small-1"] > .flexitem-double { + [class*="-small-1"] > .flex-item-double { width: ~'calc(100% - @{gutter} - .01px)'; } } + // "tiny-1" = 1 column when tiny screen // example : .grid-4-small-2-tiny-1 will be 4 then 2 columns then 1 column @media (max-width: @tiny-screen) { [class*="-tiny-2"] > * { width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; } - [class*="-tiny-2"] > .flexitem-double { + [class*="-tiny-2"] > .flex-item-double { width: ~'calc(100% - @{gutter} - .01px)'; } [class*="-tiny-1"] > * { width: ~'calc(100% - @{gutter} - .01px)'; } - [class*="-tiny-1"] > .flexitem-double { + [class*="-tiny-1"] > .flex-item-double { width: ~'calc(100% - @{gutter} - .01px)'; } } // LESS mixins for *unequal* columns grid container // example : .grid-perso { .uneven-grid(2, 1); } -.uneven-grid(@left:@left, @right:@right, @gutter:@gutter) { - & > *:nth-child(odd) { +.uneven-grid(@left: @left, +@right: @right, +@gutter: @gutter) { + & > *: nth-child(odd) { @size: (@left / (@left + @right)) * 100%; width: ~'calc(@{size} - @{gutter} - .01px)'; } @@ -139,42 +152,89 @@ width: ~'calc(@{size} - @{gutter} - .01px)'; } @media (max-width: @small-screen) { - & > *:nth-child(n) { + & > *: nth-child(n) { width: ~'calc(100% - @{gutter} - .01px)'; } } } // Examples : will be compiled in CSS -.@{kna-namespace}grid-2-1 { - .uneven-grid(2,1); -} -.@{kna-namespace}grid-1-2 { - .uneven-grid(1,2); -} -.@{kna-namespace}grid-3-1 { - .uneven-grid(3,1); -} -.@{kna-namespace}grid-1-3 { - .uneven-grid(1,3); -} -.@{kna-namespace}grid-3-2 { - .uneven-grid(3,2); -} -.@{kna-namespace}grid-2-3 { - .uneven-grid(2,3); -} -.@{kna-namespace}grid-4-1 { - .uneven-grid(4,1); -} -.@{kna-namespace}grid-1-4 { - .uneven-grid(1,4); +.@ { + kna-namespace } -.@{kna-namespace}pull { +grid-2-1 { + .uneven-grid(2, 1); +} + +.@ { + kna-namespace +} + +grid-1-2 { + .uneven-grid(1, 2); +} + +.@ { + kna-namespace +} + +grid-3-1 { + .uneven-grid(3, 1); +} + +.@ { + kna-namespace +} + +grid-1-3 { + .uneven-grid(1, 3); +} + +.@ { + kna-namespace +} + +grid-3-2 { + .uneven-grid(3, 2); +} + +.@ { + kna-namespace +} + +grid-2-3 { + .uneven-grid(2, 3); +} + +.@ { + kna-namespace +} + +grid-4-1 { + .uneven-grid(4, 1); +} + +.@ { + kna-namespace +} + +grid-1-4 { + .uneven-grid(1, 4); +} + +.@ { + kna-namespace +} + +pull { margin-right: auto; } -.@{kna-namespace}push { - margin-left: auto; +.@ { + kna-namespace } + +push { + margin-left: auto; +} \ No newline at end of file diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss index 1924ad6..3993146 100644 --- a/sass/_03-grids.scss +++ b/sass/_03-grids.scss @@ -4,37 +4,41 @@ // Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html // Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB - // Usage in vanilla CSS: // -
for an equal fourth columns grid container // -
for an uneven columns grid container - // Usage with preprocessors : if you're using Sass, you can config grids variables : // n = number of columns (default = 4) / g = gutter value (default = 1em) // example : .grid-perso { @include grid(12, 10px); } // ... or uneven grids : // left = left ratio column (default = 2) / right = right ratio column (default = 1) // example : .grid-perso { @include uneven-grid(2, 1, 10px); } - /* grid container */ + [class*="#{$kna-namespace}grid-"] { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -$gutter; - /* inline-block fallback for IE9 generation */ + letter-spacing: -0.31em; text-rendering: optimizespeed; } - /* grid childs */ + [class*="#{$kna-namespace}grid-"] > * { flex: 0 0 auto; - width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); + width: calc(100% * 1 / # { + $number + } + - # { + $gutter + } + - .01px); margin-left: $gutter; - /* inline-block fallback for IE9 generation */ + display: inline-block; vertical-align: top; letter-spacing: normal; @@ -43,17 +47,32 @@ // Sass mixins for *equal* columns grid container // example : .grid-perso { @include grid(12); } -@mixin grid($number:$number,$gutter:$gutter) { +@mixin grid($number:$number, +$gutter:$gutter) { & > * { - width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); + width: calc(100% * 1 / # { + $number + } + - # { + $gutter + } + - .01px); } - & > .#{$kna-namespace}flex-item-double { - width: calc(100% * 2 / #{$number} - #{$gutter}); + & > .# { + $kna-namespace + } + flex-item-double { + width: calc(100% * 2 / # { + $number + } + - # { + $gutter + } + ); } } // Examples : will be compiled in CSS - [class*="#{$kna-namespace}grid-2"] { @include grid(2); } @@ -89,111 +108,202 @@ [class*="#{$kna-namespace}grid-12"] { @include grid(12); } - /* Responsive grid */ + // "small-2" = 2 columns when small screen // example : .grid-4-small-2 will be 4 then 2 columns @media (max-width: $small-screen) { [class*="-small-4"] > * { - width: calc(100% * 1 / 4 - #{$gutter} - .01px); + width: calc(100% * 1 / 4 - # { + $gutter + } + - .01px); } - [class*="-small-4"] > .flexitem-double { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); + [class*="-small-4"] > .flex-item-double { + width: calc(100% * 1 / 2 - # { + $gutter + } + - .01px); } [class*="-small-3"] > * { - width: calc(100% * 1 / 3 - #{$gutter} - .01px); + width: calc(100% * 1 / 3 - # { + $gutter + } + - .01px); } - [class*="-small-3"] > .flexitem-double { - width: calc(100% * 2 / 3 - #{$gutter} - .01px); + [class*="-small-3"] > .flex-item-double { + width: calc(100% * 2 / 3 - # { + $gutter + } + - .01px); } [class*="-small-2"] > * { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); + width: calc(100% * 1 / 2 - # { + $gutter + } + - .01px); } - [class*="-small-2"] > .flexitem-double { - width: calc(100% - #{$gutter} - .01px); + [class*="-small-2"] > .flex-item-double { + width: calc(100% - # { + $gutter + } + - .01px); } [class*="-small-1"] > * { - width: calc(100% - #{$gutter} - .01px); + width: calc(100% - # { + $gutter + } + - .01px); } - [class*="-small-1"] > .flexitem-double { - width: calc(100% - #{$gutter} - .01px); + [class*="-small-1"] > .flex-item-double { + width: calc(100% - # { + $gutter + } + - .01px); } } + // "tiny-1" = 1 column when tiny screen // example : .grid-4-small-2-tiny-1 will be 4 then 2 columns then 1 column @media (max-width: $tiny-screen) { [class*="-tiny-2"] > * { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); + width: calc(100% * 1 / 2 - # { + $gutter + } + - .01px); } - [class*="-tiny-2"] > .flexitem-double { - width: calc(100% - #{$gutter} - .01px); + [class*="-tiny-2"] > .flex-item-double { + width: calc(100% - # { + $gutter + } + - .01px); } [class*="-tiny-1"] > * { - width: calc(100% - #{$gutter} - .01px); + width: calc(100% - # { + $gutter + } + - .01px); } - [class*="-tiny-1"] > .flexitem-double { - width: calc(100% - #{$gutter} - .01px); + [class*="-tiny-1"] > .flex-item-double { + width: calc(100% - # { + $gutter + } + - .01px); } } // LESS mixins for *unequal* columns grid container // example : .grid-perso { @include uneven-grid(2, 1); } -@mixin uneven-grid($left:$left, $right:$right, $gutter:$gutter) { - & > *:nth-child(odd) { +@mixin uneven-grid($left:$left, +$right:$right, +$gutter:$gutter) { + & > *: nth-child(odd) { $size: ($left / ($left + $right)) * 100%; - width: calc(#{$size} - #{$gutter}); + width: calc(# { + $size + } + - # { + $gutter + } + ); } & > *:nth-child(even) { $size: ($right / ($left + $right)) * 100%; - width: calc(#{$size} - #{$gutter}); + width: calc(# { + $size + } + - # { + $gutter + } + ); } @media (max-width: $small-screen) { - & > *:nth-child(n) { - width: calc(100% - #{$gutter}); + & > *: nth-child(n) { + width: calc(100% - # { + $gutter + } + ); } } } - // Examples : will be compiled in CSS - -.#{$kna-namespace}grid-2-1 { - @include uneven-grid(2,1); +.# { + $kna-namespace } -.#{$kna-namespace}grid-1-2 { - @include uneven-grid(1,2); +grid-2-1 { + @include uneven-grid(2, 1); } -.#{$kna-namespace}grid-3-1 { - @include uneven-grid(3,1); +.# { + $kna-namespace } -.#{$kna-namespace}grid-1-3 { - @include uneven-grid(1,3); +grid-1-2 { + @include uneven-grid(1, 2); } -.#{$kna-namespace}grid-3-2 { - @include uneven-grid(3,2); +.# { + $kna-namespace } -.#{$kna-namespace}grid-2-3 { - @include uneven-grid(2,3); +grid-3-1 { + @include uneven-grid(3, 1); } -.#{$kna-namespace}grid-4-1 { - @include uneven-grid(4,1); +.# { + $kna-namespace } -.#{$kna-namespace}grid-1-4 { - @include uneven-grid(1,4); +grid-1-3 { + @include uneven-grid(1, 3); } -.#{$kna-namespace}pull { +.# { + $kna-namespace +} + +grid-3-2 { + @include uneven-grid(3, 2); +} + +.# { + $kna-namespace +} + +grid-2-3 { + @include uneven-grid(2, 3); +} + +.# { + $kna-namespace +} + +grid-4-1 { + @include uneven-grid(4, 1); +} + +.# { + $kna-namespace +} + +grid-1-4 { + @include uneven-grid(1, 4); +} + +.# { + $kna-namespace +} + +pull { margin-right: auto; } -.#{$kna-namespace}push { - margin-left: auto; +.# { + $kna-namespace } +push { + margin-left: auto; +} \ No newline at end of file