From 6ef84cfb10a815f0a876db3ea26dd7e25e1d1aaf Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 1 Jun 2018 16:53:22 +0100 Subject: [PATCH] Abstract away sass-mq MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The fact that we’re using sass-mq is an implementation detail, so we shouldn’t expose it via our public API. This means wrapping their settings with our own settings, and trying to minimise its footprint throughout the app. --- app/assets/scss/app-ie8.scss | 4 -- app/assets/scss/app.scss | 6 +-- src/helpers/_media-queries.scss | 21 +++++++++- src/helpers/grid.test.js | 22 ++++++---- src/helpers/spacing.test.js | 5 ++- src/helpers/typography.test.js | 5 ++- src/settings/_ie8.scss | 8 ++++ src/settings/_media-queries.scss | 71 ++++++++------------------------ 8 files changed, 68 insertions(+), 74 deletions(-) diff --git a/app/assets/scss/app-ie8.scss b/app/assets/scss/app-ie8.scss index 88a20b34b6..9234d4fa7e 100644 --- a/app/assets/scss/app-ie8.scss +++ b/app/assets/scss/app-ie8.scss @@ -1,6 +1,2 @@ -// If you want to display the currently active breakpoint in the top -// right corner of your site during development, add the breakpoints -// to this list, ordered by width, e.g. (mobile, tablet, desktop). -$mq-show-breakpoints: (desktop); @import "../../../src/all-ie8"; @import "partials/app"; diff --git a/app/assets/scss/app.scss b/app/assets/scss/app.scss index d5b68abf58..2954948360 100644 --- a/app/assets/scss/app.scss +++ b/app/assets/scss/app.scss @@ -1,6 +1,4 @@ -// If you want to display the currently active breakpoint in the top -// right corner of your site during development, add the breakpoints -// to this list, ordered by width, e.g. (mobile, tablet, desktop). -$mq-show-breakpoints: (mobile, tablet, desktop); +$govuk-show-breakpoints: true; + @import "../../../src/all"; @import "partials/app"; diff --git a/src/helpers/_media-queries.scss b/src/helpers/_media-queries.scss index 90bff65ad1..edf7fc4845 100644 --- a/src/helpers/_media-queries.scss +++ b/src/helpers/_media-queries.scss @@ -1,4 +1,23 @@ -// We use sass-mq module for media queries +// Import sass-mq as a helper for media queries + +// Pass our breakpoints and static breakpoint definitions through to sass-mq. +$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ()); +$mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-breakpoint, desktop); + +$mq-show-breakpoints: (); + +@if (variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints) { + $mq-show-breakpoints: map-keys($govuk-breakpoints); +} + +// When building a stylesheet for IE8, set $mq-responsive to false in order to +// 'rasterize' any media queries. + +@if (variable-exists(govuk-is-ie8) and $govuk-is-ie8) { + $mq-responsive: false; +} @else { + $mq-responsive: true; +} // This is a horrible, horrible hack to prevent the 'dev mode' CSS to display // the current breakpoint from being included multiple times. diff --git a/src/helpers/grid.test.js b/src/helpers/grid.test.js index ae111b3bdb..a88ab5e2fc 100644 --- a/src/helpers/grid.test.js +++ b/src/helpers/grid.test.js @@ -14,11 +14,15 @@ const sassConfig = { } describe('grid system', () => { const sassImports = ` - @import "tools/exports"; + @import "settings/ie8"; + @import "settings/media-queries"; @import "settings/spacing"; @import "settings/measurements"; + @import "helpers/grid"; @import "helpers/media-queries"; + + @import "tools/exports"; ` describe('grid-width function', () => { it('outputs the specified key value from the map of widths', async () => { @@ -115,7 +119,7 @@ describe('grid system', () => { box-sizing: border-box; width: 100%; padding: 0 15px; } - @media (min-width: 46.25em) { + @media (min-width: 40.0625em) { .govuk-grid-column-full { width: 100%; float: left; } }`) @@ -137,7 +141,7 @@ describe('grid system', () => { box-sizing: border-box; width: 100%; padding: 0 15px; } - @media (min-width: 46.25em) { + @media (min-width: 40.0625em) { .govuk-grid-column-two-thirds { width: 66.6666%; float: left; } } @@ -148,7 +152,7 @@ describe('grid system', () => { const sass = ` ${sassImports} - @include govuk-grid-column(three-quarters, $class:'large-columnumn'); + @include govuk-grid-column(three-quarters, $class:'large-column'); ` const results = await sassRender({ data: sass, ...sassConfig }) @@ -156,12 +160,12 @@ describe('grid system', () => { .toString() .trim()) .toBe(outdent` - .large-columnumn-three-quarters { + .large-column-three-quarters { box-sizing: border-box; width: 100%; padding: 0 15px; } - @media (min-width: 46.25em) { - .large-columnumn-three-quarters { + @media (min-width: 40.0625em) { + .large-column-three-quarters { width: 75%; float: left; } } `) @@ -182,7 +186,7 @@ describe('grid system', () => { .govuk-grid-column-one-quarter { box-sizing: border-box; padding: 0 15px; } - @media (min-width: 61.25em) { + @media (min-width: 48.0625em) { .govuk-grid-column-one-quarter { width: 25%; float: left; } } @@ -227,7 +231,7 @@ describe('grid system', () => { box-sizing: border-box; width: 100%; padding: 0 15px; } - @media (min-width: 46.25em) { + @media (min-width: 40.0625em) { .govuk-grid-column-one-half { width: 50%; float: right; } } diff --git a/src/helpers/spacing.test.js b/src/helpers/spacing.test.js index 41a941d0c7..95a8e13ead 100644 --- a/src/helpers/spacing.test.js +++ b/src/helpers/spacing.test.js @@ -14,7 +14,10 @@ const sassConfig = { } const sassBootstrap = ` - $mq-breakpoints: ( + @import "settings/media-queries"; + @import "settings/ie8"; + + $govuk-breakpoints: ( my_breakpoint: 30em ); diff --git a/src/helpers/typography.test.js b/src/helpers/typography.test.js index 8fff535fe4..350a6f319d 100644 --- a/src/helpers/typography.test.js +++ b/src/helpers/typography.test.js @@ -14,7 +14,10 @@ const sassConfig = { } const sassBootstrap = ` - $mq-breakpoints: ( + @import "settings/media-queries"; + @import "settings/ie8"; + + $govuk-breakpoints: ( my_breakpoint: 30em ); diff --git a/src/settings/_ie8.scss b/src/settings/_ie8.scss index 6922747707..2098da72e6 100644 --- a/src/settings/_ie8.scss +++ b/src/settings/_ie8.scss @@ -8,3 +8,11 @@ /// @access public $govuk-is-ie8: false !default; + +/// The name of the breakpoint to use as the target when rasterizing media +/// queries +/// +/// @type String +/// @access public + +$govuk-ie8-breakpoint: desktop !default; diff --git a/src/settings/_media-queries.scss b/src/settings/_media-queries.scss index e34384d8a1..20ddca8606 100644 --- a/src/settings/_media-queries.scss +++ b/src/settings/_media-queries.scss @@ -1,60 +1,23 @@ -// Media query helpers using sass-mq -// https://github.com/sass-mq/sass-mq +//// +/// @group settings/media-queries +//// -// mq() takes up to three optional parameters: -// $from: inclusive min-width boundary -// $until: exclusive max-width boundary -// $and: additional custom directives -// $media-type: $mq-media-type // defaults to 'all' +/// Breakpoint definitions +/// +/// @type Map +/// @access public -// Write css mobile-first, overriding mobile styles for tablet and desktop -// -// .govuk-component { -// // Apply styling to mobile and upwards -// @include mq($from: mobile) { -// color: red; -// } -// // Apply styling up to devices smaller than tablets (exclude tablets) -// @include mq($until: tablet) { -// color: blue; -// } -// // Same thing, in landscape orientation -// @include mq($until: tablet, $and: '(orientation: landscape)') { -// color: hotpink; -// } -// // Apply styling to tablets up to desktop (exclude desktop) -// @include mq(tablet, desktop) { -// color: green; -// } -// // Print only styling -// @include mq($media-type: print) { -// display: none; -// } -// } - - -// To enable support for browsers that do not support @media queries, -// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false -// Create a separate stylesheet served exclusively to these browsers, -// meaning @media queries will be rasterized, relying on the cascade itself -@if ($govuk-is-ie8) { - $mq-responsive: false; -} @else { - $mq-responsive: true; -} - -// Name your breakpoints in a way that creates a ubiquitous language -// across team members. It will improve communication between -// stakeholders, designers, developers, and testers. -$mq-breakpoints: ( +$govuk-breakpoints: ( mobile: 320px, - // Support max-width value from FET ? - // mobile: 640px, tablet: 641px, desktop: 769px -); +) !default; + +/// Show active breakpoint in top-right corner. +/// +/// Only use this during local development. +/// +/// @type Boolean +/// @access public -// Define the breakpoint from the $mq-breakpoints list that should -// be used as the target width when outputting a static stylesheet -// (i.e. when $mq-responsive is set to 'false'). -$mq-static-breakpoint: desktop; +$govuk-show-breakpoints: false !default;