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) / g = gutter value (default = 1em)
+// example : .grid-container { .grid(12, 10px); }
+// ... or uneven grids :
+// left = left ratio column (default = 2) / right = right ratio column (default = 1) / gutter (default = 1em)
+// example : .grid-container { .uneven-grid(2, 1, 10px); }
+
+// LESS mixins for *equal* columns grid container
+// example : .grid-container { .grid(12, 10px); }
+.grid(@number:@number, @gutter:@gutter) {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin-left: -@gutter;
+
+& > * {
+ /* grid child can be any element */
+ flex: 0 0 auto;
+ width: (1/@number * 100) + 0%;
+ display: block; /* IE fix */
+ border-left: @gutter solid transparent;
+ background-clip: padding-box !important; /* no background on border */
+ }
+ & > .flexitem-double {
+ width: (2/@number * 100) + 0%;
+ }
+ & > .flexitem-first {
+ order: -1;
+ }
+ @media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
+ & > * {
+ width: 33.3333%;
+ }
+ & > .flexitem-double {
+ width: 66.6666%;
+ }
+ }
+ @media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
+ & > * {
+ width: 50%;
+ }
+ & > .flexitem-double {
+ width: 100%;
+ }
+ }
+ @media (max-width: @tiny-screen) {
+ & > * {
+ width: 100%;
+ }
+ & > .flexitem-double {
+ width: 100%;
+ }
+ }
}
-/* global styles for direct child ex. .grid3 */
-.grid > * {
- display: block;
- padding: 0;
- margin-left: -@gutter; /* gutter value */
- text-align: left;
+/* Examples : will be compiled in CSS */
+
+.grid-2 {
+ .grid(2);
}
-/* global styles for each "cell" */
-.grid > * > * {
- display: inline-block;
- padding-left: @gutter; /* gutter value */
- margin-left: 0;
- vertical-align: top;
+.grid-3 {
+ .grid(3);
}
-/* whitespace fixing for modern browsers including IE9+ */
-:root .grid {
- font-size: 0;
- text-justify: distribute-all-lines; /* fallback for IE9+ */
+.grid-4 {
+ .grid(4);
}
-:root .grid > * > * {
- /* fallback for Opera Mini */
- font-size: @base-font-size;
- font-size: unit((@base-font-size / 10), rem);
+.grid-5 {
+ .grid(5);
}
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
- word-spacing: -0.43em;
+.grid-6 {
+ .grid(6);
}
-.grid2 > * {
- width: 50%;
+.grid-7 {
+ .grid(7);
}
-.grid3 > * {
- width: 33.333%;
+.grid-8 {
+ .grid(8);
}
-.grid4 > * {
- width: 25%;
+.grid-10 {
+ .grid(10);
}
-.grid5 > * {
- width: 20%;
+.grid-12 {
+ .grid(12);
}
-.grid6 > * {
- width: 16.667%;
+.grid-16 {
+ .grid(16);
}
-.grid8 > * {
- width: 12.5%;
+// LESS mixins for *unequal* columns grid container
+// example : .grid-container { .uneven-grid(2, 1, 10px); }
+
+.uneven-grid(@left:@left, @right:@right, @gutter:@gutter) {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin-left: -@gutter;
+
+& > * {
+ display: block; /* IE fix */
+ border-left: @gutter solid transparent;
+ background-clip: padding-box !important; /* no background on border */
+ }
+
+ & > *:nth-child(odd) {
+ width: (@left / (@left + @right)) * 100%;
+ }
+ & > *:nth-child(even) {
+ width: (@right / (@left + @right)) * 100%;
+ }
+
+ @media (max-width: @tiny-screen) {
+ & > *:nth-child(n) {
+ width: 100%;
+ }
+ }
}
-.grid10 > * {
- width: 10%;
+
+/* Examples : will be compiled in CSS */
+
+.grid-2-1 {
+ .uneven-grid(2,1);
}
-.grid12 > * {
- width: 8.333%;
+.grid-1-2 {
+ .uneven-grid(1,2);
}
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * {
- width: 66.666%;
+.grid-3-1 {
+ .uneven-grid(3,1);
}
-.grid1-2 > *:first-child,
-.grid2-1 > * + * {
- width: 33.333%;
+.grid-1-3 {
+ .uneven-grid(1,3);
}
-.grid1-3 > *:first-child,
-.grid3-1 > * + * {
- width: 25%;
+.grid-3-2 {
+ .uneven-grid(3,2);
}
-.grid3-1 > *:first-child,
-.grid1-3 > * + * {
- width: 75%;
+.grid-2-3 {
+ .uneven-grid(2,3);
}
-/* ---------------------------------- */
-/* ==autogrids */
-/* .. to automatically justify blocs */
-/* ---------------------------------- */
-
-/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
-
-/* container of autogrids */
-[class*="autogrid"] {
- text-align: justify;
+.grid-4-1 {
+ .uneven-grid(4,1);
}
-[class*="autogrid"]:after {
- content: "";
- display: inline-block;
- width: 100%;
-}
-
-[class*="autogrid"] > * {
- display: inline-block;
- vertical-align: top;
- text-align: left;
-}
-
-/* whitespace fixing for modern browsers including IE9+ */
-:root [class*="autogrid"] {
- font-size: 0;
- /* fallback for IE9+ */
- text-justify: distribute-all-lines;
-}
-
-:root [class*="autogrid"] > * {
- /* fallback for Opera Mini */
- font-size: @base-font-size;
- font-size: unit((@base-font-size / 10), rem);
-}
-
-/* Opera hack */
-[class*="autogrid"]:-o-prefocus {
- word-spacing: -0.43em;
-}
-
-.autogrid2 > * {
- width: 49%;
-}
-
-.autogrid3 > * {
- width: 32%;
-}
-
-.autogrid4 > * {
- width: 23.6%;
-}
-
-.autogrid5 > * {
- width: 19%;
-}
-
-.autogrid6 > * {
- width: 15%;
-}
-
-.autogrid8 > * {
- width: 10.8%;
-}
-
-.autogrid10 > * {
- width: 9%;
-}
-
-.autogrid12 > * {
- width: 6.4%;
-}
+.grid-1-4 {
+ .uneven-grid(1,4);
+}
\ No newline at end of file
diff --git a/sass/_00-config.scss b/sass/_00-config.scss
index 02a437a..0bb9cf8 100644
--- a/sass/_00-config.scss
+++ b/sass/_00-config.scss
@@ -45,5 +45,8 @@ $large-screen : 1280px; // screens between 1025px and 1280px
$extra-large-screen : 1600px; // screens between 1281px and 1600px
$ultra-large-screen : 1920px; // ultra large screens
-// misc (choose unit you prefer)
-$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
+// grids variables (choose unit you prefer)
+$gutter: 1em; // gutter value for grid layouts. Unit can be: %, px, em, rem
+$number: 4; // number of equal columns
+$left: 2; // left side of uneven columns
+$right: 1; // right side of uneven columns
\ No newline at end of file
diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss
index 173da9e..a3c594c 100644
--- a/sass/_03-grids.scss
+++ b/sass/_03-grids.scss
@@ -1,175 +1,173 @@
/* ---------------------------------- */
-/* ==classic grids */
-/* .. use it when gutter size matters */
+/* ==Grids */
/* ---------------------------------- */
-/* grids inspired from SUIT https://github.com/suitcss/suit */
+// WARNING : KNACSS grids are flexbox based and only supported by IE10+
+// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
+// Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB
-/* overall container of grids */
-.grid {
- overflow: hidden;
-}
+// Usage in vanilla CSS:
+// -
for an equal fourth columns grid container
+// -
for an uneven columns grid container
-/* global styles for direct child ex. .grid3 */
-.grid > * {
- display: block;
- padding: 0;
- /* gutter value */
+// 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-container { @include grid(12, 10px); }
+// ... or uneven grids :
+// left = left ratio column (default = 2) / right = right ratio column (default = 1) / gutter (default = 1em)
+// example : .grid-container { @include uneven-grid(2, 1, 10px); }
+
+// Sass mixins for *equal* columns grid container
+// example : .grid-container { @include grid(12, 10px); }
+@mixin grid($number:$number,$gutter:$gutter) {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
margin-left: -$gutter;
- text-align: left;
+
+ & > * {
+ /* grid child can be any element */
+ flex: 0 0 auto;
+ width: (1/$number * 100) + 0%;
+ display: block; /* IE fix */
+ padding: 1em;
+ border-left: $gutter solid transparent;
+ background-clip: padding-box !important; /* no background on border */
+ }
+ & > .flexitem-double {
+ width: (2/$number * 100) + 0%;
+ }
+ & > .flexitem-first {
+ order: -1;
+ }
+ @media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
+ & > * {
+ width: 33.3333%;
+ }
+ & > .flexitem-double {
+ width: 66.6666%;
+ }
+ }
+ @media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
+ & > * {
+ width: 50%;
+ }
+ & > .flexitem-double {
+ width: 100%;
+ }
+ }
+ @media (max-width: $tiny-screen) {
+ & > * {
+ width: 100%;
+ }
+ & > .flexitem-double {
+ width: 100%;
+ }
+ }
}
-/* global styles for each "cell" */
-.grid > * > * {
- display: inline-block;
- /* gutter value */
- padding-left: $gutter;
- margin-left: 0;
- vertical-align: top;
+/* Examples : will be compiled in CSS */
+
+.grid-2 {
+ @include grid(2);
}
-/* whitespace fixing for modern browsers including IE9+ */
-:root .grid {
- font-size: 0;
- /* fallback for IE9+ */
- text-justify: distribute-all-lines;
+.grid-3 {
+ @include grid(3);
}
-:root .grid > * > * {
- /* fallback for Opera Mini */
- font-size: $base-font-size;
- font-size: ($base-font-size / 10px) + rem;
+.grid-4 {
+ @include grid(4);
}
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
- word-spacing: -0.43em;
+.grid-5 {
+ @include grid(5);
}
-.grid2 > * {
- width: 50%;
+.grid-6 {
+ @include grid(6);
}
-.grid3 > * {
- width: 33.333%;
+.grid-7 {
+ @include grid(7);
}
-.grid4 > * {
- width: 25%;
+.grid-8 {
+ @include grid(8);
}
-.grid5 > * {
- width: 20%;
+.grid-10 {
+ @include grid(10);
}
-.grid6 > * {
- width: 16.667%;
+.grid-12 {
+ @include grid(12);
}
-.grid8 > * {
- width: 12.5%;
+.grid-16 {
+ @include grid(16);
}
-.grid10 > * {
- width: 10%;
+// LESS mixins for *unequal* columns grid container
+// example : .grid-container { @include uneven-grid(2, 1, 10px); }
+
+@mixin uneven-grid($left:$left, $right:$right, $gutter:$gutter) {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin-left: -$gutter;
+
+& > * {
+ display: block; /* IE fix */
+ border-left: $gutter solid transparent;
+ background-clip: padding-box !important; /* no background on border */
+ }
+
+ & > *:nth-child(odd) {
+ width: ($left / ($left + $right)) * 100%;
+ }
+ & > *:nth-child(even) {
+ width: ($right / ($left + $right)) * 100%;
+ }
+
+ @media (max-width: $tiny-screen) {
+ & > *:nth-child(n) {
+ width: 100%;
+ }
+ }
}
-.grid12 > * {
- width: 8.333%;
+
+/* Examples : will be compiled in CSS */
+
+.grid-2-1 {
+ @include uneven-grid(2,1);
}
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * {
- width: 66.666%;
+.grid-1-2 {
+ @include uneven-grid(1,2);
}
-.grid1-2 > *:first-child,
-.grid2-1 > * + * {
- width: 33.333%;
+.grid-3-1 {
+ @include uneven-grid(3,1);
}
-.grid1-3 > *:first-child,
-.grid3-1 > * + * {
- width: 25%;
+.grid-1-3 {
+ @include uneven-grid(1,3);
}
-.grid3-1 > *:first-child,
-.grid1-3 > * + * {
- width: 75%;
+.grid-3-2 {
+ @include uneven-grid(3,2);
}
-/* ---------------------------------- */
-/* ==autogrids */
-/* .. to automatically justify blocs */
-/* ---------------------------------- */
-
-/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
-
-/* container of autogrids */
-[class*="autogrid"] {
- text-align: justify;
+.grid-2-3 {
+ @include uneven-grid(2,3);
}
-[class*="autogrid"]:after {
- content: "";
- display: inline-block;
- width: 100%;
+.grid-4-1 {
+ @include uneven-grid(4,1);
}
-[class*="autogrid"] > * {
- display: inline-block;
- vertical-align: top;
- text-align: left;
-}
-
-/* whitespace fixing for modern browsers including IE9+ */
-:root [class*="autogrid"] {
- font-size: 0;
- /* fallback for IE9+ */
- text-justify: distribute-all-lines;
-}
-
-:root [class*="autogrid"] > * {
- /* fallback for Opera Mini */
- font-size: $base-font-size;
- font-size: ($base-font-size / 10px) + rem;
-}
-
-/* Opera hack */
-[class*="autogrid"]:-o-prefocus {
- word-spacing: -0.43em;
-}
-
-.autogrid2 > * {
- width: 49%;
-}
-
-.autogrid3 > * {
- width: 32%;
-}
-
-.autogrid4 > * {
- width: 23.6%;
-}
-
-.autogrid5 > * {
- width: 19%;
-}
-
-.autogrid6 > * {
- width: 15%;
-}
-
-.autogrid8 > * {
- width: 10.8%;
-}
-
-.autogrid10 > * {
- width: 9%;
-}
-
-.autogrid12 > * {
- width: 6.4%;
-}
+.grid-1-4 {
+ @include uneven-grid(1,4);
+}
\ No newline at end of file