From c7c3de67586c5c8d8f3e1ef15a8c641a1f1ec30f Mon Sep 17 00:00:00 2001 From: Gert-Jan Meire Date: Tue, 28 Nov 2017 13:40:31 +0100 Subject: [PATCH 1/2] STIJ-183: POC - footer with CSS Grid and flexbox fallback. --- .sass-lint.yml | 2 +- components/11-base/section/_section.scss | 4 -- components/41-organisms/footer/_footer.scss | 62 +++++++++++---------- components/41-organisms/footer/footer.twig | 28 ++++------ 4 files changed, 45 insertions(+), 51 deletions(-) diff --git a/.sass-lint.yml b/.sass-lint.yml index c0e9e74..6c7188b 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -33,7 +33,7 @@ rules: no-debug: 2 # We use sizes in rem followed by px for these no-duplicate-properties: - - 2 + - 0 - exclude: - padding-left - padding-right diff --git a/components/11-base/section/_section.scss b/components/11-base/section/_section.scss index 89e6774..a131f2f 100644 --- a/components/11-base/section/_section.scss +++ b/components/11-base/section/_section.scss @@ -4,7 +4,3 @@ color: map-get($colors, 'section-text-color'); } } - -*[class*="section--"] { - @include clearfix(); -} diff --git a/components/41-organisms/footer/_footer.scss b/components/41-organisms/footer/_footer.scss index 6ee88cb..fdba664 100644 --- a/components/41-organisms/footer/_footer.scss +++ b/components/41-organisms/footer/_footer.scss @@ -1,47 +1,49 @@ // General footer styling. footer { - padding: 1.5rem 0; + @include tablet { + padding: 1.5rem; + } + + padding: 1.5rem .5rem; p { color: $color-gray; } - - .db-block-partnership { - @include tablet { - margin-top: 6rem; - } - } } -// Footer 2 column layout. -footer[data-columns="2"] { - .footer--column { - @include make-mobile-column(12); - @include make-tablet-column(6); - @include make-desktop-column(6); +// Footer 4 column layout. +footer[data-columns="4"] { + @include tablet { + display: flex; + display: grid; + grid-template-columns: repeat(2, 1fr [footer-column]); + grid-gap: 1rem; + grid-auto-rows: 275px; } -} - -// Footer 3 column layout. -footer[data-columns="3"] { - .footer--column { - @include make-mobile-column(12); - @include make-tablet-column(6); - @include make-desktop-column(4); + @include desktop { + grid-template-columns: repeat(4, 1fr [footer-column]); + grid-auto-rows: 400px; } -} -// Footer 4 column layout. -footer[data-columns="4"] { .footer--column { - @include make-mobile-column(12); - @include make-tablet-column(6); - @include make-desktop-column(3); + @include tablet { + width: 50%; + } + @include desktop { + width: 25%; + } + @supports (display: grid) { + width: auto; + } } - .db-block-partnership { - @include desktop { - margin-top: 12.5rem; + .footer--column:last-child { + align-self: flex-end; + justify-self: flex-end; + + @supports (display: grid) { + align-self: end; + justify-self: end; } } } diff --git a/components/41-organisms/footer/footer.twig b/components/41-organisms/footer/footer.twig index 200a424..ccd4b81 100644 --- a/components/41-organisms/footer/footer.twig +++ b/components/41-organisms/footer/footer.twig @@ -1,19 +1,15 @@ From d25ccbb5b0c4b28bbb9b849286b44b81fec33d8b Mon Sep 17 00:00:00 2001 From: Gert-Jan Meire Date: Wed, 29 Nov 2017 13:59:49 +0100 Subject: [PATCH 2/2] STIJ-183: Fixed sass lint file with an exclude + added molecule specific styling to the right molecule. --- .sass-lint.yml | 3 ++- .../blocks/partnership-block/_partnership-block.scss | 6 +++++- components/41-organisms/footer/_footer.scss | 10 ---------- 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/.sass-lint.yml b/.sass-lint.yml index 6c7188b..b1f0994 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -33,8 +33,9 @@ rules: no-debug: 2 # We use sizes in rem followed by px for these no-duplicate-properties: - - 0 + - 2 - exclude: + - display - padding-left - padding-right - padding-top diff --git a/components/31-molecules/blocks/partnership-block/_partnership-block.scss b/components/31-molecules/blocks/partnership-block/_partnership-block.scss index 99755a1..b7a578b 100644 --- a/components/31-molecules/blocks/partnership-block/_partnership-block.scss +++ b/components/31-molecules/blocks/partnership-block/_partnership-block.scss @@ -1,8 +1,12 @@ .db-block-partnership { + display: flex; + justify-content: flex-end; + align-items: flex-end; + height: 100%; padding-top: 6.25rem; background-image: url('#{$styleguide-dir}/img/svg/stad-gent.svg') ; background-repeat: no-repeat; - background-position: top right; + background-position: bottom 2.5rem right; background-size: 8.75rem; color: $color-gray; text-align: right; diff --git a/components/41-organisms/footer/_footer.scss b/components/41-organisms/footer/_footer.scss index fdba664..b93cf3a 100644 --- a/components/41-organisms/footer/_footer.scss +++ b/components/41-organisms/footer/_footer.scss @@ -36,14 +36,4 @@ footer[data-columns="4"] { width: auto; } } - - .footer--column:last-child { - align-self: flex-end; - justify-self: flex-end; - - @supports (display: grid) { - align-self: end; - justify-self: end; - } - } }