From d03a83bce6bf1c11d648a9fa7f4ebc52ddede37c Mon Sep 17 00:00:00 2001 From: iberdinsky Date: Fri, 28 Apr 2017 19:25:37 +0600 Subject: [PATCH] added gridlex layout --- STARTERKIT/components/_init.scss | 4 +- .../components/asset-builds/css/kss-only.css | 17 +- .../components/asset-builds/css/layouts.css | 1312 ++++++++++++++--- STARTERKIT/components/init/_variables.scss | 44 +- .../layouts/layout-3col/_layout-3col.scss | 162 -- .../layouts/layout-3col/layout-3col.twig | 58 - .../layouts/layout-center/_layout-center.scss | 64 - .../layouts/layout-center/layout-center.json | 3 - .../layouts/layout-center/layout-center.twig | 3 - STARTERKIT/components/layouts/layouts.scss | 14 +- .../components/style-guide/kss-only.scss | 10 - STARTERKIT/package.json | 1 + .../layout/maintenance-page.html.twig | 83 +- STARTERKIT/templates/layout/page.html.twig | 61 +- 14 files changed, 1191 insertions(+), 645 deletions(-) delete mode 100644 STARTERKIT/components/layouts/layout-3col/_layout-3col.scss delete mode 100644 STARTERKIT/components/layouts/layout-3col/layout-3col.twig delete mode 100644 STARTERKIT/components/layouts/layout-center/_layout-center.scss delete mode 100644 STARTERKIT/components/layouts/layout-center/layout-center.json delete mode 100644 STARTERKIT/components/layouts/layout-center/layout-center.twig diff --git a/STARTERKIT/components/_init.scss b/STARTERKIT/components/_init.scss index 1b6860e..0c895ac 100644 --- a/STARTERKIT/components/_init.scss +++ b/STARTERKIT/components/_init.scss @@ -52,8 +52,8 @@ @import 'support-for'; // Add typey to manage font sizes and margins. @import 'typey'; -// Add the Zen Grids responsive layout mixins. -@import 'zen-grids'; +// Add the Gridlex flexbox library http://gridlex.devlint.fr/. +@import 'gridlex/src/gridlex-vars'; // Mixins diff --git a/STARTERKIT/components/asset-builds/css/kss-only.css b/STARTERKIT/components/asset-builds/css/kss-only.css index b32f858..46a7168 100644 --- a/STARTERKIT/components/asset-builds/css/kss-only.css +++ b/STARTERKIT/components/asset-builds/css/kss-only.css @@ -1,19 +1,6 @@ +/*! typey | GPLv2 License | https://github.com/jptaranto/typey */ [id^='kssref-layouts-'] [class^='layout-'][class*='__'] { outline: 1px dotted #999999; } -#kssref-layouts-layout-3column .kss-modifier__example { - padding-left: 20px; - padding-right: 20px; -} - -@media (min-width: 777px) { - #kssref-layouts-layout-3column .kss-modifier__example { - padding-left: 12px; - padding-right: 13px; - } - [dir="rtl"] #kssref-layouts-layout-3column .kss-modifier__example { - padding-left: 13px; - padding-right: 12px; - } -} +/*# sourceMappingURL=kss-only.css.map */ diff --git a/STARTERKIT/components/asset-builds/css/layouts.css b/STARTERKIT/components/asset-builds/css/layouts.css index 278ec5b..4f1a247 100644 --- a/STARTERKIT/components/asset-builds/css/layouts.css +++ b/STARTERKIT/components/asset-builds/css/layouts.css @@ -1,271 +1,1155 @@ -.layout-3col { - margin-left: -20px; - margin-right: -20px; - padding-left: 0; - padding-right: 0; +/*! typey | GPLv2 License | https://github.com/jptaranto/typey */ +.layout-swap { + position: relative; +} + +@media (min-width: 555px) { + .layout-swap { + padding-top: 48px; + } +} + +@media (min-width: 555px) { + .layout-swap__top { + position: absolute; + top: 0; + height: 48px; + width: 100%; + } +} + +/* ========================================================================== + GRIDLEX + Just a Flexbox Grid System +========================================================================== */ +[class*="grid"] { + box-sizing: border-box; + display: -webkit-box; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-flow: row wrap; + margin: 0 -0.5rem; +} + +[class^="col"], +[class*="col-"] { + box-sizing: border-box; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding: 0 0.5rem 1rem; +} + +[class^="col"] { + -webkit-box-flex: 1; + flex: 1 1 0%; +} + +[class^="grid"][class^="col"], +[class^="grid"][class*="col-"] { + margin: 0; + padding: 0; +} + +/************************ + HELPERS SUFFIXES +*************************/ +[class*="grid-"][class*="-noGutter"] { + margin: 0; +} + +[class*="grid-"][class*="-noGutter"] > [class*="col"] { + padding: 0; +} + +[class*="grid-"][class*="-noWrap"] { + flex-wrap: nowrap; +} + +[class*="grid-"][class*="-center"] { + -webkit-box-pack: center; + justify-content: center; +} + +[class*="grid-"][class*="-right"] { + -webkit-box-pack: end; + justify-content: flex-end; + align-self: flex-end; + margin-left: auto; +} + +[class*="grid-"][class*="-top"] { + -webkit-box-align: start; + align-items: flex-start; +} + +[class*="grid-"][class*="-middle"] { + -webkit-box-align: center; + align-items: center; +} + +[class*="grid-"][class*="-bottom"] { + -webkit-box-align: end; + align-items: flex-end; +} + +[class*="grid-"][class*="-reverse"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + flex-direction: row-reverse; +} + +[class*="grid-"][class*="-column"] { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; +} + +[class*="grid-"][class*="-column"] > [class*="col-"] { + flex-basis: auto; +} + +[class*="grid-"][class*="-column-reverse"] { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + flex-direction: column-reverse; } -.layout-3col:before { - content: ""; - display: table; +[class*="grid-"][class*="-spaceBetween"] { + -webkit-box-pack: justify; + justify-content: space-between; } -.layout-3col:after { - content: ""; - display: table; - clear: both; +[class*="grid-"][class*="-spaceAround"] { + justify-content: space-around; } -.layout-3col__full, .layout-3col__left-content, .layout-3col__right-content, .layout-3col__left-sidebar, .layout-3col__right-sidebar, .layout-3col__first-left-sidebar, .layout-3col__second-left-sidebar, .layout-3col__col-1, .layout-3col__col-2, .layout-3col__col-3, .layout-3col__col-4, .layout-3col__col-x { - clear: both; - padding-left: 20px; - padding-right: 20px; - float: left; - width: 100%; - margin-left: 0%; - margin-right: -100%; +[class*="grid-"][class*="-equalHeight"] > [class*="col"] { + display: -webkit-box; + display: flex; + flex-wrap: wrap; } -[dir="rtl"] .layout-3col__full, [dir="rtl"] .layout-3col__left-content, [dir="rtl"] .layout-3col__right-content, [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__right-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar, [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-4, [dir="rtl"] .layout-3col__col-x { - float: right; - margin-right: 0%; - margin-left: -100%; +[class*="grid-"][class*="-equalHeight"] > [class*="col"] > * { + -webkit-box-flex: 1; + flex: 1 0 100%; } -@media (min-width: 777px) { - .layout-3col { - margin-left: -12px; - margin-right: -13px; - padding-left: 0; - padding-right: 0; +[class*="grid-"][class*="-noBottom"] > [class*="col"] { + padding-bottom: 0; +} + +[class*="col-"][class*="-top"] { + align-self: flex-start; +} + +[class*="col-"][class*="-middle"] { + -ms-grid-row-align: center; + align-self: center; +} + +[class*="col-"][class*="-bottom"] { + align-self: flex-end; +} + +[class*="col-"][class*="-first"] { + -webkit-box-ordinal-group: 0; + order: -1; +} + +[class*="col-"][class*="-last"] { + -webkit-box-ordinal-group: 2; + order: 1; +} + +/************************ + GRID BY NUMBER +*************************/ +[class*="grid-1"] > [class^="col"], [class*="grid-1"] > [class*='[class^="col"]-'] { + flex-basis: 100%; + max-width: 100%; +} + +[class*="grid-2"] > [class^="col"], [class*="grid-2"] > [class*='[class^="col"]-'] { + flex-basis: 50%; + max-width: 50%; +} + +[class*="grid-3"] > [class^="col"], [class*="grid-3"] > [class*='[class^="col"]-'] { + flex-basis: 33.33333%; + max-width: 33.33333%; +} + +[class*="grid-4"] > [class^="col"], [class*="grid-4"] > [class*='[class^="col"]-'] { + flex-basis: 25%; + max-width: 25%; +} + +[class*="grid-5"] > [class^="col"], [class*="grid-5"] > [class*='[class^="col"]-'] { + flex-basis: 20%; + max-width: 20%; +} + +[class*="grid-6"] > [class^="col"], [class*="grid-6"] > [class*='[class^="col"]-'] { + flex-basis: 16.66667%; + max-width: 16.66667%; +} + +[class*="grid-7"] > [class^="col"], [class*="grid-7"] > [class*='[class^="col"]-'] { + flex-basis: 14.28571%; + max-width: 14.28571%; +} + +[class*="grid-8"] > [class^="col"], [class*="grid-8"] > [class*='[class^="col"]-'] { + flex-basis: 12.5%; + max-width: 12.5%; +} + +[class*="grid-9"] > [class^="col"], [class*="grid-9"] > [class*='[class^="col"]-'] { + flex-basis: 11.11111%; + max-width: 11.11111%; +} + +[class*="grid-10"] > [class^="col"], [class*="grid-10"] > [class*='[class^="col"]-'] { + flex-basis: 10%; + max-width: 10%; +} + +[class*="grid-11"] > [class^="col"], [class*="grid-11"] > [class*='[class^="col"]-'] { + flex-basis: 9.09091%; + max-width: 9.09091%; +} + +[class*="grid-12"] > [class^="col"], [class*="grid-12"] > [class*='[class^="col"]-'] { + flex-basis: 8.33333%; + max-width: 8.33333%; +} + +@media screen and (min-width: 1200px) { + [class*="_lg-1"] > [class^="col"], [class*="_lg-1"] > [class*='[class^="col"]-'] { + flex-basis: 100%; + max-width: 100%; } - .layout-3col:before { - content: ""; - display: table; + [class*="_lg-2"] > [class^="col"], [class*="_lg-2"] > [class*='[class^="col"]-'] { + flex-basis: 50%; + max-width: 50%; } - .layout-3col:after { - content: ""; - display: table; - clear: both; + [class*="_lg-3"] > [class^="col"], [class*="_lg-3"] > [class*='[class^="col"]-'] { + flex-basis: 33.33333%; + max-width: 33.33333%; } - [dir="rtl"] .layout-3col { - margin-left: -13px; - margin-right: -12px; + [class*="_lg-4"] > [class^="col"], [class*="_lg-4"] > [class*='[class^="col"]-'] { + flex-basis: 25%; + max-width: 25%; } - .layout-3col__full, .layout-3col__left-content, .layout-3col__right-content, .layout-3col__left-sidebar, .layout-3col__right-sidebar { - float: left; - width: 100%; - margin-left: 0%; - margin-right: -100%; - padding-left: 12px; - padding-right: 13px; - } - [dir="rtl"] .layout-3col__full, [dir="rtl"] .layout-3col__left-content, [dir="rtl"] .layout-3col__right-content, [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__right-sidebar { - float: right; - margin-right: 0%; - margin-left: -100%; - } - [dir="rtl"] .layout-3col__full, [dir="rtl"] .layout-3col__left-content, [dir="rtl"] .layout-3col__right-content, [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__right-sidebar { - padding-left: 13px; - padding-right: 12px; - } - .layout-3col__first-left-sidebar, .layout-3col__col-1, .layout-3col__col-3, .layout-3col__col-x:nth-child(2n + 1) { - float: left; - width: 50%; - margin-left: 0%; - margin-right: -100%; - padding-left: 12px; - padding-right: 13px; - } - [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-x:nth-child(2n + 1) { - float: right; - margin-right: 0%; - margin-left: -100%; - } - [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-x:nth-child(2n + 1) { - padding-left: 13px; - padding-right: 12px; - } - .layout-3col__second-left-sidebar, .layout-3col__col-2, .layout-3col__col-4, .layout-3col__col-x:nth-child(2n) { - clear: none; - float: left; - width: 50%; + [class*="_lg-5"] > [class^="col"], [class*="_lg-5"] > [class*='[class^="col"]-'] { + flex-basis: 20%; + max-width: 20%; + } + [class*="_lg-6"] > [class^="col"], [class*="_lg-6"] > [class*='[class^="col"]-'] { + flex-basis: 16.66667%; + max-width: 16.66667%; + } + [class*="_lg-7"] > [class^="col"], [class*="_lg-7"] > [class*='[class^="col"]-'] { + flex-basis: 14.28571%; + max-width: 14.28571%; + } + [class*="_lg-8"] > [class^="col"], [class*="_lg-8"] > [class*='[class^="col"]-'] { + flex-basis: 12.5%; + max-width: 12.5%; + } + [class*="_lg-9"] > [class^="col"], [class*="_lg-9"] > [class*='[class^="col"]-'] { + flex-basis: 11.11111%; + max-width: 11.11111%; + } + [class*="_lg-10"] > [class^="col"], [class*="_lg-10"] > [class*='[class^="col"]-'] { + flex-basis: 10%; + max-width: 10%; + } + [class*="_lg-11"] > [class^="col"], [class*="_lg-11"] > [class*='[class^="col"]-'] { + flex-basis: 9.09091%; + max-width: 9.09091%; + } + [class*="_lg-12"] > [class^="col"], [class*="_lg-12"] > [class*='[class^="col"]-'] { + flex-basis: 8.33333%; + max-width: 8.33333%; + } +} + +@media screen and (min-width: 993px) and (max-width: 1200px) { + [class*="_md-1"] > [class^="col"], [class*="_md-1"] > [class*='[class^="col"]-'] { + flex-basis: 100%; + max-width: 100%; + } + [class*="_md-2"] > [class^="col"], [class*="_md-2"] > [class*='[class^="col"]-'] { + flex-basis: 50%; + max-width: 50%; + } + [class*="_md-3"] > [class^="col"], [class*="_md-3"] > [class*='[class^="col"]-'] { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + [class*="_md-4"] > [class^="col"], [class*="_md-4"] > [class*='[class^="col"]-'] { + flex-basis: 25%; + max-width: 25%; + } + [class*="_md-5"] > [class^="col"], [class*="_md-5"] > [class*='[class^="col"]-'] { + flex-basis: 20%; + max-width: 20%; + } + [class*="_md-6"] > [class^="col"], [class*="_md-6"] > [class*='[class^="col"]-'] { + flex-basis: 16.66667%; + max-width: 16.66667%; + } + [class*="_md-7"] > [class^="col"], [class*="_md-7"] > [class*='[class^="col"]-'] { + flex-basis: 14.28571%; + max-width: 14.28571%; + } + [class*="_md-8"] > [class^="col"], [class*="_md-8"] > [class*='[class^="col"]-'] { + flex-basis: 12.5%; + max-width: 12.5%; + } + [class*="_md-9"] > [class^="col"], [class*="_md-9"] > [class*='[class^="col"]-'] { + flex-basis: 11.11111%; + max-width: 11.11111%; + } + [class*="_md-10"] > [class^="col"], [class*="_md-10"] > [class*='[class^="col"]-'] { + flex-basis: 10%; + max-width: 10%; + } + [class*="_md-11"] > [class^="col"], [class*="_md-11"] > [class*='[class^="col"]-'] { + flex-basis: 9.09091%; + max-width: 9.09091%; + } + [class*="_md-12"] > [class^="col"], [class*="_md-12"] > [class*='[class^="col"]-'] { + flex-basis: 8.33333%; + max-width: 8.33333%; + } +} + +@media screen and (min-width: 641px) and (max-width: 992px) { + [class*="_sm-1"] > [class^="col"], [class*="_sm-1"] > [class*='[class^="col"]-'] { + flex-basis: 100%; + max-width: 100%; + } + [class*="_sm-2"] > [class^="col"], [class*="_sm-2"] > [class*='[class^="col"]-'] { + flex-basis: 50%; + max-width: 50%; + } + [class*="_sm-3"] > [class^="col"], [class*="_sm-3"] > [class*='[class^="col"]-'] { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + [class*="_sm-4"] > [class^="col"], [class*="_sm-4"] > [class*='[class^="col"]-'] { + flex-basis: 25%; + max-width: 25%; + } + [class*="_sm-5"] > [class^="col"], [class*="_sm-5"] > [class*='[class^="col"]-'] { + flex-basis: 20%; + max-width: 20%; + } + [class*="_sm-6"] > [class^="col"], [class*="_sm-6"] > [class*='[class^="col"]-'] { + flex-basis: 16.66667%; + max-width: 16.66667%; + } + [class*="_sm-7"] > [class^="col"], [class*="_sm-7"] > [class*='[class^="col"]-'] { + flex-basis: 14.28571%; + max-width: 14.28571%; + } + [class*="_sm-8"] > [class^="col"], [class*="_sm-8"] > [class*='[class^="col"]-'] { + flex-basis: 12.5%; + max-width: 12.5%; + } + [class*="_sm-9"] > [class^="col"], [class*="_sm-9"] > [class*='[class^="col"]-'] { + flex-basis: 11.11111%; + max-width: 11.11111%; + } + [class*="_sm-10"] > [class^="col"], [class*="_sm-10"] > [class*='[class^="col"]-'] { + flex-basis: 10%; + max-width: 10%; + } + [class*="_sm-11"] > [class^="col"], [class*="_sm-11"] > [class*='[class^="col"]-'] { + flex-basis: 9.09091%; + max-width: 9.09091%; + } + [class*="_sm-12"] > [class^="col"], [class*="_sm-12"] > [class*='[class^="col"]-'] { + flex-basis: 8.33333%; + max-width: 8.33333%; + } +} + +@media screen and (max-width: 640px) { + [class*="_xs-1"] > [class^="col"], [class*="_xs-1"] > [class*='[class^="col"]-'] { + flex-basis: 100%; + max-width: 100%; + } + [class*="_xs-2"] > [class^="col"], [class*="_xs-2"] > [class*='[class^="col"]-'] { + flex-basis: 50%; + max-width: 50%; + } + [class*="_xs-3"] > [class^="col"], [class*="_xs-3"] > [class*='[class^="col"]-'] { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + [class*="_xs-4"] > [class^="col"], [class*="_xs-4"] > [class*='[class^="col"]-'] { + flex-basis: 25%; + max-width: 25%; + } + [class*="_xs-5"] > [class^="col"], [class*="_xs-5"] > [class*='[class^="col"]-'] { + flex-basis: 20%; + max-width: 20%; + } + [class*="_xs-6"] > [class^="col"], [class*="_xs-6"] > [class*='[class^="col"]-'] { + flex-basis: 16.66667%; + max-width: 16.66667%; + } + [class*="_xs-7"] > [class^="col"], [class*="_xs-7"] > [class*='[class^="col"]-'] { + flex-basis: 14.28571%; + max-width: 14.28571%; + } + [class*="_xs-8"] > [class^="col"], [class*="_xs-8"] > [class*='[class^="col"]-'] { + flex-basis: 12.5%; + max-width: 12.5%; + } + [class*="_xs-9"] > [class^="col"], [class*="_xs-9"] > [class*='[class^="col"]-'] { + flex-basis: 11.11111%; + max-width: 11.11111%; + } + [class*="_xs-10"] > [class^="col"], [class*="_xs-10"] > [class*='[class^="col"]-'] { + flex-basis: 10%; + max-width: 10%; + } + [class*="_xs-11"] > [class^="col"], [class*="_xs-11"] > [class*='[class^="col"]-'] { + flex-basis: 9.09091%; + max-width: 9.09091%; + } + [class*="_xs-12"] > [class^="col"], [class*="_xs-12"] > [class*='[class^="col"]-'] { + flex-basis: 8.33333%; + max-width: 8.33333%; + } +} + +/************************ + COLS SIZES +*************************/ +[class*='grid'] > [class*="col-1"] { + flex-basis: 8.33333%; + max-width: 8.33333%; +} + +[class*='grid'] > [class*="col-2"] { + flex-basis: 16.66667%; + max-width: 16.66667%; +} + +[class*='grid'] > [class*="col-3"] { + flex-basis: 25%; + max-width: 25%; +} + +[class*='grid'] > [class*="col-4"] { + flex-basis: 33.33333%; + max-width: 33.33333%; +} + +[class*='grid'] > [class*="col-5"] { + flex-basis: 41.66667%; + max-width: 41.66667%; +} + +[class*='grid'] > [class*="col-6"] { + flex-basis: 50%; + max-width: 50%; +} + +[class*='grid'] > [class*="col-7"] { + flex-basis: 58.33333%; + max-width: 58.33333%; +} + +[class*='grid'] > [class*="col-8"] { + flex-basis: 66.66667%; + max-width: 66.66667%; +} + +[class*='grid'] > [class*="col-9"] { + flex-basis: 75%; + max-width: 75%; +} + +[class*='grid'] > [class*="col-10"] { + flex-basis: 83.33333%; + max-width: 83.33333%; +} + +[class*='grid'] > [class*="col-11"] { + flex-basis: 91.66667%; + max-width: 91.66667%; +} + +[class*='grid'] > [class*="col-12"] { + flex-basis: 100%; + max-width: 100%; +} + +[class*="grid"] > [data-push-left*="off-0"] { + margin-left: 0; +} + +[class*="grid"] > [data-push-left*="off-1"] { + margin-left: 8.33333%; +} + +[class*="grid"] > [data-push-left*="off-2"] { + margin-left: 16.66667%; +} + +[class*="grid"] > [data-push-left*="off-3"] { + margin-left: 25%; +} + +[class*="grid"] > [data-push-left*="off-4"] { + margin-left: 33.33333%; +} + +[class*="grid"] > [data-push-left*="off-5"] { + margin-left: 41.66667%; +} + +[class*="grid"] > [data-push-left*="off-6"] { + margin-left: 50%; +} + +[class*="grid"] > [data-push-left*="off-7"] { + margin-left: 58.33333%; +} + +[class*="grid"] > [data-push-left*="off-8"] { + margin-left: 66.66667%; +} + +[class*="grid"] > [data-push-left*="off-9"] { + margin-left: 75%; +} + +[class*="grid"] > [data-push-left*="off-10"] { + margin-left: 83.33333%; +} + +[class*="grid"] > [data-push-left*="off-11"] { + margin-left: 91.66667%; +} + +[class*="grid"] > [data-push-right*="off-0"] { + margin-right: 0; +} + +[class*="grid"] > [data-push-right*="off-1"] { + margin-right: 8.33333%; +} + +[class*="grid"] > [data-push-right*="off-2"] { + margin-right: 16.66667%; +} + +[class*="grid"] > [data-push-right*="off-3"] { + margin-right: 25%; +} + +[class*="grid"] > [data-push-right*="off-4"] { + margin-right: 33.33333%; +} + +[class*="grid"] > [data-push-right*="off-5"] { + margin-right: 41.66667%; +} + +[class*="grid"] > [data-push-right*="off-6"] { + margin-right: 50%; +} + +[class*="grid"] > [data-push-right*="off-7"] { + margin-right: 58.33333%; +} + +[class*="grid"] > [data-push-right*="off-8"] { + margin-right: 66.66667%; +} + +[class*="grid"] > [data-push-right*="off-9"] { + margin-right: 75%; +} + +[class*="grid"] > [data-push-right*="off-10"] { + margin-right: 83.33333%; +} + +[class*="grid"] > [data-push-right*="off-11"] { + margin-right: 91.66667%; +} + +@media screen and (min-width: 1200px) { + [class*='grid'] > [class*="_lg-1"] { + flex-basis: 8.33333%; + max-width: 8.33333%; + } + [class*='grid'] > [class*="_lg-2"] { + flex-basis: 16.66667%; + max-width: 16.66667%; + } + [class*='grid'] > [class*="_lg-3"] { + flex-basis: 25%; + max-width: 25%; + } + [class*='grid'] > [class*="_lg-4"] { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + [class*='grid'] > [class*="_lg-5"] { + flex-basis: 41.66667%; + max-width: 41.66667%; + } + [class*='grid'] > [class*="_lg-6"] { + flex-basis: 50%; + max-width: 50%; + } + [class*='grid'] > [class*="_lg-7"] { + flex-basis: 58.33333%; + max-width: 58.33333%; + } + [class*='grid'] > [class*="_lg-8"] { + flex-basis: 66.66667%; + max-width: 66.66667%; + } + [class*='grid'] > [class*="_lg-9"] { + flex-basis: 75%; + max-width: 75%; + } + [class*='grid'] > [class*="_lg-10"] { + flex-basis: 83.33333%; + max-width: 83.33333%; + } + [class*='grid'] > [class*="_lg-11"] { + flex-basis: 91.66667%; + max-width: 91.66667%; + } + [class*='grid'] > [class*="_lg-12"] { + flex-basis: 100%; + max-width: 100%; + } + [class*="grid"] > [data-push-left*="_lg-0"] { + margin-left: 0; + } + [class*="grid"] > [data-push-left*="_lg-1"] { + margin-left: 8.33333%; + } + [class*="grid"] > [data-push-left*="_lg-2"] { + margin-left: 16.66667%; + } + [class*="grid"] > [data-push-left*="_lg-3"] { + margin-left: 25%; + } + [class*="grid"] > [data-push-left*="_lg-4"] { + margin-left: 33.33333%; + } + [class*="grid"] > [data-push-left*="_lg-5"] { + margin-left: 41.66667%; + } + [class*="grid"] > [data-push-left*="_lg-6"] { margin-left: 50%; - margin-right: -100%; - padding-left: 12px; - padding-right: 13px; } - [dir="rtl"] .layout-3col__second-left-sidebar, [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-4, [dir="rtl"] .layout-3col__col-x:nth-child(2n) { - float: right; + [class*="grid"] > [data-push-left*="_lg-7"] { + margin-left: 58.33333%; + } + [class*="grid"] > [data-push-left*="_lg-8"] { + margin-left: 66.66667%; + } + [class*="grid"] > [data-push-left*="_lg-9"] { + margin-left: 75%; + } + [class*="grid"] > [data-push-left*="_lg-10"] { + margin-left: 83.33333%; + } + [class*="grid"] > [data-push-left*="_lg-11"] { + margin-left: 91.66667%; + } + [class*="grid"] > [data-push-right*="_lg-0"] { + margin-right: 0; + } + [class*="grid"] > [data-push-right*="_lg-1"] { + margin-right: 8.33333%; + } + [class*="grid"] > [data-push-right*="_lg-2"] { + margin-right: 16.66667%; + } + [class*="grid"] > [data-push-right*="_lg-3"] { + margin-right: 25%; + } + [class*="grid"] > [data-push-right*="_lg-4"] { + margin-right: 33.33333%; + } + [class*="grid"] > [data-push-right*="_lg-5"] { + margin-right: 41.66667%; + } + [class*="grid"] > [data-push-right*="_lg-6"] { margin-right: 50%; - margin-left: -100%; } - [dir="rtl"] .layout-3col__second-left-sidebar, [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-4, [dir="rtl"] .layout-3col__col-x:nth-child(2n) { - padding-left: 13px; - padding-right: 12px; + [class*="grid"] > [data-push-right*="_lg-7"] { + margin-right: 58.33333%; + } + [class*="grid"] > [data-push-right*="_lg-8"] { + margin-right: 66.66667%; + } + [class*="grid"] > [data-push-right*="_lg-9"] { + margin-right: 75%; + } + [class*="grid"] > [data-push-right*="_lg-10"] { + margin-right: 83.33333%; + } + [class*="grid"] > [data-push-right*="_lg-11"] { + margin-right: 91.66667%; } } -@media (min-width: 999px) { - .layout-3col__full { - float: left; - width: 100%; - margin-left: 0%; - margin-right: -100%; - } - [dir="rtl"] .layout-3col__full { - float: right; - margin-right: 0%; - margin-left: -100%; - } - .layout-3col__left-content { - float: left; - width: 66.66667%; - margin-left: 0%; - margin-right: -100%; - } - [dir="rtl"] .layout-3col__left-content { - float: right; - margin-right: 0%; - margin-left: -100%; - } - .layout-3col__right-content { - float: left; - width: 66.66667%; +@media screen and (min-width: 993px) and (max-width: 1200px) { + [class*='grid'] > [class*="_md-1"] { + flex-basis: 8.33333%; + max-width: 8.33333%; + } + [class*='grid'] > [class*="_md-2"] { + flex-basis: 16.66667%; + max-width: 16.66667%; + } + [class*='grid'] > [class*="_md-3"] { + flex-basis: 25%; + max-width: 25%; + } + [class*='grid'] > [class*="_md-4"] { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + [class*='grid'] > [class*="_md-5"] { + flex-basis: 41.66667%; + max-width: 41.66667%; + } + [class*='grid'] > [class*="_md-6"] { + flex-basis: 50%; + max-width: 50%; + } + [class*='grid'] > [class*="_md-7"] { + flex-basis: 58.33333%; + max-width: 58.33333%; + } + [class*='grid'] > [class*="_md-8"] { + flex-basis: 66.66667%; + max-width: 66.66667%; + } + [class*='grid'] > [class*="_md-9"] { + flex-basis: 75%; + max-width: 75%; + } + [class*='grid'] > [class*="_md-10"] { + flex-basis: 83.33333%; + max-width: 83.33333%; + } + [class*='grid'] > [class*="_md-11"] { + flex-basis: 91.66667%; + max-width: 91.66667%; + } + [class*='grid'] > [class*="_md-12"] { + flex-basis: 100%; + max-width: 100%; + } + [class*="grid"] > [data-push-left*="_md-0"] { + margin-left: 0; + } + [class*="grid"] > [data-push-left*="_md-1"] { + margin-left: 8.33333%; + } + [class*="grid"] > [data-push-left*="_md-2"] { + margin-left: 16.66667%; + } + [class*="grid"] > [data-push-left*="_md-3"] { + margin-left: 25%; + } + [class*="grid"] > [data-push-left*="_md-4"] { margin-left: 33.33333%; - margin-right: -100%; } - [dir="rtl"] .layout-3col__right-content { - float: right; + [class*="grid"] > [data-push-left*="_md-5"] { + margin-left: 41.66667%; + } + [class*="grid"] > [data-push-left*="_md-6"] { + margin-left: 50%; + } + [class*="grid"] > [data-push-left*="_md-7"] { + margin-left: 58.33333%; + } + [class*="grid"] > [data-push-left*="_md-8"] { + margin-left: 66.66667%; + } + [class*="grid"] > [data-push-left*="_md-9"] { + margin-left: 75%; + } + [class*="grid"] > [data-push-left*="_md-10"] { + margin-left: 83.33333%; + } + [class*="grid"] > [data-push-left*="_md-11"] { + margin-left: 91.66667%; + } + [class*="grid"] > [data-push-right*="_md-0"] { + margin-right: 0; + } + [class*="grid"] > [data-push-right*="_md-1"] { + margin-right: 8.33333%; + } + [class*="grid"] > [data-push-right*="_md-2"] { + margin-right: 16.66667%; + } + [class*="grid"] > [data-push-right*="_md-3"] { + margin-right: 25%; + } + [class*="grid"] > [data-push-right*="_md-4"] { margin-right: 33.33333%; - margin-left: -100%; } - .layout-3col__left-sidebar, .layout-3col__first-left-sidebar, .layout-3col__second-left-sidebar { - clear: right; - float: right; - width: 33.33333%; + [class*="grid"] > [data-push-right*="_md-5"] { + margin-right: 41.66667%; + } + [class*="grid"] > [data-push-right*="_md-6"] { + margin-right: 50%; + } + [class*="grid"] > [data-push-right*="_md-7"] { + margin-right: 58.33333%; + } + [class*="grid"] > [data-push-right*="_md-8"] { margin-right: 66.66667%; - margin-left: -100%; } - [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar { - clear: left; + [class*="grid"] > [data-push-right*="_md-9"] { + margin-right: 75%; } - [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar { - float: left; - margin-left: 66.66667%; - margin-right: -100%; - } - .layout-3col__right-sidebar { - clear: right; - float: right; - width: 33.33333%; - margin-right: 0%; - margin-left: -100%; - } - [dir="rtl"] .layout-3col__right-sidebar { - clear: left; - } - [dir="rtl"] .layout-3col__right-sidebar { - float: left; - margin-left: 0%; - margin-right: -100%; - } - .layout-3col__col-1, .layout-3col__col-x:nth-child(3n+1) { - clear: both; - float: left; - width: 33.33333%; - margin-left: 0%; - margin-right: -100%; - } - [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-x:nth-child(3n+1) { - float: right; - margin-right: 0%; - margin-left: -100%; - } - .layout-3col__col-2, .layout-3col__col-x:nth-child(3n+2) { - clear: none; - float: left; - width: 33.33333%; + [class*="grid"] > [data-push-right*="_md-10"] { + margin-right: 83.33333%; + } + [class*="grid"] > [data-push-right*="_md-11"] { + margin-right: 91.66667%; + } +} + +@media screen and (min-width: 641px) and (max-width: 992px) { + [class*='grid'] > [class*="_sm-1"] { + flex-basis: 8.33333%; + max-width: 8.33333%; + } + [class*='grid'] > [class*="_sm-2"] { + flex-basis: 16.66667%; + max-width: 16.66667%; + } + [class*='grid'] > [class*="_sm-3"] { + flex-basis: 25%; + max-width: 25%; + } + [class*='grid'] > [class*="_sm-4"] { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + [class*='grid'] > [class*="_sm-5"] { + flex-basis: 41.66667%; + max-width: 41.66667%; + } + [class*='grid'] > [class*="_sm-6"] { + flex-basis: 50%; + max-width: 50%; + } + [class*='grid'] > [class*="_sm-7"] { + flex-basis: 58.33333%; + max-width: 58.33333%; + } + [class*='grid'] > [class*="_sm-8"] { + flex-basis: 66.66667%; + max-width: 66.66667%; + } + [class*='grid'] > [class*="_sm-9"] { + flex-basis: 75%; + max-width: 75%; + } + [class*='grid'] > [class*="_sm-10"] { + flex-basis: 83.33333%; + max-width: 83.33333%; + } + [class*='grid'] > [class*="_sm-11"] { + flex-basis: 91.66667%; + max-width: 91.66667%; + } + [class*='grid'] > [class*="_sm-12"] { + flex-basis: 100%; + max-width: 100%; + } + [class*="grid"] > [data-push-left*="_sm-0"] { + margin-left: 0; + } + [class*="grid"] > [data-push-left*="_sm-1"] { + margin-left: 8.33333%; + } + [class*="grid"] > [data-push-left*="_sm-2"] { + margin-left: 16.66667%; + } + [class*="grid"] > [data-push-left*="_sm-3"] { + margin-left: 25%; + } + [class*="grid"] > [data-push-left*="_sm-4"] { margin-left: 33.33333%; - margin-right: -100%; } - [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-x:nth-child(3n+2) { - float: right; - margin-right: 33.33333%; - margin-left: -100%; + [class*="grid"] > [data-push-left*="_sm-5"] { + margin-left: 41.66667%; + } + [class*="grid"] > [data-push-left*="_sm-6"] { + margin-left: 50%; + } + [class*="grid"] > [data-push-left*="_sm-7"] { + margin-left: 58.33333%; } - .layout-3col__col-3, .layout-3col__col-x:nth-child(3n) { - clear: none; - float: left; - width: 33.33333%; + [class*="grid"] > [data-push-left*="_sm-8"] { margin-left: 66.66667%; - margin-right: -100%; } - [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-x:nth-child(3n) { - float: right; + [class*="grid"] > [data-push-left*="_sm-9"] { + margin-left: 75%; + } + [class*="grid"] > [data-push-left*="_sm-10"] { + margin-left: 83.33333%; + } + [class*="grid"] > [data-push-left*="_sm-11"] { + margin-left: 91.66667%; + } + [class*="grid"] > [data-push-right*="_sm-0"] { + margin-right: 0; + } + [class*="grid"] > [data-push-right*="_sm-1"] { + margin-right: 8.33333%; + } + [class*="grid"] > [data-push-right*="_sm-2"] { + margin-right: 16.66667%; + } + [class*="grid"] > [data-push-right*="_sm-3"] { + margin-right: 25%; + } + [class*="grid"] > [data-push-right*="_sm-4"] { + margin-right: 33.33333%; + } + [class*="grid"] > [data-push-right*="_sm-5"] { + margin-right: 41.66667%; + } + [class*="grid"] > [data-push-right*="_sm-6"] { + margin-right: 50%; + } + [class*="grid"] > [data-push-right*="_sm-7"] { + margin-right: 58.33333%; + } + [class*="grid"] > [data-push-right*="_sm-8"] { margin-right: 66.66667%; - margin-left: -100%; } - .layout-3col__col-4 { - display: none; + [class*="grid"] > [data-push-right*="_sm-9"] { + margin-right: 75%; + } + [class*="grid"] > [data-push-right*="_sm-10"] { + margin-right: 83.33333%; + } + [class*="grid"] > [data-push-right*="_sm-11"] { + margin-right: 91.66667%; } } -.layout-3col__grid-item-container { - padding-left: 0; - padding-right: 0; +@media screen and (max-width: 640px) { + [class*='grid'] > [class*="_xs-1"] { + flex-basis: 8.33333%; + max-width: 8.33333%; + } + [class*='grid'] > [class*="_xs-2"] { + flex-basis: 16.66667%; + max-width: 16.66667%; + } + [class*='grid'] > [class*="_xs-3"] { + flex-basis: 25%; + max-width: 25%; + } + [class*='grid'] > [class*="_xs-4"] { + flex-basis: 33.33333%; + max-width: 33.33333%; + } + [class*='grid'] > [class*="_xs-5"] { + flex-basis: 41.66667%; + max-width: 41.66667%; + } + [class*='grid'] > [class*="_xs-6"] { + flex-basis: 50%; + max-width: 50%; + } + [class*='grid'] > [class*="_xs-7"] { + flex-basis: 58.33333%; + max-width: 58.33333%; + } + [class*='grid'] > [class*="_xs-8"] { + flex-basis: 66.66667%; + max-width: 66.66667%; + } + [class*='grid'] > [class*="_xs-9"] { + flex-basis: 75%; + max-width: 75%; + } + [class*='grid'] > [class*="_xs-10"] { + flex-basis: 83.33333%; + max-width: 83.33333%; + } + [class*='grid'] > [class*="_xs-11"] { + flex-basis: 91.66667%; + max-width: 91.66667%; + } + [class*='grid'] > [class*="_xs-12"] { + flex-basis: 100%; + max-width: 100%; + } + [class*="grid"] > [data-push-left*="_xs-0"] { + margin-left: 0; + } + [class*="grid"] > [data-push-left*="_xs-1"] { + margin-left: 8.33333%; + } + [class*="grid"] > [data-push-left*="_xs-2"] { + margin-left: 16.66667%; + } + [class*="grid"] > [data-push-left*="_xs-3"] { + margin-left: 25%; + } + [class*="grid"] > [data-push-left*="_xs-4"] { + margin-left: 33.33333%; + } + [class*="grid"] > [data-push-left*="_xs-5"] { + margin-left: 41.66667%; + } + [class*="grid"] > [data-push-left*="_xs-6"] { + margin-left: 50%; + } + [class*="grid"] > [data-push-left*="_xs-7"] { + margin-left: 58.33333%; + } + [class*="grid"] > [data-push-left*="_xs-8"] { + margin-left: 66.66667%; + } + [class*="grid"] > [data-push-left*="_xs-9"] { + margin-left: 75%; + } + [class*="grid"] > [data-push-left*="_xs-10"] { + margin-left: 83.33333%; + } + [class*="grid"] > [data-push-left*="_xs-11"] { + margin-left: 91.66667%; + } + [class*="grid"] > [data-push-right*="_xs-0"] { + margin-right: 0; + } + [class*="grid"] > [data-push-right*="_xs-1"] { + margin-right: 8.33333%; + } + [class*="grid"] > [data-push-right*="_xs-2"] { + margin-right: 16.66667%; + } + [class*="grid"] > [data-push-right*="_xs-3"] { + margin-right: 25%; + } + [class*="grid"] > [data-push-right*="_xs-4"] { + margin-right: 33.33333%; + } + [class*="grid"] > [data-push-right*="_xs-5"] { + margin-right: 41.66667%; + } + [class*="grid"] > [data-push-right*="_xs-6"] { + margin-right: 50%; + } + [class*="grid"] > [data-push-right*="_xs-7"] { + margin-right: 58.33333%; + } + [class*="grid"] > [data-push-right*="_xs-8"] { + margin-right: 66.66667%; + } + [class*="grid"] > [data-push-right*="_xs-9"] { + margin-right: 75%; + } + [class*="grid"] > [data-push-right*="_xs-10"] { + margin-right: 83.33333%; + } + [class*="grid"] > [data-push-right*="_xs-11"] { + margin-right: 91.66667%; + } } -.layout-3col__grid-item-container:before { - content: ""; - display: table; +/************************ + HIDING COLS +*************************/ +[class*="col-"]:not([class*="col-0"]) { + display: block; } -.layout-3col__grid-item-container:after { - content: ""; - display: table; - clear: both; +[class*="grid"][class*="col-"]:not([class*="col-0"]) { + display: -webkit-box; + display: flex; } -.layout-center { - padding-left: 20px; - padding-right: 20px; - margin: 0 auto; - max-width: 1165px; +[class*="col-"][class*="col-0"] { + display: none; } -@media (min-width: 777px) { - .layout-center { - padding-left: 12px; - padding-right: 13px; +@media screen and (min-width: 1200px) { + [class*="grid"] > :not([class*="_lg-0"]) { + display: block; } - [dir="rtl"] .layout-center { - padding-left: 13px; - padding-right: 12px; + [class*="grid"]:not([class*="_lg-0"]) { + display: -webkit-box; + display: flex; + } + [class*="grid"] > [class*="_lg-0"], + [class*="grid"][class*="-equalHeight"] > [class*="_lg-0"] { + display: none; } } -.layout-center--shared-grid, -.layout-center.layout-3col { - padding-left: 0; - padding-right: 0; -} - -.layout-swap { - position: relative; +@media screen and (min-width: 993px) and (max-width: 1200px) { + [class*="grid"] > :not([class*="_md-0"]) { + display: block; + } + [class*="grid"]:not([class*="_md-0"]) { + display: -webkit-box; + display: flex; + } + [class*="grid"] > [class*="_md-0"], + [class*="grid"][class*="-equalHeight"] > [class*="_md-0"] { + display: none; + } } -@media (min-width: 555px) { - .layout-swap { - padding-top: 48px; +@media screen and (min-width: 641px) and (max-width: 992px) { + [class*="grid"] > :not([class*="_sm-0"]) { + display: block; + } + [class*="grid"]:not([class*="_sm-0"]) { + display: -webkit-box; + display: flex; + } + [class*="grid"] > [class*="_sm-0"], + [class*="grid"][class*="-equalHeight"] > [class*="_sm-0"] { + display: none; } } -@media (min-width: 555px) { - .layout-swap__top { - position: absolute; - top: 0; - height: 48px; - width: 100%; +@media screen and (max-width: 640px) { + [class*="grid"] > :not([class*="_xs-0"]) { + display: block; + } + [class*="grid"]:not([class*="_xs-0"]) { + display: -webkit-box; + display: flex; + } + [class*="grid"] > [class*="_xs-0"], + [class*="grid"][class*="-equalHeight"] > [class*="_xs-0"] { + display: none; } } + +/*# sourceMappingURL=layouts.css.map */ diff --git a/STARTERKIT/components/init/_variables.scss b/STARTERKIT/components/init/_variables.scss index 7a7daf0..d556c8d 100644 --- a/STARTERKIT/components/init/_variables.scss +++ b/STARTERKIT/components/init/_variables.scss @@ -133,40 +133,22 @@ $rem-fallback: false; // @include breakpoint-set('to ems', true); -// Zen grids +// Gridlex grids // -// The default grid system is built using the Zen Grids sass module. Full -// documentation is available on the [Zen Grids website](http://zengrids.com/). +// http://gridlex.devlint.fr/ // -// Note: if you are more comfortable using another grid system, you can easily -// remove Zen Grids and its layouts. +// Other variables here: node_modules/gridlex/src/gridlex-vars.scss // -// Style guide: sass.variables.zen-grids - -// These are needed for all breakpoints on all layouts. -$zen-auto-include-grid-item-base: false; -$zen-box-sizing: universal-border-box; - -// First we set the values we need for the mobile version of our layouts (the -// version that does _not_ appear inside any @media queries.) -$zen-columns: 1; -$zen-gutters: 40px; - -// Then we set the values we need for each of the layouts at larger media query -// sizes. Note how the names of the layouts match the names of our breakpoints -// above. That allows a single zen-respond-to() to both use the proper item -// from $zen-layouts and from $breakpoints. -$zen-layouts: ( - m: ( - columns: 2, - // The gutters in the layouts are larger on mobile. - gutters: 25px, - ), - xl: ( - columns: 3, - gutters: 25px, - ), -); +// Style guide: sass.variables.gridlex + +$gl-gutter: 1rem; + +$gl-xs: 'screen and (max-width: 640px)'; +$gl-sm: 'screen and (min-width: 641px) and (max-width: 992px)'; +$gl-md: 'screen and (min-width: 993px) and (max-width: 1200px)'; +$gl-lg: 'screen and (min-width: 1200px)'; +// TODO: add theme.breakpoints.yml file and dependency here + // See $include-rtl below. $zen-rtl-selector: '[dir="rtl"]'; diff --git a/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss b/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss deleted file mode 100644 index 4206e6f..0000000 --- a/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss +++ /dev/null @@ -1,162 +0,0 @@ -// Responsive 3-column grid -// -// The `.layout-3col` layout is a responsive grid layout that is: -// - 1 column at mobile sizes -// - 2 columns at tablet sizes -// - 3 columns at desktop sizes -// -// The `.layout-3col` class is used on the container div for the layout. A *grid -// item* in the container can be created using one of the following classes: -// -// - `.layout-3col__full` : 3-column wide grid item; starts a new row -// - `.layout-3col__left-content` : 2-column wide grid item, spanning columns 1 -// and 2; starts a new row -// - `.layout-3col__right-content` : 2-column wide grid item, spanning columns 2 -// and 3; starts a new row -// - `.layout-3col__left-sidebar` : 1-column wide grid item spanning column 1; -// starts a new row on tablet screens -// - `.layout-3col__first-left-sidebar` : 1-column wide grid item spanning column 1; -// spans column 1 and starts a new row on tablet screens only -// - `.layout-3col__second-left-sidebar` : 1-column wide grid item spanning column 1; -// spans column 2 on tablet screens only -// - `.layout-3col__right-sidebar` : 1-column wide grid item spanning column 3; -// starts a new row on tablet screens -// - `.layout-3col__col-1` : 1-column wide grid item spanning column 1; starts a -// new row -// - `.layout-3col__col-2` : 1-column wide grid item spanning column 2 -// - `.layout-3col__col-3` : 1-column wide grid item spanning column 3; starts a -// new row on tablet screens -// - `.layout-3col__col-4` : At tablet sizes, the `__col-x` grid items will form -// an irregular layout of 2 items in the first row and 1 item in the second -// row. The `__col-4` is a "hidden" item that does not appear on the -// large-screen 3-column grid, but is a 1-column wide grid item spanning -// column 2 on tablet screens. -// - `.layout-3col__col-x` : 1-column wide grid item spanning column 1; when -// several of these are used inside a `.layout-3col__grid-item-container` or -// `.layout-3col`, the first one is positioned like `__col-1`, the -// second like `__col-2`, etc. -// -// There are 2 ways to do a nested grid: -// 1. Place a grid container div inside a grid item. Just apply the normal -// classes to the nested grid container and its grid items. -// 2. The grid item's div is also the grid container for the nested grid. In -// this case, the `.layout3-col__grid-item-container` class should be added -// to the div to ensure its nested grid items align with the parent grid. -// -// Markup: layout-3col.twig -// -// Style guide: layouts.layout-3col - -.layout-3col, -%layout-3col { - // We set the context to flow, so that this container can be used in most - // places in the HTML, i.e. it must be nested inside something that has - // padding. - @include zen-grid-container($context: flow); - - &__full, - &__left-content, - &__right-content, - &__left-sidebar, - &__right-sidebar, - &__first-left-sidebar, - &__second-left-sidebar, - &__col-1, - &__col-2, - &__col-3, - &__col-4, - &__col-x { - @include zen-new-row(both); - @include zen-grid-item-base(); - @include zen-grid-item(1, 1); - } - - @include zen-respond-to(m) { - // Since our container's context is "flow" and we changed the gutter size, - // we need to re-apply the container's negative left/right margins. - @include zen-grid-container($context: flow); - - &__full, - &__left-content, - &__right-content, - &__left-sidebar, - &__right-sidebar { - @include zen-grid-item(2, 1); - // Since we changed the gutter size for this media query, we need to - // re-apply the padding to every grid item. - @include zen-apply-gutter-padding(); - } - - &__first-left-sidebar, - &__col-1, - &__col-3, - &__col-x:nth-child(2n + 1) { - @include zen-grid-item(1, 1); - @include zen-apply-gutter-padding(); - } - - &__second-left-sidebar, - &__col-2, - &__col-4, - &__col-x:nth-child(2n) { - // Since this inherits from the mobile layout, we have to explicitly turn - // off the new-row mixin. - @include zen-new-row(none); - @include zen-grid-item(1, 2); - @include zen-apply-gutter-padding(); - } - } - - @include zen-respond-to(xl) { - &__full { - @include zen-grid-item(3, 1); - } - - &__left-content { - @include zen-grid-item(2, 1); - } - - &__right-content { - @include zen-grid-item(2, 2); - } - - &__left-sidebar, - &__first-left-sidebar, - &__second-left-sidebar { - @include zen-new-row(right); - @include zen-grid-item(1, 3, right); - } - - &__right-sidebar { - @include zen-new-row(right); - @include zen-grid-item(1, 1, right); - } - - &__col-1, - &__col-x:nth-child(3n+1) { - @include zen-new-row(both); - @include zen-grid-item(1, 1); - } - - &__col-2, - &__col-x:nth-child(3n+2) { - @include zen-new-row(none); - @include zen-grid-item(1, 2); - } - - &__col-3, - &__col-x:nth-child(3n) { - @include zen-new-row(none); - @include zen-grid-item(1, 3); - } - - &__col-4 { - display: none; - } - } - - // Place last so it can override the padding of grid items. - &__grid-item-container { - @include zen-grid-container($context: grid-item); - } -} diff --git a/STARTERKIT/components/layouts/layout-3col/layout-3col.twig b/STARTERKIT/components/layouts/layout-3col/layout-3col.twig deleted file mode 100644 index 5c90ce7..0000000 --- a/STARTERKIT/components/layouts/layout-3col/layout-3col.twig +++ /dev/null @@ -1,58 +0,0 @@ -
-
- The .layout-3col__full grid item. -
-
- The .layout-3col__left-content grid item. -
-
- The .layout-3col__right-sidebar grid item. -
-
- The .layout-3col__right-content grid item. -
-
- The .layout-3col__left-sidebar grid item. -
-
- The .layout-3col__right-content grid item. -
-
- The .layout-3col__first-left-sidebar grid item. -
-
- The .layout-3col__second-left-sidebar grid item. -
-
- The .layout-3col__col-1 grid item. -
-
- The .layout-3col__col-2 grid item. -
-
- The .layout-3col__col-3 grid item. Don't forget to look for the .layout-3col__col-4 grid item at tablet sizes. -
-
- The .layout-3col__col-4 grid item. -
-
-
- The first .layout-3col__col-x grid item in this nested grid. -
-
- The second .layout-3col__col-x grid item in this nested grid. -
-
- The third .layout-3col__col-x grid item in this nested grid. -
-
- The fourth .layout-3col__col-x grid item in this nested grid. -
-
- The fifth .layout-3col__col-x grid item in this nested grid. -
-
- The sixth .layout-3col__col-x grid item in this nested grid. -
-
-
diff --git a/STARTERKIT/components/layouts/layout-center/_layout-center.scss b/STARTERKIT/components/layouts/layout-center/_layout-center.scss deleted file mode 100644 index 846a321..0000000 --- a/STARTERKIT/components/layouts/layout-center/_layout-center.scss +++ /dev/null @@ -1,64 +0,0 @@ -// Dependencies. -// Allow layout-center's margin/padding to override layout-3col. -@import 'layouts/layout-3col/layout-3col'; - -// Layout Center -// -// All other layouts should be nested inside this centered layout to ensure that -// content does not get too wide on very large screens. -// -// Applying a `.layout-*` class to the same HTML element as `.layout-center` -// would cause that element's grid to mis-align with the rest of the grid on the -// page, but this component will automatically detect the other `.layout-*` -// class and automatically use the `.layout-center--shared-grid` variant -// instead. -// -// .layout-center--shared-grid - If `.layout-center` is applied to the same div -// as another .layout-* class, then this variant should be used to prevent the -// shared layout's grid from mis-aligning. Note: Each time a new .layout-* -// component is created, this component will need to be modified. -// -// Markup: layout-center.twig -// -// Weight: -1 -// -// Style guide: layouts.layout-center - -.layout-center, -%layout-center { - @include zen-apply-gutter-padding(); - margin: 0 auto; - - // We wrap the max-width declaration with zen-layout() so we can see the value - // of $zen-gutters when it is at the larger "xl"-sized media query. - @include zen-layout(xl) { - // The max content width is 1140px (the container width minus the gutters.) - max-width: 1140px + $zen-gutters; - } - - @include zen-respond-to(m) { - // Since we are using zen-respond-to(), the values in $zen-layouts will - // override the global value for $zen-gutters. - @include zen-apply-gutter-padding(); - } - - // Since .layout-center has overridden the negative margin on another - // .layout-* container, the grid children will be misaligned due to - // .layout-center's gutter padding. So we remove it. - &--shared-grid { - padding-left: 0; - padding-right: 0; - } -} - -// -// Fugly selectors. -// - -.layout-center { - // Ensure the .layout-center--shared-grid variant is automatically used by - // adding all other .layout-* classes here. - &.layout-3col { - @extend %layout-center--shared-grid; - } -} diff --git a/STARTERKIT/components/layouts/layout-center/layout-center.json b/STARTERKIT/components/layouts/layout-center/layout-center.json deleted file mode 100644 index 52ac132..0000000 --- a/STARTERKIT/components/layouts/layout-center/layout-center.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "content": "This layout-center component has content that is centered on larger screens." -} diff --git a/STARTERKIT/components/layouts/layout-center/layout-center.twig b/STARTERKIT/components/layouts/layout-center/layout-center.twig deleted file mode 100644 index cc71f16..0000000 --- a/STARTERKIT/components/layouts/layout-center/layout-center.twig +++ /dev/null @@ -1,3 +0,0 @@ -
- {{ content }} -
diff --git a/STARTERKIT/components/layouts/layouts.scss b/STARTERKIT/components/layouts/layouts.scss index 05a4f24..323c7e5 100644 --- a/STARTERKIT/components/layouts/layouts.scss +++ b/STARTERKIT/components/layouts/layouts.scss @@ -7,8 +7,18 @@ // // Style guide: layouts -@import 'layout-3col/layout-3col'; -@import 'layout-center/layout-center'; // The layout-swap isn't used in page.html.twig. You may wish to remove it to // improve front-end performance. @import 'layout-swap/layout-swap'; + + +// Gridlex layouts +// +// Add the Gridlex flexbox library http://gridlex.devlint.fr/. +// How it works? +// The concept is simple: +// you need to wrap your .col in a .grid. +// That's all. +// +// Style guide: layouts.gridlex +@import 'gridlex/src/gridlex'; diff --git a/STARTERKIT/components/style-guide/kss-only.scss b/STARTERKIT/components/style-guide/kss-only.scss index 288b653..e31ed13 100644 --- a/STARTERKIT/components/style-guide/kss-only.scss +++ b/STARTERKIT/components/style-guide/kss-only.scss @@ -10,13 +10,3 @@ [id^='kssref-layouts-'] [class^='layout-'][class*='__'] { outline: 1px dotted color('grey'); } - -// Because our grids assume a container has some padding, add the standard -// padding to the example wrapper. -#kssref-layouts-layout-3column .kss-modifier__example { - @include zen-apply-gutter-padding(); - - @include zen-respond-to(m) { - @include zen-apply-gutter-padding(); - } -} diff --git a/STARTERKIT/package.json b/STARTERKIT/package.json index 68a6d55..120404a 100644 --- a/STARTERKIT/package.json +++ b/STARTERKIT/package.json @@ -10,6 +10,7 @@ "chroma-sass": "^1.2.4", "del": "^2.2.0", "eslint": "^2.9.0", + "gridlex": "^2.3.1", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.0", "gulp-cached": "^1.1.0", diff --git a/STARTERKIT/templates/layout/maintenance-page.html.twig b/STARTERKIT/templates/layout/maintenance-page.html.twig index a20cd5d..3ad2ea6 100644 --- a/STARTERKIT/templates/layout/maintenance-page.html.twig +++ b/STARTERKIT/templates/layout/maintenance-page.html.twig @@ -11,75 +11,56 @@ #} {{ attach_library('STARTERKIT/layouts') }} -
- - + -
+
+
{# Decide on layout classes by checking if sidebars have content. #} {% if page.sidebar_first and page.sidebar_second %} - {% set content_class = 'layout-3col__right-content' %} - {% set sidebar_first_class = 'layout-3col__first-left-sidebar' %} - {% set sidebar_second_class = 'layout-3col__second-left-sidebar' %} + {% set content_class = 'col-12_md-4_lg-6' %} + {% set sidebar_first_class = 'col-12_md-4_lg-3' %} + {% set sidebar_second_class = 'col-12_md-4_lg-3' %} {% elseif (page.sidebar_second) %} - {% set content_class = 'layout-3col__left-content' %} + {% set content_class = 'col-12_md-7_lg-9' %} {% set sidebar_first_class = '' %} - {% set sidebar_second_class = 'layout-3col__right-sidebar' %} + {% set sidebar_second_class = 'col-12_md-7_lg-3' %} {% elseif (page.sidebar_first) %} - {% set content_class = 'layout-3col__right-content' %} - {% set sidebar_first_class = 'layout-3col__left-sidebar' %} + {% set content_class = 'col-12_md-7_lg-9' %} + {% set sidebar_first_class = 'col-12_md-5_lg-3' %} {% set sidebar_second_class = '' %} {% else %} - {% set content_class = 'layout-3col__full' %} + {% set content_class = 'col-12' %} {% set sidebar_first_class = '' %} {% set sidebar_second_class = '' %} {% endif %} - {% if page.primary_menu %} -
- {{ page.primary_menu }} -
+ {% if page.sidebar_first %} + {% endif %}
- {{ page.highlighted }} + {{ page.breadcrumb }} {# link target is in html.html.twig #} - {% if title %} -

{{ title }}

- {% endif %} + {{ page.title }} + {{ page.help }} {{ page.content }} -
- {% if page.sidebar_first %} - - {% endif %} - {% if page.sidebar_second %}
+
- {{ page.footer }} - -
{# /.layout-center #} - +{{ page.footer }} {{ page.bottom }} diff --git a/STARTERKIT/templates/layout/page.html.twig b/STARTERKIT/templates/layout/page.html.twig index dd4551f..aa92188 100644 --- a/STARTERKIT/templates/layout/page.html.twig +++ b/STARTERKIT/templates/layout/page.html.twig @@ -46,55 +46,60 @@ #} {{ attach_library('STARTERKIT/layouts') }} -
+ - +
+ {{ page.primary_menu }} +
-
+
+
{# Decide on layout classes by checking if sidebars have content. #} {% if page.sidebar_first and page.sidebar_second %} - {% set content_class = 'layout-3col__right-content' %} - {% set sidebar_first_class = 'layout-3col__first-left-sidebar' %} - {% set sidebar_second_class = 'layout-3col__second-left-sidebar' %} + {% set content_class = 'col-12_md-4_lg-6' %} + {% set sidebar_first_class = 'col-12_md-4_lg-3' %} + {% set sidebar_second_class = 'col-12_md-4_lg-3' %} {% elseif (page.sidebar_second) %} - {% set content_class = 'layout-3col__left-content' %} + {% set content_class = 'col-12_md-7_lg-9' %} {% set sidebar_first_class = '' %} - {% set sidebar_second_class = 'layout-3col__right-sidebar' %} + {% set sidebar_second_class = 'col-12_md-7_lg-3' %} {% elseif (page.sidebar_first) %} - {% set content_class = 'layout-3col__right-content' %} - {% set sidebar_first_class = 'layout-3col__left-sidebar' %} + {% set content_class = 'col-12_md-7_lg-9' %} + {% set sidebar_first_class = 'col-12_md-5_lg-3' %} {% set sidebar_second_class = '' %} {% else %} - {% set content_class = 'layout-3col__full' %} + {% set content_class = 'col-12' %} {% set sidebar_first_class = '' %} {% set sidebar_second_class = '' %} {% endif %} -
- {{ page.primary_menu }} -
+ {% if page.sidebar_first %} + + {% endif %}
- {{ page.highlighted }} {{ page.breadcrumb }} {# link target is in html.html.twig #} {{ page.title }} {{ page.help }} {{ page.content }} -
- {% if page.sidebar_first %} - - {% endif %} - {% if page.sidebar_second %}
+
- {{ page.footer }} - -
{# /.layout-center #} - +{{ page.footer }} {{ page.bottom }}