diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..47c6836 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,2 @@ +>0.25% +not op_mini all \ No newline at end of file diff --git a/css/grillade-flex.css b/css/grillade-flex.css index c55b498..da802db 100755 --- a/css/grillade-flex.css +++ b/css/grillade-flex.css @@ -1 +1 @@ -@media (min-width:576px){[class*=" grid-"],[class^=grid-]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}[class*=" grid-"]>*,[class^=grid-]>*{-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0;min-height:0}}@media (min-width:576px){.grid,.grid--reverse{display:-webkit-box;display:-ms-flexbox;display:flex}.grid--reverse>*,.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0;min-height:0}.grid--reverse.has-gutter>*+*,.grid.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid--reverse.has-gutter-l>*+*,.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grid--reverse.has-gutter-xl>*+*,.grid.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}}@media (min-width:576px){[class*=grid-2]>*{width:calc(50% - .01px)}[class*=grid-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-2].has-gutter>*{width:calc(50% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-2].has-gutter-l>*{width:calc(50% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-3]>*{width:calc(33.33333% - .01px)}[class*=grid-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-4]>*{width:calc(25% - .01px)}[class*=grid-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-4].has-gutter>*{width:calc(25% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-4].has-gutter-l>*{width:calc(25% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-5]>*{width:calc(20% - .01px)}[class*=grid-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-5].has-gutter>*{width:calc(20% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-5].has-gutter-l>*{width:calc(20% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-5].has-gutter-xl>*{width:calc(20% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-6]>*{width:calc(16.66667% - .01px)}[class*=grid-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-6].has-gutter>*{width:calc(16.66667% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-6].has-gutter-l>*{width:calc(16.66667% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-6].has-gutter-xl>*{width:calc(16.66667% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-7]>*{width:calc(14.28571% - .01px)}[class*=grid-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-7].has-gutter>*{width:calc(14.28571% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-7].has-gutter-l>*{width:calc(14.28571% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-7].has-gutter-xl>*{width:calc(14.28571% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-8]>*{width:calc(12.5% - .01px)}[class*=grid-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-8].has-gutter>*{width:calc(12.5% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-8].has-gutter-l>*{width:calc(12.5% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-8].has-gutter-xl>*{width:calc(12.5% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-9]>*{width:calc(11.11111% - .01px)}[class*=grid-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-9].has-gutter>*{width:calc(11.11111% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-9].has-gutter-l>*{width:calc(11.11111% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-9].has-gutter-xl>*{width:calc(11.11111% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-10]>*{width:calc(10% - .01px)}[class*=grid-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-10].has-gutter>*{width:calc(10% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-10].has-gutter-l>*{width:calc(10% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-10].has-gutter-xl>*{width:calc(10% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-11]>*{width:calc(9.09091% - .01px)}[class*=grid-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-11].has-gutter>*{width:calc(9.09091% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-11].has-gutter-l>*{width:calc(9.09091% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-11].has-gutter-xl>*{width:calc(9.09091% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-12]>*{width:calc(8.33333% - .01px)}[class*=grid-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-12].has-gutter>*{width:calc(8.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-12].has-gutter-l>*{width:calc(8.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-12].has-gutter-xl>*{width:calc(8.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.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}[class*=grid-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:576px){.full{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter>.full{width:calc(100% - 1rem - .01px)}.has-gutter-l>.full{width:calc(100% - 2rem - .01px)}.has-gutter-xl>.full{width:calc(100% - 4rem - .01px)}.one-half{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter>.one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l>.one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl>.one-half{width:calc(50% - 4rem - .01px)}.one-third{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(33.33333% - .01px)}.has-gutter>.one-third{width:calc(33.33333% - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(33.33333% - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(33.33333% - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(25% - .01px)}.has-gutter>.one-quarter{width:calc(25% - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(25% - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(25% - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(20% - .01px)}.has-gutter>.one-fifth{width:calc(20% - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(20% - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(20% - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(16.66667% - .01px)}.has-gutter>.one-sixth{width:calc(16.66667% - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(16.66667% - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(16.66667% - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(66.66667% - .01px)}.has-gutter>.two-thirds{width:calc(66.66667% - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(66.66667% - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(66.66667% - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(75% - .01px)}.has-gutter>.three-quarters{width:calc(75% - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(75% - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(75% - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(83.33333% - .01px)}.has-gutter>.five-sixths{width:calc(83.33333% - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(83.33333% - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(83.33333% - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[class*=-small-1]>*{width:calc(100% - .01px)}[class*=-small-1].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=-small-1].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=-small-1].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=-small-2]>*{width:calc(50% - .01px)}[class*=-small-2].has-gutter>*{width:calc(50% - 1rem - .01px)}[class*=-small-2].has-gutter-l>*{width:calc(50% - 2rem - .01px)}[class*=-small-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px)}[class*=-small-3]>*{width:calc(33.33333% - .01px)}[class*=-small-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px)}[class*=-small-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px)}[class*=-small-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px)}[class*=-small-4]>*{width:calc(25% - .01px)}[class*=-small-4].has-gutter>*{width:calc(25% - 1rem - .01px)}[class*=-small-4].has-gutter-l>*{width:calc(25% - 2rem - .01px)}[class*=-small-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px)}} \ No newline at end of file +@media (min-width:576px){[class*=" grillade-"],[class^=grillade-]{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap}[class*=" grillade-"]>*,[class^=grillade-]>*{box-sizing:border-box;min-width:0;min-height:0}}@media (min-width:576px){.grillade,.grillade--reverse{display:-webkit-box;display:flex}.grillade--reverse>*,.grillade>*{-webkit-box-flex:1;flex:1 1;box-sizing:border-box;min-width:0;min-height:0}.grillade--reverse.has-gutter>*+*,.grillade.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grillade--reverse.has-gutter-l>*+*,.grillade.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grillade--reverse.has-gutter-xl>*+*,.grillade.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}}@media (min-width:576px){[class*=grillade-2]>*{width:calc(50% - .01px)}[class*=grillade-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-2].has-gutter>*{width:calc(50% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-2].has-gutter-l>*{width:calc(50% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-3]>*{width:calc(33.33333% - .01px)}[class*=grillade-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-4]>*{width:calc(25% - .01px)}[class*=grillade-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-4].has-gutter>*{width:calc(25% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-4].has-gutter-l>*{width:calc(25% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-5]>*{width:calc(20% - .01px)}[class*=grillade-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-5].has-gutter>*{width:calc(20% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-5].has-gutter-l>*{width:calc(20% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-5].has-gutter-xl>*{width:calc(20% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-6]>*{width:calc(16.66667% - .01px)}[class*=grillade-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-6].has-gutter>*{width:calc(16.66667% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-6].has-gutter-l>*{width:calc(16.66667% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-6].has-gutter-xl>*{width:calc(16.66667% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-7]>*{width:calc(14.28571% - .01px)}[class*=grillade-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-7].has-gutter>*{width:calc(14.28571% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-7].has-gutter-l>*{width:calc(14.28571% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-7].has-gutter-xl>*{width:calc(14.28571% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-8]>*{width:calc(12.5% - .01px)}[class*=grillade-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-8].has-gutter>*{width:calc(12.5% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-8].has-gutter-l>*{width:calc(12.5% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-8].has-gutter-xl>*{width:calc(12.5% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-9]>*{width:calc(11.11111% - .01px)}[class*=grillade-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-9].has-gutter>*{width:calc(11.11111% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-9].has-gutter-l>*{width:calc(11.11111% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-9].has-gutter-xl>*{width:calc(11.11111% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-10]>*{width:calc(10% - .01px)}[class*=grillade-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-10].has-gutter>*{width:calc(10% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-10].has-gutter-l>*{width:calc(10% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-10].has-gutter-xl>*{width:calc(10% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-11]>*{width:calc(9.09091% - .01px)}[class*=grillade-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-11].has-gutter>*{width:calc(9.09091% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-11].has-gutter-l>*{width:calc(9.09091% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-11].has-gutter-xl>*{width:calc(9.09091% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-12]>*{width:calc(8.33333% - .01px)}[class*=grillade-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-12].has-gutter>*{width:calc(8.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-12].has-gutter-l>*{width:calc(8.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-12].has-gutter-xl>*{width:calc(8.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}[class*=grillade-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}@media (min-width:576px){.full{-webkit-box-flex:0;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter>.full{width:calc(100% - 1rem - .01px)}.has-gutter-l>.full{width:calc(100% - 2rem - .01px)}.has-gutter-xl>.full{width:calc(100% - 4rem - .01px)}.one-half{-webkit-box-flex:0;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter>.one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l>.one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl>.one-half{width:calc(50% - 4rem - .01px)}.one-third{-webkit-box-flex:0;flex:0 0 auto;width:calc(33.33333% - .01px)}.has-gutter>.one-third{width:calc(33.33333% - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(33.33333% - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(33.33333% - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;flex:0 0 auto;width:calc(25% - .01px)}.has-gutter>.one-quarter{width:calc(25% - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(25% - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(25% - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;flex:0 0 auto;width:calc(20% - .01px)}.has-gutter>.one-fifth{width:calc(20% - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(20% - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(20% - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;flex:0 0 auto;width:calc(16.66667% - .01px)}.has-gutter>.one-sixth{width:calc(16.66667% - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(16.66667% - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(16.66667% - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;flex:0 0 auto;width:calc(66.66667% - .01px)}.has-gutter>.two-thirds{width:calc(66.66667% - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(66.66667% - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(66.66667% - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;flex:0 0 auto;width:calc(75% - .01px)}.has-gutter>.three-quarters{width:calc(75% - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(75% - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(75% - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;flex:0 0 auto;width:calc(83.33333% - .01px)}.has-gutter>.five-sixths{width:calc(83.33333% - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(83.33333% - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(83.33333% - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[class*=-small-1]>*{width:calc(100% - .01px)}[class*=-small-1].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=-small-1].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=-small-1].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=-small-2]>*{width:calc(50% - .01px)}[class*=-small-2].has-gutter>*{width:calc(50% - 1rem - .01px)}[class*=-small-2].has-gutter-l>*{width:calc(50% - 2rem - .01px)}[class*=-small-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px)}[class*=-small-3]>*{width:calc(33.33333% - .01px)}[class*=-small-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px)}[class*=-small-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px)}[class*=-small-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px)}[class*=-small-4]>*{width:calc(25% - .01px)}[class*=-small-4].has-gutter>*{width:calc(25% - 1rem - .01px)}[class*=-small-4].has-gutter-l>*{width:calc(25% - 2rem - .01px)}[class*=-small-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px)}} \ No newline at end of file diff --git a/css/grillade-grid.css b/css/grillade-grid.css index d849a36..066618a 100755 --- a/css/grillade-grid.css +++ b/css/grillade-grid.css @@ -1 +1 @@ -@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrid,.grid{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grid-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grid-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grid-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-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}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1} \ No newline at end of file +@media (min-width:480px){[class*=" grillade-"],[class^=grillade-]{display:-ms-grid;display:grid}[class*=" grillade-"].has-gutter,[class^=grillade-].has-gutter{grid-gap:1rem}[class*=" grillade-"].has-gutter-l,[class^=grillade-].has-gutter-l{grid-gap:2rem}[class*=" grillade-"].has-gutter-xl,[class^=grillade-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrillade,.grillade{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrillade.has-gutter,.grillade.has-gutter{grid-column-gap:1rem}.autogrillade.has-gutter-l,.grillade.has-gutter-l{grid-column-gap:2rem}.autogrillade.has-gutter-xl,.grillade.has-gutter-xl{grid-column-gap:4rem}}[class*=grillade-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grillade-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grillade-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grillade-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grillade-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grillade-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grillade-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grillade-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grillade-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grillade-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grillade-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:991px){[class*=grillade-][class*=-medium-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-medium-1]{grid-column:auto/span 1}[class*=grillade-][class*=-medium-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-medium-2]{grid-column:auto/span 2}[class*=grillade-][class*=-medium-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-medium-3]{grid-column:auto/span 3}[class*=grillade-][class*=-medium-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-medium-4]{grid-column:auto/span 4}[class*=-medium-all]{grid-column:1/-1}}@media (min-width:480px) and (max-width:767px){[class*=grillade-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grillade-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grillade-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grillade-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}[class*=-start]{-webkit-box-pack:start;justify-content:start}[class*=-end]{-webkit-box-pack:end;justify-content:end}[class*=-center]{-webkit-box-pack:center;justify-content:center}[class*=-space-between]{-webkit-box-pack:justify;justify-content:space-between}[class*=-space-around]{justify-content:space-around}[class*=-space-evenly]{-webkit-box-pack:space-evenly;justify-content:space-evenly}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 0e49956..712adc7 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,44 +9,31 @@ var rename = require('gulp-rename'); var cssnano = require('cssnano'); // minifies CSS var autoprefixer = require('autoprefixer'); -var unprefix = require("postcss-unprefix"); // deletes old prefixes +var unprefix = require('postcss-unprefix'); // deletes old prefixes var flexbugs = require('postcss-flexbugs-fixes'); // flexbox fixes for IE var gaps = require('postcss-gap-properties'); // gaps polyfill -var browsersList = [ - '> 1%', - 'last 2 versions', - 'IE >= 10', 'Edge >= 16', - 'Chrome >= 60', - 'Firefox >= 50', 'Firefox ESR', - 'Safari >= 10', - 'ios_saf >= 10', - 'Android >= 5' -]; - var plugins = [ unprefix(), - autoprefixer({ - grid: true, - browsers: browsersList - }), - flexbugs(), - gaps() + autoprefixer({ + grid: true + }), + flexbugs(), + gaps() ]; var pluginsProd = [ unprefix(), - autoprefixer({ - grid: true, - browsers: browsersList - }), - flexbugs(), - gaps(), - cssnano() + autoprefixer({ + grid: true + }), + flexbugs(), + gaps(), + cssnano() ]; // tâche cssDev = compile vers knacss-unminified.css -gulp.task('cssDev', function () { +gulp.task('cssDev', () => { return gulp.src('./sass/knacss.scss') .pipe(sass({ outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne) @@ -57,31 +44,31 @@ gulp.task('cssDev', function () { }); // tâche cssProd = compile vers knacss.css minifié -gulp.task('cssProd', function () { +gulp.task('cssProd', () => { return gulp.src('./sass/knacss.scss') .pipe(sass()) .pipe(postcss(pluginsProd)) .pipe(gulp.dest('./css/')); }); -gulp.task('grillade', function() { - return gulp.src('./sass/_library/grillade-grid.scss') +gulp.task('grillade', () => { + return gulp.src('./sass/base/grillade-grid.scss') .pipe(sass()) .pipe(postcss(pluginsProd)) .pipe(gulp.dest('./css/')); }); -gulp.task('grillade-flex', function() { - return gulp.src('./sass/_library/grillade-flex.scss') +gulp.task('grillade-flex', () => { + return gulp.src('./sass/base/grillade-flex.scss') .pipe(sass()) .pipe(postcss(pluginsProd)) .pipe(gulp.dest('./css/')); }); // Watcher -gulp.task('watch', function() { - gulp.watch(['./sass/*.scss'], ['cssDev']); +gulp.task('watch', () => { + gulp.watch(['./sass/*.scss'], gulp.series('cssDev')); }); - -gulp.task('default', ['cssDev', 'cssProd', 'grillade', 'grillade-flex']); +// Tâche par défaut +gulp.task('default', gulp.series('cssDev', 'cssProd', 'grillade', 'grillade-flex')); diff --git a/sass/_library/_base.scss b/sass/_library/_base.scss deleted file mode 100644 index 31b800d..0000000 --- a/sass/_library/_base.scss +++ /dev/null @@ -1,274 +0,0 @@ -/* ----------------------------- */ -/* ==Base (basic styles) */ -/* ----------------------------- */ - -/* disable animations styles when reduced rotion is enabled */ -@media (prefers-reduced-motion: reduce) { - * { - animation: none !important; - transition: none !important; - } -} - -/* switching to border-box model for all elements */ -html { - box-sizing: border-box; -} - -*, -*::before, -*::after { - box-sizing: inherit; - /* avoid min-width: auto on flex and grid children */ - min-width: 0; - min-height: 0; -} - -html { - /* set base font-size to equiv "10px", which is adapted to rem unit */ - font-size: 62.5%; - /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ - font-size: calc(1em * 0.625); -} - -body { - margin: 0; - @include font-size(base); - background-color: $background-base; - color: $color-base; - font-family: $font-family-base; - line-height: $line-height-base; -} - -/* Links */ -a { - color: $link-color; - text-decoration: $link-decoration; - - &:focus, - &:hover, - &:active { - color: $link-color-hover; - text-decoration: $link-decoration-hover; - } -} - -/* Headings */ -h1, .h1-like { - @include font-size(h1); - @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{ - font-family: $font-family-headings; - } - font-weight: $weight-medium; -} - -h2, .h2-like { - @include font-size(h2); - @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{ - font-family: $font-family-headings; - } - font-weight: $weight-medium; -} - -h3, .h3-like { - @include font-size(h3); - font-weight: $weight-medium; -} - -h4, .h4-like { - @include font-size(h4); - font-weight: $weight-medium; -} - -h5, .h5-like { - @include font-size(h5); - font-weight: $weight-medium; -} - -h6, .h6-like { - @include font-size(h6); - font-weight: $weight-medium; -} - -/* Vertical rythm */ -h1, -h2, -h3, -h4, -h5, -h6, -dd { - margin-top: 0; - margin-bottom: $headings-margin-bottom; -} - -p, -address, -ol, -ul, -dl, -blockquote, -pre { - margin-top: 0; - margin-bottom: $paragraph-margin-bottom; -} - -/* Avoid margins on nested elements */ -li p, -li .p-like, -li ul, -li ol, -ol ol, -ul ul { - margin-top: 0; - margin-bottom: 0; -} - -/* Max values */ -img, -table, -td, -blockquote, -code, -pre, -textarea, -input, -video, -svg { - max-width: 100%; -} - -img { - height: auto; -} - -/* Styling elements */ -ul, -ol { - padding-left: 2em; -} - -img { - vertical-align: middle; -} - -em, -.italic, -address, -cite, -i, -var { - font-style: italic; -} - -code, -kbd, -mark { - border-radius: 2px; -} - -kbd { - padding: 0 2px; - border: 1px solid #999; -} - -pre { - tab-size: 2; -} - -code { - padding: 2px 4px; - background: rgba(0, 0, 0, 0.04); - color: #b11; -} - -pre code { - padding: 0; - background: none; - color: inherit; - border-radius: 0; -} - -mark { - padding: 2px 4px; -} - -sup, -sub { - vertical-align: 0; -} - -sup { - bottom: 1ex; -} - -sub { - top: 0.5ex; -} - -blockquote { - position: relative; - padding-left: 3em; - min-height: 2em; -} - -blockquote::before { - content: "\201C"; - position: absolute; - left: 0; - top: 0; - font-family: georgia, serif; - font-size: 5em; - height: .4em; - line-height: .9; - color: $quote-color; -} - -blockquote > footer { - margin-top: .75em; - font-size: 0.9em; - color: rgba(0, 0, 0, .7); - - &::before { - content: "\2014 \0020"; - } -} - -q { - font-style: normal; -} - -q, -.q { - quotes: "“" "”" "‘" "’"; - - &:lang(fr) { - quotes: "«\00a0" "\00a0»" "“" "”"; - } -} - -hr { - display: block; - clear: both; - height: 1px; - margin: 1em 0 2em; - padding: 0; - border: 0; - color: #ccc; - background-color: #ccc; -} - -blockquote, -figure { - margin-left: 0; - margin-right: 0; -} - -code, -pre, -samp, -kbd { - white-space: pre-wrap; - font-family: $font-family-monospace; - line-height: normal; -} diff --git a/sass/_vendor/_reboot.scss b/sass/_vendor/_reboot.scss deleted file mode 100644 index 7b824bd..0000000 --- a/sass/_vendor/_reboot.scss +++ /dev/null @@ -1,334 +0,0 @@ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - -ms-overflow-style: scrollbar; - -webkit-tap-highlight-color: transparent; -} - -@-ms-viewport { - width: device-width; -} - -article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -} - -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #212529; - text-align: left; - background-color: #fff; -} - -[tabindex="-1"]:focus { - outline: none !important; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title], -abbr[data-original-title] { - text-decoration: underline; - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; -} - -address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: .5rem; - margin-left: 0; -} - -blockquote { - margin: 0 0 1rem; -} - -dfn { - font-style: italic; -} - -b, -strong { - font-weight: bold; -} - -small { - font-size: 80%; -} - -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} - -sub { - bottom: -.25em; -} - -sup { - top: -.5em; -} - -a { - color: #007bff; - text-decoration: none; - background-color: transparent; - -webkit-text-decoration-skip: objects; -} - -a:hover { - color: #0056b3; - text-decoration: underline; -} - -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} - -a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { - color: inherit; - text-decoration: none; -} - -a:not([href]):not([tabindex]):focus { - outline: 0; -} - -pre, -code, -kbd, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; - -ms-overflow-style: scrollbar; -} - -figure { - margin: 0 0 1rem; -} - -img { - vertical-align: middle; - border-style: none; -} - -svg:not(:root) { - overflow: hidden; -} - -a, -area, -button, -[role="button"], -input:not([type="range"]), -label, -select, -summary, -textarea { - -ms-touch-action: manipulation; - touch-action: manipulation; -} - -table { - border-collapse: collapse; -} - -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #868e96; - text-align: left; - caption-side: bottom; -} - -th { - text-align: inherit; -} - -label { - display: inline-block; - margin-bottom: .5rem; -} - -button { - border-radius: 0; -} - -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; -} - -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -button, -input { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -button, -html [type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - padding: 0; - border-style: none; -} - -input[type="radio"], -input[type="checkbox"] { - box-sizing: border-box; - padding: 0; -} - -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { - -webkit-appearance: listbox; -} - -textarea { - overflow: auto; - resize: vertical; -} - -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; -} - -legend { - display: block; - width: 100%; - max-width: 100%; - padding: 0; - margin-bottom: .5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; - white-space: normal; -} - -progress { - vertical-align: baseline; -} - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -[type="search"] { - outline-offset: -2px; - -webkit-appearance: none; -} - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; -} - -output { - display: inline-block; -} - -summary { - display: list-item; -} - -template { - display: none; -} - -[hidden] { - display: none !important; -} diff --git a/sass/_config/_mixins.scss b/sass/abstracts/_mixins.scss similarity index 87% rename from sass/_config/_mixins.scss rename to sass/abstracts/_mixins.scss index d6574f0..eb77fd1 100755 --- a/sass/_config/_mixins.scss +++ b/sass/abstracts/_mixins.scss @@ -1,3 +1,15 @@ +// Visually-hidden mixin +@mixin visually-hidden { + position: absolute !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; +} + + // font-size Mixin // compiles to font-size mobile + font-size desktop on small-plus devices // ex. h2 { @include font-size(h2);} diff --git a/sass/_config/_variables.scss b/sass/abstracts/_variables.scss similarity index 96% rename from sass/_config/_variables.scss rename to sass/abstracts/_variables.scss index f495d34..0d5bb7e 100755 --- a/sass/_config/_variables.scss +++ b/sass/abstracts/_variables.scss @@ -73,7 +73,16 @@ $weight-medium : 500 !default; $weight-bold : 700 !default; // Activate hyphenation on small screens -$hyphens: false !default; +$hyphens: true !default; + +// Activate Utility classes +$utilities: true !default; + +// Activate WordPress reset and styles +$wordpress: false !default; + +// Activate IE10-IE11 fixes and old grid system +$ie: true !default; // ------------ // Spacing zone diff --git a/sass/_library/_layout.scss b/sass/base/_layout.scss similarity index 100% rename from sass/_library/_layout.scss rename to sass/base/_layout.scss diff --git a/sass/_library/_print.scss b/sass/base/_print.scss similarity index 100% rename from sass/_library/_print.scss rename to sass/base/_print.scss diff --git a/sass/base/_reset.scss b/sass/base/_reset.scss new file mode 100644 index 0000000..09d068e --- /dev/null +++ b/sass/base/_reset.scss @@ -0,0 +1,518 @@ +/* ----------------------------- */ +/* ==Reset (global) */ +/* ----------------------------- */ + +/** + * disable animations styles when reduced motion is enabled + */ + +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; + } +} + +/** + * 1. switch to border-box model for all elements + * 2. avoid min-width: auto and min-height: auto on flex and grid children + */ + +*, +*::before, +*::after { + box-sizing: border-box; /* 1 */ + min-width: 0; /* 2 */ + min-height: 0; /* 2 */ +} + +/** + * 1. remove the grey highlight on links in iOS + * 2. prevent orientation font changes in iOS + * 3. set base font-size to equiv "10px", which is adapted to rem unit + */ + +html { + -webkit-tap-highlight-color: transparent; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + font-size: calc(1em * 0.625); /* 3 */ +} + +body { + margin: 0; + @include font-size(base); + background-color: $background-base; + color: $color-base; + font-family: $font-family-base; + line-height: $line-height-base; +} + +/** + * links + */ + +a { + color: $link-color; + text-decoration: $link-decoration; + + &:focus, + &:hover, + &:active { + color: $link-color-hover; + text-decoration: $link-decoration-hover; + } +} + +/** + * headings + */ + +h1, .h1-like { + @include font-size(h1); + @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{ + font-family: $font-family-headings; + } + font-weight: $weight-medium; +} + +h2, .h2-like { + @include font-size(h2); + @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{ + font-family: $font-family-headings; + } + font-weight: $weight-medium; +} + +h3, .h3-like { + @include font-size(h3); + font-weight: $weight-medium; +} + +h4, .h4-like { + @include font-size(h4); + font-weight: $weight-medium; +} + +h5, .h5-like { + @include font-size(h5); + font-weight: $weight-medium; +} + +h6, .h6-like { + @include font-size(h6); + font-weight: $weight-medium; +} + +/** + * vertical rythm + */ + +h1, +h2, +h3, +h4, +h5, +h6, +dd { + margin-top: 0; + margin-bottom: $headings-margin-bottom; +} + +p, +address, +ol, +ul, +dl, +blockquote, +pre { + margin-top: 0; + margin-bottom: $paragraph-margin-bottom; +} + +/** + * avoid margin on nested elements + */ + +li p, +li .p-like, +li ul, +li ol, +ol ol, +ul ul { + margin-top: 0; + margin-bottom: 0; +} + +/* ----------------------------- */ +/* ==Reset (common styling) */ +/* ----------------------------- */ + +a, +area, +button, +[role="button"], +.btn, +.button, +[type="button"] +input:not([type="range"]), +label, +select, +summary, +textarea { + -ms-touch-action: manipulation; + touch-action: manipulation; +} + +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video, +svg { + max-width: 100%; +} + +img { + height: auto; + vertical-align: middle; + border-style: none; +} + +/** + * fill color matching to text color + */ + +svg:not([fill]) { + fill: currentColor; +} + +ul, +ol { + padding-left: 2em; +} + +b, +strong { + font-weight: bolder; +} + +em, +.italic, +address, +cite, +i, +var { + font-style: italic; +} + +/* ----------------------------- */ +/* ==Reset (buttons) */ +/* ----------------------------- */ + +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +/** +* 1. show overflow in IE/Edge +*/ + +button, +input { + overflow: visible; /* 1 */ +} + +/** +* 1. remove the inheritance of text transform in Firefox +*/ + +button, +select { + text-transform: none; /* 1 */ +} + +/** + * 1. correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 1 */ +} + +/** + * 1. remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; /* 1 */ + padding: 0; +} + +/** + * 1. restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; /* 1 */ +} + +/* ----------------------------- */ +/* ==Reset (forms) */ +/* ----------------------------- */ + +form, +fieldset { + border: none; +} + +fieldset { + padding: $spacer-medium; +} + +legend { + padding: 0 $spacer-tiny; + border: 0; + white-space: normal; +} + +label { + display: inline-block; + cursor: pointer; +} + +textarea { + overflow: auto; + min-height: 5em; + vertical-align: top; + resize: vertical; + white-space: pre-wrap; +} + +progress { + display: inline-block; + width: 100%; + vertical-align: baseline; +} + +/* ----------------------------- */ +/* ==Reset (inputs) */ +/* ----------------------------- */ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + outline-offset: -2px; + -webkit-appearance: none; +} + +::-webkit-search-cancel-button, +::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} + +output { + display: inline-block; +} + +summary { + display: list-item; +} + +template { + display: none; +} + +/* ----------------------------- */ +/* ==Reset (misc styling) */ +/* ----------------------------- */ + +pre, +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; + white-space: pre-wrap; + line-height: normal; +} + +pre { + overflow: auto; + -ms-overflow-style: scrollbar; + tab-size: 2; +} + +code, +kbd, +mark { + border-radius: 2px; +} + +kbd { + padding: 0 2px; + border: 1px solid #999; +} + +code { + padding: 2px 4px; + background: rgba(0, 0, 0, 0.04); + color: #b11; +} + +pre code { + padding: 0; + background: none; + color: inherit; + border-radius: 0; +} + +mark { + padding: 2px 4px; +} + +sup, +sub { + vertical-align: 0; +} + +sup { + bottom: 1ex; +} + +sub { + top: 0.5ex; +} + +/** + * quotes, blockquote and hr styling + */ + +blockquote { + position: relative; + padding-left: 3em; + min-height: 2em; +} + +blockquote::before { + content: "\201C"; + position: absolute; + left: 0; + top: 0; + font-family: georgia, serif; + font-size: 5em; + height: .4em; + line-height: .9; + color: $quote-color; +} + +blockquote > footer { + margin-top: .75em; + font-size: 0.9em; + color: rgba(0, 0, 0, .7); + + &::before { + content: "\2014 \0020"; + } +} + +q { + font-style: normal; +} + +q, +.q { + quotes: "“" "”" "‘" "’"; + + &:lang(fr) { + quotes: "«\00a0" "\00a0»" "“" "”"; + } +} + +hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; +} + +blockquote, +figure { + margin-left: 0; + margin-right: 0; +} + +@if variable-exists(hyphens) and $hyphens==true { + @media (max-width: ($small - 1)) { + body, + div, + p, + textarea, + table, + td, + th, + code, + pre, + samp { + word-wrap: break-word; + overflow-wrap: break-word; + } + } +} + + +@if variable-exists(ie) and $ie==true { + + /* ----------------------------- */ + /* ==Reset (IE rules) */ + /* ----------------------------- */ + + @-ms-viewport { + width: device-width; + } + + article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; + } + + /** + * hide overflow in IE + */ + + svg:not(:root) { + overflow: hidden; + } + +} + diff --git a/sass/_library/_responsive.scss b/sass/base/_responsive.scss similarity index 100% rename from sass/_library/_responsive.scss rename to sass/base/_responsive.scss diff --git a/sass/_library/_utilities.scss b/sass/base/_utilities.scss similarity index 88% rename from sass/_library/_utilities.scss rename to sass/base/_utilities.scss index 4efb22d..145b9ce 100755 --- a/sass/_library/_utilities.scss +++ b/sass/base/_utilities.scss @@ -74,23 +74,6 @@ text-align: center; } -@if variable-exists(hyphens) and $hyphens==true { - @media (max-width: ($small - 1)) { - div, - textarea, - table, - td, - th, - code, - pre, - samp { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; - } - } -} - /* blocks that need to be placed under floats */ .clear, @@ -131,10 +114,8 @@ /* Global Micro Layout */ /* ------------------- */ -/* module, gains superpower "BFC" Block Formating Context */ +/* "BFC" Block Formating Context */ -.mod, -.u-mod, .bfc, .u-bfc { overflow: hidden; @@ -188,14 +169,14 @@ img.u-fr { } /* hidden but not for an assistive technology like a screen reader, Yahoo! method */ +// mixin in `abstracts/_mixins.scss` .visually-hidden { - position: absolute !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - padding: 0 !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; + @include visually-hidden; +} +@include respond-to("small") { + .small-visually-hidden { + @include visually-hidden; + } } .is-disabled, @@ -216,9 +197,6 @@ ul { } } -.color--inverse { - color: $white; -} /* Width Helpers */ /* ------------- */ diff --git a/sass/_library/_wordpress.scss b/sass/base/_wordpress.scss similarity index 100% rename from sass/_library/_wordpress.scss rename to sass/base/_wordpress.scss diff --git a/sass/_library/grillade-flex.scss b/sass/base/grillade-flex.scss similarity index 95% rename from sass/_library/grillade-flex.scss rename to sass/base/grillade-flex.scss index 283ca5e..7163882 100755 --- a/sass/_library/grillade-flex.scss +++ b/sass/base/grillade-flex.scss @@ -22,8 +22,8 @@ $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem ); // https://github.com/alsacreations/KNACSS/issues/133; $iefix: 0.01px; @media (min-width: $small) { - [class*=" grid-"], - [class^="grid-"] { + [class*=" grillade-"], + [class^="grillade-"] { display: flex; flex-direction: row; flex-wrap: wrap; @@ -66,8 +66,8 @@ $iefix: 0.01px; } // Mono-line grid constructor (.grid) @media (min-width: $small) { - .grid, - .grid--reverse { + .grillade, + .grillade--reverse { display: flex; & > * { @@ -86,7 +86,7 @@ $iefix: 0.01px; // Constructing grids : will be compiled in CSS @media (min-width: $small) { @for $i from 2 through $cols { - [class*="grid-#{$i}"] { + [class*="grillade-#{$i}"] { @include grid(#{$i}, 0); } } @@ -110,7 +110,7 @@ $iefix: 0.01px; order: 1; } -[class*="grid-"][class*="--reverse"] { +[class*="grillade-"][class*="--reverse"] { flex-direction: row-reverse; } // sizing individual children diff --git a/sass/_library/grillade-grid.scss b/sass/base/grillade-grid.scss similarity index 60% rename from sass/_library/grillade-grid.scss rename to sass/base/grillade-grid.scss index 3780ed0..4b21d1c 100755 --- a/sass/_library/grillade-grid.scss +++ b/sass/base/grillade-grid.scss @@ -8,16 +8,16 @@ // use these variables only for a standalone Grillade // in KNACSS, you shall modify variables file instead -$tiny: 480px !default; -$medium: 768px !default; -$cols: 12 !default; +$tiny : 480px !default; +$medium : 768px !default; +$large : 992px !default; +$cols : 12 !default; // classic Grid -[class*=" grid-"], -[class^="grid-"] { +[class*=" grillade-"], +[class^="grillade-"] { @media (min-width: $tiny) { display: grid; - grid-auto-flow: dense; // gutters @if variable_exists(grid-gutters) { @@ -35,8 +35,8 @@ $cols: 12 !default; } // autogrid -.autogrid, -.grid { +.autogrillade, +.grillade { @media (min-width: $tiny) { display: grid; grid-auto-flow: column; @@ -57,9 +57,9 @@ $cols: 12 !default; } } -// grid constructor (.grid-2 to .grid-$cols) +// grid constructor (.grillade-2 to .grillade-$cols) @for $i from 2 through $cols { - [class*="grid-#{$i}"] { + [class*="grillade-#{$i}"] { grid-template-columns: repeat(#{$i}, 1fr); } } @@ -75,12 +75,31 @@ $cols: 12 !default; } } -/* intermediate breakpoints */ +/* medium intermediate breakpoints */ +// -medium-X suffix means "X columns when < large screen" +// example : .grillade-4-medium-2 will be 1 column (< tiny) then 2 columns (< large) then 4 columns +@media (min-width: $tiny) and (max-width: ($large - 1)) { + @for $i from 1 through 4 { + [class*="grillade-"][class*="-medium-#{$i}"] { + grid-template-columns: repeat(#{$i}, 1fr); + } + + [class*="col-"][class*="-medium-#{$i}"] { + grid-column: auto / span #{$i}; + } + } + + [class*="-medium-all"] { + grid-column: 1 / -1; + } +} + +/* small intermediate breakpoints */ // -small-X suffix means "X columns when < medium screen" -// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns +// example : .grillade-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns @media (min-width: $tiny) and (max-width: ($medium - 1)) { - @for $i from 1 through 4{ - [class*="grid-"][class*="-small-#{$i}"] { + @for $i from 1 through 4 { + [class*="grillade-"][class*="-small-#{$i}"] { grid-template-columns: repeat(#{$i}, 1fr); } @@ -94,6 +113,31 @@ $cols: 12 !default; } } +// grid overall alignment +[class*="-start"] { + justify-content: start; +} + +[class*="-end"] { + justify-content: end; +} + +[class*="-center"] { + justify-content: center; +} + +[class*="-space-between"] { + justify-content: space-between; +} + +[class*="-space-around"] { + justify-content: space-around; +} + +[class*="-space-evenly"] { + justify-content: space-evenly; +} + // grid order .item-first { order: -1; diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss index cd1f6c6..a337ce0 100755 --- a/sass/components/_buttons.scss +++ b/sass/components/_buttons.scss @@ -1,6 +1,7 @@ /* ----------------------------- */ -/* ==Buttons */ +/* ==Buttons styling */ /* ----------------------------- */ + /* preferably use