From 603e9c2fa942034e145204418fb29d09f8087895 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Tue, 7 Mar 2017 17:43:34 +0100 Subject: [PATCH] Creation de mixin multinavigateurs et comp grillade --- styl/config/_mixins.styl | 42 ++++-- styl/grids/_grillade.styl | 285 +++++++------------------------------- 2 files changed, 80 insertions(+), 247 deletions(-) diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl index 16dd059..7dbb788 100644 --- a/styl/config/_mixins.styl +++ b/styl/config/_mixins.styl @@ -2,32 +2,50 @@ // ex. @include respond-to("medium-up") {...} breakpoint(bp) if bp == 'tiny' - return '(max-width: {tiny})' + return '(max-width: %s)' % tiny else if bp == 'small' - return '(max-width: {small})' + return '(max-width: %s)' % small else if bp == 'medium' - return '(max-width: {medium})' + return '(max-width: %s)' % medium else if bp == 'large' - return '(max-width: {large})' + return '(max-width: %s)' % large else if bp == 'extra-large' - return '(max-width: {extra-large})' + return '(max-width: %s)' % extra-large else if bp == 'tiny-up' - return '(min-width: {tiny + 1})' + return '(min-width: %s + 1)' % tiny else if bp == 'small-up' - return '(min-width: {small + 1})' + return '(min-width: %s + 1)' % small else if bp == 'medium-up' - return '(min-width: {medium + 1})' + return '(min-width: %s + 1)' % medium else if bp == 'large-up' - return '(min-width: {large + 1})' + return '(min-width: %s + 1)' % large else if bp == 'extra-large-up' - return '(min-width: {extra-large + 1})' + return '(min-width: %s + 1)' % extra-large else if bp == 'retina' return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)' - /* respond-to(value) string = breakpoint(value) - @media screen and {string} + @media screen and string {block} */ + +displayFlex() + display: -webkit-box + display: -ms-flexbox + display: flex + +box-orient() + -webkit-box-orient arguments + +box-direction() + -webkit-box-direction arguments + +flex-direction() + -ms-flex-direction arguments + flex-direction arguments + +flex-wrap() + -ms-flex-wrap arguments + flex-wrap arguments diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl index 5c7f34d..ea65fce 100644 --- a/styl/grids/_grillade.styl +++ b/styl/grids/_grillade.styl @@ -14,16 +14,11 @@ medium = 991px large = 1199px extra-large = 1439px -displayFlex() - display: -webkit-box - display: -ms-flexbox - display: flex - @media (min-width: tiny + 1) [class*=" grid-"] [class^="grid-"] displayFlex() - -webkit-box-orient: horizontal + box-orient(horizontal) -webkit-box-direction: normal flex-direction: row flex-wrap: wrap @@ -36,20 +31,18 @@ displayFlex() // example : .grid-perso { @include grid(12, 3rem); } grid(grid-number = 1, own-gutter = 0) & > * - width: calc(100% / grid-number - iefix) - - for key, size in grid-gutters + width 'calc(100% / %s - %s)' % (grid-number iefix) + for key, size in grid-gutters &.has-gutter{key} - margin-right: -(size / 2) - margin-left: -(size / 2) + margin-right -(size / 2) + margin-left -(size / 2) & > * - width: calc(100% / grid-number - size - iefix) - margin-right size / 2 - margin-left size / 2 - - if own-gutter != 0 - margin-right: own-gutter / 2 - margin-left: own-gutter / 2 + width 'calc(100% / %s - %s - %s)' % (grid-number size iefix) + margin-right (size / 2) + margin-left (size / 2) + if own-gutter != 0 + margin-right (own-gutter / 2) + margin-left (own-gutter / 2) // Mono-line grid constructor (.grid) @media (min-width: tiny + 1) @@ -57,14 +50,13 @@ grid(grid-number = 1, own-gutter = 0) .grid--reverse displayFlex() & > * - flex: 1 1 0% - box-sizing: border-box - min-width: 0 - min-height: 0 - + flex 1 1 0% + box-sizing border-box + min-width 0 + min-height 0 for key, size in grid-gutters &.has-gutter{key} > * + * - margin-left: size - iefix + margin-left 'calc(%s - %s)' % (size iefix) // Constructing grids : will be compiled in CSS @media (min-width: tiny + 1) @@ -73,221 +65,44 @@ grid(grid-number = 1, own-gutter = 0) [class*={grid-selector}] > * grid(i, 0) -.push { - margin-left: auto !important; -} +.push + margin-left auto !important -.pull { - margin-right: auto !important; -} +.pull + margin-right auto !important -.item-first { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; -} +.item-first + -webkit-box-ordinal-group 0 + -ms-flex-order -1 + order -1 -.item-last { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; -} +.item-last + -webkit-box-ordinal-group 2 + -ms-flex-order 1 + order 1 -/*[class*="grid-"][class*="--reverse"] { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; -}*/ +[class*="grid-"][class*="--reverse"] + -webkit-box-orient: horizontal + -webkit-box-direction: reverse + flex-direction row-reverse -/*@media (min-width: 544px) { - .full { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 1 - 0.01px); - } - .has-gutter .full { - width: calc(100% / 1 - 1rem - 0.01px); - } - .has-gutter-l .full { - width: calc(100% / 1 - 2rem - 0.01px); - } - .has-gutter-xl .full { - width: calc(100% / 1 - 4rem - 0.01px); - } - .one-half { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 2 - 0.01px); - } - .has-gutter .one-half { - width: calc(100% / 2 - 1rem - 0.01px); - } - .has-gutter-l .one-half { - width: calc(100% / 2 - 2rem - 0.01px); - } - .has-gutter-xl .one-half { - width: calc(100% / 2 - 4rem - 0.01px); - } - .one-third { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 3 - 0.01px); - } - .has-gutter .one-third { - width: calc(100% / 3 - 1rem - 0.01px); - } - .has-gutter-l .one-third { - width: calc(100% / 3 - 2rem - 0.01px); - } - .has-gutter-xl .one-third { - width: calc(100% / 3 - 4rem - 0.01px); - } - .one-quarter { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 4 - 0.01px); - } - .has-gutter .one-quarter { - width: calc(100% / 4 - 1rem - 0.01px); - } - .has-gutter-l .one-quarter { - width: calc(100% / 4 - 2rem - 0.01px); - } - .has-gutter-xl .one-quarter { - width: calc(100% / 4 - 4rem - 0.01px); - } - .one-fifth { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 5 - 0.01px); - } - .has-gutter .one-fifth { - width: calc(100% / 5 - 1rem - 0.01px); - } - .has-gutter-l .one-fifth { - width: calc(100% / 5 - 2rem - 0.01px); - } - .has-gutter-xl .one-fifth { - width: calc(100% / 5 - 4rem - 0.01px); - } - .one-sixth { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 6 - 0.01px); - } - .has-gutter .one-sixth { - width: calc(100% / 6 - 1rem - 0.01px); - } - .has-gutter-l .one-sixth { - width: calc(100% / 6 - 2rem - 0.01px); - } - .has-gutter-xl .one-sixth { - width: calc(100% / 6 - 4rem - 0.01px); - } - .two-thirds { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 3 * 2 - 0.01px); - } - .has-gutter .two-thirds { - width: calc(100% / 3 * 2 - 1rem - 0.01px); - } - .has-gutter-l .two-thirds { - width: calc(100% / 3 * 2 - 2rem - 0.01px); - } - .has-gutter-xl .two-thirds { - width: calc(100% / 3 * 2 - 4rem - 0.01px); - } - .three-quarters { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 4 * 3 - 0.01px); - } - .has-gutter .three-quarters { - width: calc(100% / 4 * 3 - 1rem - 0.01px); - } - .has-gutter-l .three-quarters { - width: calc(100% / 4 * 3 - 2rem - 0.01px); - } - .has-gutter-xl .three-quarters { - width: calc(100% / 4 * 3 - 4rem - 0.01px); - } - .five-sixths { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 6 * 5 - 0.01px); - } - .has-gutter .five-sixths { - width: calc(100% / 6 * 5 - 1rem - 0.01px); - } - .has-gutter-l .five-sixths { - width: calc(100% / 6 * 5 - 2rem - 0.01px); - } - .has-gutter-xl .five-sixths { - width: calc(100% / 6 * 5 - 4rem - 0.01px); - } -}*/ +@media (min-width: tiny + 1) + flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5} + for flow, divider in flowToDivid + .{flow} + flex 0 0 auto + width 'calc(100% / %s - %s)' % (divider iefix) + for key, size in grid-gutters + .has-gutter{key} .{flow} + width 'calc(100% / %s - %s - %s)' % (divider size iefix) /* Responsive Small Breakpoint */ -/* -@media (min-width: 544px) and (max-width: 991px) { - [class*="-small-1"] > * { - width: calc(100% / 1 - 0.01px); - } - [class*="-small-1"].has-gutter > * { - width: calc(100% / 1 - 1rem - 0.01px); - } - [class*="-small-1"].has-gutter-l > * { - width: calc(100% / 1 - 2rem - 0.01px); - } - [class*="-small-1"].has-gutter-xl > * { - width: calc(100% / 1 - 4rem - 0.01px); - } - [class*="-small-2"] > * { - width: calc(100% / 2 - 0.01px); - } - [class*="-small-2"].has-gutter > * { - width: calc(100% / 2 - 1rem - 0.01px); - } - [class*="-small-2"].has-gutter-l > * { - width: calc(100% / 2 - 2rem - 0.01px); - } - [class*="-small-2"].has-gutter-xl > * { - width: calc(100% / 2 - 4rem - 0.01px); - } - [class*="-small-3"] > * { - width: calc(100% / 3 - 0.01px); - } - [class*="-small-3"].has-gutter > * { - width: calc(100% / 3 - 1rem - 0.01px); - } - [class*="-small-3"].has-gutter-l > * { - width: calc(100% / 3 - 2rem - 0.01px); - } - [class*="-small-3"].has-gutter-xl > * { - width: calc(100% / 3 - 4rem - 0.01px); - } - [class*="-small-4"] > * { - width: calc(100% / 4 - 0.01px); - } - [class*="-small-4"].has-gutter > * { - width: calc(100% / 4 - 1rem - 0.01px); - } - [class*="-small-4"].has-gutter-l > * { - width: calc(100% / 4 - 2rem - 0.01px); - } - [class*="-small-4"].has-gutter-xl > * { - width: calc(100% / 4 - 4rem - 0.01px); - } -} -*/ +@media (min-width: tiny + 1) and (max-width: small) + for i in 1..4 + index = '-small-%s' % i + [class*={index}] + & > * + width: 'calc(100% / %s - %s)' % (i iefix) + for key, size in grid-gutters + &.has-gutter{key} > * + width: 'calc(100% / %s - %s - %s)' % (i size iefix)