Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify the grid mixins #1090

Merged
merged 4 commits into from
Dec 13, 2018
Merged

Simplify the grid mixins #1090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
736760f
Move grid widths to settings and make public
36degrees Dec 12, 2018
e8f7aaa
Rename grid-width function to govuk-grid-width
36degrees Dec 12, 2018
dabcebb
Deprecate govuk-grid-row mixin
36degrees Dec 12, 2018
4568e88
Deprecate govuk-grid-column generating class names
36degrees Dec 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 43 additions & 35 deletions src/helpers/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,29 @@
/// @group helpers
////

/// Map of grid column widths
///
/// @type Map
/// @access private

$_govuk-grid-widths: (
one-quarter: 25%,
one-third: 33.3333%,
one-half: 50%,
two-thirds: 66.6666%,
three-quarters: 75%,
full: 100%
) !default;

/// Grid width percentage
///
/// @param {String} $key - Name of grid width (e.g. two-thirds)
/// @return {Number} Percentage width
/// @throw if `$key` is not a valid grid width
/// @access public

@function grid-width($key) {
@if map-has-key($_govuk-grid-widths, $key) {
@return map-get($_govuk-grid-widths, $key);
@function govuk-grid-width($key) {
@if map-has-key($govuk-grid-widths, $key) {
@return map-get($govuk-grid-widths, $key);
}

@error "Unknown grid width `#{$key}`";
}

/// Grid width percentage (alias)
///
/// @alias govuk-grid-width
/// @deprecated To be removed in v3.0, replaced by govuk-grid-width
@function grid-width($key) {
@return govuk-grid-width($key);
}

/// Generate grid row styles
///
/// Creates a grid row class with a standardised margin.
Expand All @@ -44,6 +38,7 @@ $_govuk-grid-widths: (
/// @include govuk-grid-row("app-grid");
///
/// @access public
/// @deprecated To be removed in v3.0, replaced by the govuk-grid-row class

@mixin govuk-grid-row($class: "govuk-grid-row") {
.#{$class} {
Expand All @@ -55,44 +50,57 @@ $_govuk-grid-widths: (

/// Generate grid column styles
///
/// Creates a cross browser grid column with a class of '.govuk-grid-column' by
/// default, and a standardised gutter between the columns.
/// Creates a grid column with standard gutter between the columns.
///
/// Common widths are predefined above as keywords in the `$grid-widths` map.
/// If a `$class` is provided (which is the default, but deprecated behaviour),
/// the generated rules will be wrapped in a predefined selector in the format
/// `$class-$width` (e.g. `govuk-grid-column-full`). This behaviour is
/// deprecated and will be removed in v3.0
///
/// By default their width changes from 100% to specified width at the 'tablet'
/// breakpoint, but that can be configured to be any other breakpoint by using
/// the `$at` parameter.
/// Grid widths are defined in the `$govuk-grid-widths` map.
///
/// @param {String} $class [govuk-grid-column] CSS class name
/// @param {String} $width [full] one-quarter | one-third | one-half | two-third | three-quarters | full
/// By default the column width changes from 100% to specified width at the
/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
/// parameter.
///
/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
/// @param {String} $float [left] left | right
/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint in px or em
/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
/// @param {String} $class [govuk-grid-column] CSS class name (deprecated)
///
/// @example scss - Default
/// @include govuk-grid-column(two-thirds)
///
/// @example scss - Customising the class name
/// @include govuk-grid-column(one-half, $class: "test-column");
/// .govuk-grid-column-two-thirds {
/// @include govuk-grid-column(two-thirds, $class: false)
/// }
///
/// @example scss - Customising the breakpoint where width percentage is applied
/// @include govuk-grid-column(one-half, $at: desktop);
/// .govuk-grid-column-one-half-at-desktop {
/// @include govuk-grid-column(one-half, $at: desktop);
/// }
///
/// @example scss - Customising the float direction
/// @include govuk-grid-column(one-half, $float: right);
/// .govuk-grid-column-one-half-right {
/// @include govuk-grid-column(two-thirds, $float: right, $class: false);
/// }
///
/// @example scss - Customising the class name (deprecated)
/// @include govuk-grid-column(one-half, $class: "test-column");
///
/// @access public

@mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "govuk-grid-column") {

.#{$class}-#{$width} {
@if ($class) {
.#{$class}-#{$width} {
@include govuk-grid-column($width, $float, $at, $class: false);
}
} @else {
box-sizing: border-box;
@if $at != desktop {
width: 100%;
}
padding: 0 $govuk-gutter-half;
@include govuk-media-query($from: $at) {
width: grid-width($width);
width: govuk-grid-width($width);
float: $float;
}
}
Expand Down
103 changes: 68 additions & 35 deletions src/helpers/grid.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ describe('grid system', () => {

@import "tools/exports";
`
describe('grid-width function', () => {
describe('govuk-grid-width function', () => {
it('outputs the specified key value from the map of widths', async () => {
const sass = `
@import "helpers/grid";
${sassImports}

.foo {
content: grid-width(one-quarter);
content: govuk-grid-width(one-quarter);
}`

const results = await sassRender({ data: sass, ...sassConfig })
Expand All @@ -42,9 +42,9 @@ describe('grid system', () => {

it('throws an error that the specified key does not exist in the map of widths', async () => {
const sass = `
@import "helpers/grid";
${sassImports}

$value: grid-width(seven-fifths);
$value: govuk-grid-width(seven-fifths);
`

await expect(sassRender({ data: sass, ...sassConfig }))
Expand Down Expand Up @@ -102,11 +102,13 @@ describe('grid system', () => {
})

describe('@govuk-grid-column mixin', () => {
it('outputs default full width styles for .govuk-grid-column class', async () => {
it('outputs the CSS required for a column in the grid', async () => {
const sass = `
${sassImports}

@include govuk-grid-column();
.govuk-grid-column-full {
@include govuk-grid-column($class: false);
}
`

const results = await sassRender({ data: sass, ...sassConfig })
Expand All @@ -125,11 +127,13 @@ describe('grid system', () => {
float: left; } }`)
})

it('outputs specified width styles for .govuk-grid-column class', async () => {
it('allows different widths to be specified using $width', async () => {
const sass = `
${sassImports}

@include govuk-grid-column(two-thirds);
.govuk-grid-column-two-thirds {
@include govuk-grid-column(two-thirds, $class: false);
}
`
const results = await sassRender({ data: sass, ...sassConfig })

Expand All @@ -148,93 +152,122 @@ describe('grid system', () => {
`)
})

it('outputs specified width styles for the defined class', async () => {
it('allows predefined breakpoints to be specified using $at', async () => {
const sass = `
${sassImports}

@include govuk-grid-column(three-quarters, $class:'large-column');
.govuk-grid-column-one-quarter-at-desktop {
@include govuk-grid-column(one-quarter, $at: desktop, $class: false);
}
`
const results = await sassRender({ data: sass, ...sassConfig })

expect(results.css
.toString()
.trim())
.toBe(outdent`
.large-column-three-quarters {
.govuk-grid-column-one-quarter-at-desktop {
box-sizing: border-box;
width: 100%;
padding: 0 15px; }
@media (min-width: 40.0625em) {
.large-column-three-quarters {
width: 75%;
@media (min-width: 48.0625em) {
.govuk-grid-column-one-quarter-at-desktop {
width: 25%;
float: left; } }
`)
})

it('outputs the correct width styles for the defined breakpoint in media queries map', async () => {
it('allows custom breakpoints to be specified using $at', async () => {
const sass = `
${sassImports}

@include govuk-grid-column(one-quarter, $at: desktop);
.govuk-grid-column-one-quarter-at-500px {
@include govuk-grid-column(one-quarter, $at: 500px, $class: false);
}
`
const results = await sassRender({ data: sass, ...sassConfig })

expect(results.css
.toString()
.trim())
.toBe(outdent`
.govuk-grid-column-one-quarter {
.govuk-grid-column-one-quarter-at-500px {
box-sizing: border-box;
width: 100%;
padding: 0 15px; }
@media (min-width: 48.0625em) {
.govuk-grid-column-one-quarter {
@media (min-width: 31.25em) {
.govuk-grid-column-one-quarter-at-500px {
width: 25%;
float: left; } }
`)
})
it('outputs the correct width styles for the custom defined breakpoint', async () => {

it('allows columns to float right using $float: right', async () => {
const sass = `
${sassImports}

@include govuk-grid-column(one-quarter, $at: 500px);
.govuk-grid-column-one-half-right {
@include govuk-grid-column(one-half, $float: right, $class: false);
}
`
const results = await sassRender({ data: sass, ...sassConfig })

expect(results.css
.toString()
.trim())
.toBe(outdent`
.govuk-grid-column-one-quarter {
.govuk-grid-column-one-half-right {
box-sizing: border-box;
width: 100%;
padding: 0 15px; }
@media (min-width: 31.25em) {
.govuk-grid-column-one-quarter {
width: 25%;
float: left; } }
@media (min-width: 40.0625em) {
.govuk-grid-column-one-half-right {
width: 50%;
float: right; } }
`)
})

it('outputs float:right as specified with the $float argument', async () => {
it('includes the class name by default (deprecated)', async () => {
const sass = `
${sassImports}

@include govuk-grid-column(one-half, $float: right);
@include govuk-grid-column();
`

const results = await sassRender({ data: sass, ...sassConfig })

expect(results.css
.toString()
.trim())
.toBe(outdent`
.govuk-grid-column-full {
box-sizing: border-box;
width: 100%;
padding: 0 15px; }
@media (min-width: 40.0625em) {
.govuk-grid-column-full {
width: 100%;
float: left; } }`)
})

it('allows the class name to be overridden (deprecated)', async () => {
const sass = `
${sassImports}

@include govuk-grid-column(three-quarters, $class:'large-column');
`
const results = await sassRender({ data: sass, ...sassConfig })

expect(results.css
.toString()
.trim())
.toBe(outdent`
.govuk-grid-column-one-half {
.large-column-three-quarters {
box-sizing: border-box;
width: 100%;
padding: 0 15px; }
@media (min-width: 40.0625em) {
.govuk-grid-column-one-half {
width: 50%;
float: right; } }
.large-column-three-quarters {
width: 75%;
float: left; } }
`)
})
})
Expand Down
20 changes: 12 additions & 8 deletions src/objects/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
@include govuk-exports("govuk/objects/grid") {
//most common usage
@include govuk-grid-row;
@include govuk-grid-column(one-quarter);
@include govuk-grid-column(one-third);
@include govuk-grid-column(one-half);
@include govuk-grid-column(two-thirds);
@include govuk-grid-column(three-quarters);
@include govuk-grid-column(full);

.govuk-grid-row {
@include govuk-clearfix;
margin-right: - ($govuk-gutter-half);
margin-left: - ($govuk-gutter-half);
}

@each $width in map-keys($govuk-grid-widths) {
.govuk-grid-column-#{$width} {
@include govuk-grid-column($width, $class: false)
}
}
}
14 changes: 14 additions & 0 deletions src/settings/_measurements.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,20 @@

$govuk-page-width: 960px !default;

/// Map of grid column widths
///
/// @type Map
/// @access public

$govuk-grid-widths: (
one-quarter: 25%,
one-third: 33.3333%,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick question. Is it worth letting the Sass language handle the precision here?

Swapping this out for:

one-third: (100/3) * 1%,

I believe this is possible in a map as according to the docs: "Both the keys and values in maps can be any SassScript object".

I doubt it would have any effect on the rounded result so may just be best left hardcoded.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be worth keeping it simple since it works and doesnt require thinking.

one-half: 50%,
two-thirds: 66.6666%,
three-quarters: 75%,
full: 100%
) !default;

/// Width of gutter between grid columns
///
/// @type Number
Expand Down