Simplify grid syntax #665

kr8n3r · 2018-04-19T08:00:50Z

Simplify grid classes based on user feedback

Propose new class names:

.govuk-grid-row
.govuk-grid-column-   one-quarter, one-third, one-half, three-quarters, three-thirds, full

created a map of common widths that is used to generate classes
classes are using words, not numbers
parameter $at describes when the fraction percentage kicks in

Default usage:

// row
@include govuk-grid-row;
// row with a custom class
@include govuk-grid-row("app-row);

// columns
@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); or  @include govuk-grid-column();

Define when percentage kicks in:

@include govuk-grid-column(three-quarters, $at: desktop)

Specify a custom class:

@include govuk-grid-column(one-quarter, $class: "app-grid");

Updated example grid page:
https://govuk-frontend-review-pr-665.herokuapp.com/examples/grid

Note: the column mixin is similar to the Frontend toolkit one
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_grid_layout.scss#L93

Update all references in the review app

Trello ticket: https://trello.com/c/jjWZkDe0/865-5-simplify-the-grid-syntax

dashouse · 2018-04-19T08:21:13Z

Related - If we go with this we should update govuk-!-width-one-third override classes to govuk-!-width-1/3 etc too

alex-ju

I like the approach. It feels simpler to me and provides a powerful mixin that others can use in their service if they need a more complex grid.

hannalaakso

I like this approach too 🎉👍 Good that users can now define more grid classes if needed. Naming wise, maybe .govuk-grid-col-1-4 (dash instead of slash), it's easier to remember and same as Bootstrap, slash is unusual.

hannalaakso · 2018-04-19T14:37:20Z

src/globals/objects/_grid.scss

+// columns. Widths should be defined as fractions of the full desktop width
+// they want to fill. By default they break to become full width at tablet size
+// but that can be configured to be desktop using the `$full-width` argument.
+//


Hmmm I think $full-width sounds like 100% width which could be confusing as that's what the mobile column is. Maybe $fraction-width, $unit-width... I don't know, naming is hard.

went with $full-width as its the same param as in toolkit. maybe advanced users will be familiar with it.
it's more like "take proportional width at this breakpoint".
$full-width-from ?

Hmmm so the column is not "full width" from that point on. On mobile/tablet the column is full width (or 100% width). At this breakpoint the column width becomes a fraction/unit. So the name of the variable should be the opposite of "full-width" but I don't know what. $fraction-width-from, $unit-width-from?

I might not be explaining this very well 😅

$breakpoint?

Or $break-from? I'm okay with either, we'll learn more in user research.

hannalaakso · 2018-04-19T14:37:50Z

src/globals/objects/_grid.scss

-@include govuk-exports("grid") {
+// A mixin for a grid column
+// Creates a cross browser grid column with a standardised gutter between the
+// columns. Widths should be defined as fractions of the full desktop width


Suggestion: "units" instead of "fractions"

i like units

NickColley · 2018-04-23T14:22:06Z

app/views/examples/grid/index.njk

@@ -11,73 +11,97 @@

 <main id="content" role="main" class="govuk-main-wrapper">
  <h1 class="govuk-heading-l">Example: Grid layout</h1>
-  <div class="govuk-grid">
-    <div class="govuk-grid__item govuk-grid__item--two-thirds">
+  <div class="govuk-layout-row">


This is all opinionated but are we sure about layout? could this instead be grid? 😁

I tend to agree, I think govuk-grid-row / govuk-grid-column would be more expected

dashouse · 2018-04-23T14:42:30Z

app/views/examples/grid/index.njk

+        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
+      </p>
+    </div>
+    <div class="govuk-layout-col-two-thirds on-desktop-three-quarters">


I love the functionality of on-desktop-three-quarters but I'm worried it doesn't feel like it's part of the grid syntax.

Did we discuss anything like:
govuk-grid-col-two-thirds d:govuk-grid-col-three-quarters

on-desktop-three-quarters was an example class name. i could have just used
@include govuk-layout-col(three-quarters, $at: desktop, $class: "govuk-grid-col-desktop");

NickColley · 2018-04-23T14:52:18Z

src/globals/objects/_grid.scss

+  @include govuk-layout-col(full);
+
+  // custom 100,66,75%
+  @include govuk-layout-col(three-quarters, $at: desktop, $class: "on-desktop");


Should we have custom examples as part of the core library? It seems good to demonstrate but we shouldn't include them unless we know they'll be used?

no for demo only. still WIP :)

