Grids #271

sherakama · 2018-11-09T01:19:03Z

READY FOR REVIEW

Summary

Slight re-factoring to our grid systems & an addition of many mixins
A couple dozen layout examples using the css grid based grid system
Started to create clearer separation of what is a css grid and what is a flex grid with new naming conventions
Removed previous page layout examples
Upgraded grunt sass version to the latest
Added new and improved mixins for the flex grid

I went through an excercise in order to test out the Grids that are in our framework and how it is to use them. My exercise was to re-create a bunch of simple to complex layouts that I had previously created using Decanter V1 and neat's grid system. At the start I had all the tools I needed to create a few simple layouts but I was annoyed by how much code I had to write and remember to account for all of the grid breakpoints and scaling margins and gutters. This fustration lead to the creation of many mixins to help expidite and simplify the creation of responsive and flexible grid systems. I cherry picked a few mixins from internet searches as well as some from neat and reverse engineered them back in to our framework. At the end of my exercise I had a huge collection of mixins and some really clean and stripped down semantic templates.

There is still a significant amount of clean up work to be done to refactor some of our components and to ensure cross browser compatibility but this is should be a significant start.

Needed By (Date)

?

Urgency

None

Steps to Test

Will schedule a first pass meeting to go over the changes in detail with you.
In the mean time please check out this branch
Run npm install
Compile the styleguide
Open a browser and navigate to the layouts section to see the new layouts
Start reading some of the code in the layout examples to see the general approach.

Affected Projects or Products

Pretty much everything

It seems like the way the centered column max-width is calculated here is different from what's proposed in Figma. Currently in this branch, for each breakpoint, the max-width of the centered column is a fixed number, eg, for the XL breakpoint, it's the max-width of the breakpoint (1200px) - width of the XL gutter, and the grid layouts behave this way.

In the Figma file, the centered column max-width uses what the designers called "margin" (under Visual Guidelines -> Responsive Notes):
XS = 20px
SM = 30px
MD = 50px
LG = 80px
XL = 100px
XXL = max 1500px (fixed max container width for XXL)
So basically the proposed centered column width is (browser_width - 2*margin) and is fluid. Just want to check in and see if we have decided to use a different system.

I see what you are saying here. This mixin could use a refactor. Yes, this is too "jumpy" and "rigid". I would prefer the more elastic and fluid feel to this.

Cool. Maybe we could talk more about this in the Decanter meeting tomorrow?

core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: josephgknox <[email protected]>

core/scss/utilities/variables/core/_grid.scss

core/templates/layout/flex/four-column/molive/molive.twig

Co-Authored-By: sherakama <[email protected]>

josephgknox · 2019-01-15T22:21:27Z

npm*; updating to the latest and pushing up (testing with Brian Young).

Co-Authored-By: sherakama <[email protected]>

yvonnetangsu · 2019-01-16T18:46:35Z

core/scss/core/flex-grid/_flex-grid.scss