NickColley

This is looking good to me, and the mixins may make it easier for downstream projects to make custom grids in a supported way.

Nice work 👍

joelanman · 2018-04-24T09:48:19Z

This looks great, very readable/predictable.

There was some concern earlier that this was moving away from BEM, is that still the case?

kr8n3r · 2018-04-24T10:08:17Z

it's now kinda BEM, just two block elements

joelanman · 2018-04-24T10:10:46Z

From a quick discussion with @igloosi it seems like govuk-grid-row isn't quite what I'd expect.

In our example page, it doesn't wrap each row, it wraps the whole grid.

Is it at all useful to wrap each row? If not maybe the previous name was actually better - just govuk-grid

kr8n3r · 2018-04-24T10:17:43Z

i guess if you have wildly differing content length in columns you might want to wrap in multiple rows

joelanman · 2018-04-24T10:19:07Z

ok cool, so our guidance and examples would be to wrap each row with .govuk-grid-row? I think that would be fine

kr8n3r · 2018-04-24T10:30:16Z

updated the example page

dashouse · 2018-04-24T10:46:21Z

@joelanman @igloosi I think the choice whether to use grid containers as individual rows or as a wrapper for all grid items is dependent on content to some degree...

For example I've used two rows here https://govuk-design-system-production.cloudapps.digital/styles/layout/common-two-thirds-two-thirds-one-third/index.html

But equally if you just fill 2/3 1/3 1/4 3/4 it wouldn't technically need a new row as they would wrap.

It gets a little more complex when you actually want it to wrap because your grid changes from 4 > 3 > 2 so it doesn't leave widowed columns

joelanman · 2018-04-24T10:53:12Z

I think even if it would work in some situations if you didn't wrap every row, its an easier thing to get your head around if we always do?

dashouse · 2018-04-24T10:55:50Z

Sure, so this would be just updating the example in the review app rather than anything else?

joelanman · 2018-04-24T11:05:50Z

Seems so, I just checked the Design System layout page and it seems like we already wrap every row there.

kr8n3r · 2018-04-24T13:41:26Z

and i have updated the review app grid example page as well

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 19, 2018 08:01 Inactive

kr8n3r force-pushed the simplify-grid branch from c8ee099 to f895a81 Compare April 19, 2018 08:03

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 19, 2018 08:03 Inactive

kr8n3r force-pushed the simplify-grid branch from f895a81 to 8f2b9e5 Compare April 19, 2018 08:09

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 19, 2018 08:09 Inactive

alex-ju reviewed Apr 19, 2018

View reviewed changes

hannalaakso reviewed Apr 19, 2018

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 20, 2018 08:35 Inactive

kr8n3r force-pushed the simplify-grid branch from 2af8a84 to 03cc3c9 Compare April 20, 2018 09:05

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 20, 2018 09:05 Inactive

kr8n3r force-pushed the simplify-grid branch from 03cc3c9 to fe76bed Compare April 20, 2018 09:22

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 20, 2018 09:22 Inactive

kr8n3r force-pushed the simplify-grid branch from fe76bed to 4e18e88 Compare April 20, 2018 09:30

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 20, 2018 09:30 Inactive

kr8n3r force-pushed the simplify-grid branch from 4e18e88 to 897481d Compare April 20, 2018 12:17

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 20, 2018 12:17 Inactive

kr8n3r force-pushed the simplify-grid branch from 897481d to d15b079 Compare April 20, 2018 12:39

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 20, 2018 12:39 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 23, 2018 08:40 Inactive

kr8n3r force-pushed the simplify-grid branch from 5f9c73d to 880b05b Compare April 23, 2018 10:11

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 23, 2018 10:12 Inactive

NickColley reviewed Apr 23, 2018

View reviewed changes

dashouse reviewed Apr 23, 2018

View reviewed changes

NickColley reviewed Apr 23, 2018

View reviewed changes

kr8n3r force-pushed the simplify-grid branch from 880b05b to a1f8d0e Compare April 23, 2018 15:41

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 23, 2018 15:41 Inactive

kr8n3r force-pushed the simplify-grid branch from a1f8d0e to bc2551f Compare April 23, 2018 15:52

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 23, 2018 15:53 Inactive

kr8n3r force-pushed the simplify-grid branch from bc2551f to db1da25 Compare April 23, 2018 15:57

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 23, 2018 15:57 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 23, 2018 19:37 Inactive

kr8n3r changed the title ~~WIP: Simplify grid~~ Simplify grid syntax Apr 23, 2018

kr8n3r force-pushed the simplify-grid branch from 3d89992 to c41b80b Compare April 23, 2018 19:51

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 23, 2018 19:51 Inactive

Jani Kraner added 3 commits April 24, 2018 08:57

Update grid example

b7cf5a9

Change grid classes and create mixins

361067c

Add tests for grid functions and mixins

9c25f33

kr8n3r force-pushed the simplify-grid branch from c41b80b to e2978d8 Compare April 24, 2018 08:02

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-665 April 24, 2018 08:02 Inactive

NickColley approved these changes Apr 24, 2018

View reviewed changes

igloosi added 2 commits April 24, 2018 11:29

Update grid classes in the preview app

b3292ba

Document in CHANGELOG

aa820ae

kr8n3r force-pushed the simplify-grid branch from e2978d8 to aa820ae Compare April 24, 2018 10:29

govuk-design-system-ci deployed to govuk-frontend-review-pr-665 April 24, 2018 10:29 View deployment

kr8n3r merged commit e4e483e into master Apr 25, 2018

kr8n3r deleted the simplify-grid branch April 25, 2018 07:55

kr8n3r mentioned this pull request May 18, 2018

Release v0.0.29-alpha #700

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simplify grid syntax #665

Simplify grid syntax #665

kr8n3r commented Apr 19, 2018 •

edited by alex-ju

Loading

dashouse commented Apr 19, 2018

alex-ju left a comment

hannalaakso left a comment •

edited

Loading

hannalaakso Apr 19, 2018

kr8n3r Apr 19, 2018

hannalaakso Apr 19, 2018

kr8n3r Apr 19, 2018

hannalaakso Apr 19, 2018

hannalaakso Apr 19, 2018

kr8n3r Apr 19, 2018

NickColley Apr 23, 2018

dashouse Apr 23, 2018

dashouse Apr 23, 2018

kr8n3r Apr 23, 2018

NickColley Apr 23, 2018

kr8n3r Apr 23, 2018

NickColley left a comment

joelanman commented Apr 24, 2018

kr8n3r commented Apr 24, 2018 •

edited

Loading

joelanman commented Apr 24, 2018

kr8n3r commented Apr 24, 2018

joelanman commented Apr 24, 2018

kr8n3r commented Apr 24, 2018

dashouse commented Apr 24, 2018

joelanman commented Apr 24, 2018

dashouse commented Apr 24, 2018

joelanman commented Apr 24, 2018

kr8n3r commented Apr 24, 2018

Simplify grid syntax #665

Simplify grid syntax #665

Conversation

kr8n3r commented Apr 19, 2018 • edited by alex-ju Loading

dashouse commented Apr 19, 2018

alex-ju left a comment

Choose a reason for hiding this comment

hannalaakso left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley left a comment

Choose a reason for hiding this comment

joelanman commented Apr 24, 2018

kr8n3r commented Apr 24, 2018 • edited Loading

joelanman commented Apr 24, 2018

kr8n3r commented Apr 24, 2018

joelanman commented Apr 24, 2018

kr8n3r commented Apr 24, 2018

dashouse commented Apr 24, 2018

joelanman commented Apr 24, 2018

dashouse commented Apr 24, 2018

joelanman commented Apr 24, 2018

kr8n3r commented Apr 24, 2018

kr8n3r commented Apr 19, 2018 •

edited by alex-ju

Loading

hannalaakso left a comment •

edited

Loading

kr8n3r commented Apr 24, 2018 •

edited

Loading