+  &--row-gap {
+    > * {
+      @include grid-media('2xl') {
+        @include margin(0 0 map-get($modular-spacing, '2xl') 0);


Looks like we either need to update the variable file for modular-spacing, or change $modular-spacing to $grid-gutters.

* master: Grids (#271) minor fixes to some of the comments in SCSS files. (#278) # Conflicts: # core/css/decanter.css # core/scss/core/index.scss

sherakama and others added 30 commits October 31, 2018 12:17

Start of the new homepage.

aa63577

Start of the new homepage.

aa88353

fixup! wip.

aeb3122

fixup! wip.

9f21173

Merge branch 'master' into 246-homepage

ce7f21a

fixup! wip.

54e91c8

fixup! wip.

2b13b59

It is not pretty but it is something.

44d933a

Merge branch '246-homepage' into 202-sticky

4116532

Merge branch 'master' of github.com:SU-SWS/decanter into 246-homepage

fd5510a

fixup! wip.

4ca3a38

fixup! wip.

2bb7cfe

Sticky footer mixin.

51b1b9e

Merge branch '246-homepage' of github.com:SU-SWS/decanter into 202-st…

56ee82b

…icky

Sticky footer mixin.

dd4c3c7

Update core/scss/utilities/mixins/layout/_sticky-footer.scss

7702e1f

Co-Authored-By: sherakama <[email protected]>

Update core/scss/utilities/mixins/layout/_sticky-footer.scss

d9296af

Co-Authored-By: sherakama <[email protected]>

Update core/scss/utilities/mixins/layout/_sticky-footer.scss

c8576e4

Co-Authored-By: sherakama <[email protected]>

New grid stuff.

8c63bf7

Sort of refactored.

b5ccbb8

Layout - Bricks

0b97f4b

Layout - Basic

20c3e0b

Layout - Battleship.

6879fcc

Layout - Blastila.

5f5afac

Layout - Frogger.

2dc79b0

Layout - Pacman.

3433c3c

Layout - Plakes.

aa4066e

Layout - Wedge.

40dbd8d

Remove three-column layout from Richard.

68ec671

Merged with master.

d094dbf

sherakama mentioned this pull request Dec 19, 2018

Create page layouts for both CSS Grid and Flexbox #276

Closed

sherakama added 5 commits December 19, 2018 11:23

Flex grid vertical rows to bottom only.

d44e3f3

Flex grid vertical rows molive and blastila.

d9ac5e3

Added some documentation to layouts section.

657539b

Code climate fixes.

252b801

Change URL on developer resources main nav item to go to wiki page.

586ee5c

yvonnetangsu reviewed Jan 15, 2019

View reviewed changes

yvonnetangsu requested changes Jan 15, 2019

View reviewed changes

yvonnetangsu and others added 6 commits January 15, 2019 11:22

Update core/scss/utilities/variables/core/_gutter.scss

45a3e33

Co-Authored-By: josephgknox <[email protected]>

Update core/scss/utilities/variables/core/_gutter.scss

08d580d

Co-Authored-By: josephgknox <[email protected]>

Update core/scss/utilities/variables/core/_gutter.scss

2f5f192

Co-Authored-By: josephgknox <[email protected]>

Update core/scss/utilities/variables/core/_gutter.scss

434c381

Co-Authored-By: josephgknox <[email protected]>

Update core/scss/utilities/variables/core/_gutter.scss

61d16ea

Co-Authored-By: josephgknox <[email protected]>

Update core/scss/utilities/variables/core/_gutter.scss

4ad86a0

Co-Authored-By: josephgknox <[email protected]>

yvonnetangsu requested changes Jan 15, 2019

View reviewed changes

core/scss/utilities/variables/core/_grid.scss Outdated Show resolved Hide resolved

core/templates/layout/flex/four-column/molive/molive.twig Outdated Show resolved Hide resolved

yvonnetangsu and others added 6 commits January 15, 2019 14:02

Update core/scss/utilities/variables/core/_gutter.scss

f1d32f8

Co-Authored-By: sherakama <[email protected]>

Update core/scss/utilities/variables/core/_gutter.scss

10ffd03

Co-Authored-By: sherakama <[email protected]>

Update core/scss/utilities/variables/core/_gutter.scss

370671d

Co-Authored-By: sherakama <[email protected]>

Update core/scss/utilities/variables/core/_gutter.scss

88a8309

Co-Authored-By: sherakama <[email protected]>

Update core/templates/layout/flex/four-column/molive/molive.twig

17cf81c

Co-Authored-By: sherakama <[email protected]>

nom install

19c1b70

Update core/scss/utilities/variables/core/_grid.scss

7e54dbf

Co-Authored-By: sherakama <[email protected]>

This was referenced Jan 16, 2019

Tweaks to existing Break Points; adding a 2XL break point #234

Closed

Refactor grid breakpoints to use mixin and variable settings in order to "generate" new breakpoints with the appropriate classes. #141

Closed

yvonnetangsu reviewed Jan 16, 2019

View reviewed changes

Merge with master.

af74538

sherakama merged commit 5111eaa into master Jan 16, 2019

sherakama deleted the grids branch January 16, 2019 21:20

yvonnetangsu added a commit that referenced this pull request Jan 16, 2019

Merge branch 'master' into 72-main-nav

58603a0

* master: Grids (#271) minor fixes to some of the comments in SCSS files. (#278) # Conflicts: # core/css/decanter.css # core/scss/core/index.scss

+              //
+              // Styleguide: Variables.Core.Gutters.gutter-xs
+              //
+              $gutter-xs: 32px !default;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Grids #271

Grids #271

sherakama commented Nov 9, 2018 •

edited

Loading

yvonnetangsu Jan 15, 2019

josephgknox Jan 15, 2019

yvonnetangsu Jan 15, 2019

josephgknox Jan 15, 2019

yvonnetangsu Jan 15, 2019

josephgknox Jan 15, 2019

sherakama Jan 15, 2019

yvonnetangsu Jan 15, 2019

yvonnetangsu Jan 15, 2019 •

edited

Loading

sherakama Jan 15, 2019

yvonnetangsu Jan 15, 2019

josephgknox commented Jan 15, 2019

yvonnetangsu Jan 16, 2019 •

edited

Loading

+                  $gutter: map-get($gutters, $code);
+                  @media #{$breakpoint} {
+                    max-width: $max-width - $gutter;

Grids #271

Grids #271

Conversation

sherakama commented Nov 9, 2018 • edited Loading

READY FOR REVIEW

Summary

Needed By (Date)

Urgency

Steps to Test

Affected Projects or Products

See Also

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

yvonnetangsu Jan 15, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josephgknox commented Jan 15, 2019

yvonnetangsu Jan 16, 2019 • edited Loading

Choose a reason for hiding this comment

sherakama commented Nov 9, 2018 •

edited

Loading

yvonnetangsu Jan 15, 2019 •

edited

Loading

yvonnetangsu Jan 16, 2019 •

edited

Loading