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

Jump to bottom

Add basic flexbox implementation of grid for IE #2943

Merged
merged 6 commits into from Mar 25, 2020
Merged

Add basic flexbox implementation of grid for IE #2943

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8418650
Add basic flexbox implementation of grid for IE
bartaz Mar 23, 2020
de92576
Fix Vanilla docs layout in IE with flex grid
bartaz Mar 23, 2020
f8454c8
Fix wrapping rows in docs
bartaz Mar 24, 2020
9ed5b05
Fix flex grid fallback for IE in stepped list component
bartaz Mar 23, 2020
908ddce
Remove unnecessary wrapping in IE fallback
bartaz Mar 24, 2020
78dce79
Fix column sizing in IE
bartaz Mar 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
75 changes: 49 additions & 26 deletions scss/_base_grid-definitions.scss
View file
Open in desktop
Expand Up @@ -17,45 +17,53 @@
%vf-row {
@extend %fixed-width-container;

display: grid;
grid-template-rows: auto;
margin-left: auto;
margin-right: auto;
max-width: $grid-max-width;

[class*='#{$grid-column-prefix}'] {
grid-column-start: auto;
// default to flexbox for IE on large screens
// on small screens we let columns render one under another
@media (min-width: $threshold-6-12-col) {
display: flex;
}

& & {
@include vf-b-row-reset;
}

// set static gutter width per breakpoint
@media (max-width: $threshold-4-6-col) {
grid-gap: 0 map-get($grid-gutter-widths, small);
grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr));
@supports (display: grid) {
display: grid;
grid-template-rows: auto;
margin-left: auto;
margin-right: auto;
max-width: $grid-max-width;

& > * {
grid-column-end: span $grid-columns-small;
[class*='#{$grid-column-prefix}'] {
grid-column-start: auto;
}
}

@media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
grid-gap: 0 map-get($grid-gutter-widths, medium);
grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));
// set static gutter width per breakpoint
@media (max-width: $threshold-4-6-col) {
grid-gap: 0 map-get($grid-gutter-widths, small);
grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr));

& > * {
grid-column-end: span $grid-columns-medium;
& > * {
grid-column-end: span $grid-columns-small;
}
}
}

@media (min-width: $threshold-6-12-col) {
grid-gap: 0 map-get($grid-gutter-widths, large);
grid-template-columns: repeat($grid-columns, minmax(0, 1fr));
@media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
grid-gap: 0 map-get($grid-gutter-widths, medium);
grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));

& > * {
grid-column-end: span $grid-columns;
& > * {
grid-column-end: span $grid-columns-medium;
}
}

@media (min-width: $threshold-6-12-col) {
grid-gap: 0 map-get($grid-gutter-widths, large);
grid-template-columns: repeat($grid-columns, minmax(0, 1fr));

& > * {
grid-column-end: span $grid-columns;
}
}
}
}
Expand All @@ -78,3 +86,18 @@
}
}
}

// flexbox approximation of grid column styles for IE
// this needs to be a @mixin rather than %placeholder because it's ised inside @media queries
bartaz marked this conversation as resolved.
Show resolved Hide resolved
@mixin vf-grid-flex-column {
flex-basis: 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

why not shorthand flex: 1 1 0;?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't like to guess what number does what ;)

Copy link
Contributor

Choose a reason for hiding this comment

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

fair :)

flex-grow: 1;
flex-shrink: 1;

// set static gutter width
margin-left: map-get($grid-gutter-widths, large);

&:first-child {
margin-left: 0;
}
}
50 changes: 26 additions & 24 deletions scss/_patterns_grid.scss
View file
Open in desktop
Expand Up @@ -8,6 +8,24 @@
}
}

// CSS grid implementation of columns for all screens sizes
@mixin vf-grid-column($col) {
@supports (display: grid) {
grid-column-end: span #{$col};

// reset flex box fallback styles
margin-left: 0;
width: auto;

//nesting
@if $col > 1 {
& .row {
grid-template-columns: repeat($col, minmax(0, 1fr));
}
}
}
}

@mixin vf-p-grid {
%span-full-grid-on-mobile {
@media (max-width: $threshold-4-6-col) {
Expand Down Expand Up @@ -45,14 +63,8 @@
@media (max-width: $threshold-4-6-col) {
@for $i from $grid-columns-small through 1 {
.#{$grid-small-col-prefix}#{$i} {
grid-column-end: span #{$i};

//nesting
@if $i > 1 {
& .row {
grid-template-columns: repeat($i, minmax(0, 1fr));
}
}
@include vf-grid-column($i);
width: 100%;
}
}
}
Expand All @@ -61,14 +73,8 @@
@media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
@for $i from $grid-columns-medium through 1 {
.#{$grid-medium-col-prefix}#{$i} {
grid-column-end: span #{$i};

//nesting
@if $i > 1 {
& .row {
grid-template-columns: repeat($i, minmax(0, 1fr));
}
}
@include vf-grid-column($i);
width: 100%;
}
}
}
Expand All @@ -78,14 +84,10 @@
@for $i from $grid-columns through 1 {
// set col-* to span respective number of columns on desktop
.#{$grid-large-col-prefix}#{$i} {
grid-column-end: span #{$i};

//nesting
@if $i > 1 {
& .row {
grid-template-columns: repeat($i, minmax(0, 1fr));
}
}
// on large screens provide flex box column implementation for IE
// on smaller screens let them display full width one under another
@include vf-grid-flex-column;
@include vf-grid-column($i);
}
}
}
Expand Down
26 changes: 18 additions & 8 deletions scss/_patterns_lists.scss
View file
Open in desktop
Expand Up @@ -206,17 +206,27 @@ $spv-list-item--inner: null;

margin-left: auto;

.p-stepped-list__content {
@media (min-width: $threshold-6-12-col) {
grid-column-end: span 6;
margin-top: 0;
// fallback for IE flex box grid implementation
@media (min-width: $threshold-6-12-col) {
.p-stepped-list__content,
.p-stepped-list__title {
@include vf-grid-flex-column;
}
}

.p-stepped-list__title {
display: flex;
grid-column-end: span 6;
margin-left: 0;
@supports (display: grid) {
.p-stepped-list__content {
@media (min-width: $threshold-6-12-col) {
grid-column-end: span 6;
margin-top: 0;
}
}

.p-stepped-list__title {
display: flex;
grid-column-end: span 6;
margin-left: 0;
}
}

.p-stepped-list__item {
Expand Down
11 changes: 9 additions & 2 deletions scss/docs/docs.scss
View file
Open in desktop
Expand Up @@ -29,7 +29,6 @@ hr {
/* Flex layout */
.docs-container {
display: flex;
flex-wrap: wrap;
}

.p-sidebar {
Expand Down Expand Up @@ -62,9 +61,17 @@ hr {
margin-top: 0;

&__row {
@extend .row; // sass-lint:disable-line placeholder-in-extend
@extend %fixed-width-container;
// FIXME: for some reason this makes the content behave as expected
// we should revisit it when working on docs layouts
display: grid;

margin-left: inherit;
padding: $content-padding;

.row {
@include vf-b-row-reset;
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions templates/_layouts/docs.html
View file
Open in desktop
Expand Up @@ -39,8 +39,8 @@
</div>
</header>

<hr class="u-no-margin u-hide--small">
<div class="docs-container">
<hr class="u-no-margin u-hide--small">
<aside class="p-sidebar">
<nav class="p-side-navigation">

Expand Down Expand Up @@ -181,7 +181,7 @@ <h4 class="p-aside__header">Contents</h4>
item.classList.add('p-toc__item');

// Add all H3s with IDs to the "Contents" list
document.querySelectorAll('main h3[id]').forEach(
[].slice.call(document.querySelectorAll('main h3[id]')).forEach(
function(heading) {
let thisItem = item.cloneNode();
let thisAnchor = anchor.cloneNode();
Expand Down
85 changes: 84 additions & 1 deletion templates/docs/examples/patterns/grid/default.html
View file
Open in desktop
Expand Up @@ -31,7 +31,7 @@
<span>.col-9</span>
</div>
<div class="col-3">
<span>.col-9</span>
<span>.col-3</span>
</div>
</div>
<div class="row">
Expand Down Expand Up @@ -98,5 +98,88 @@
<span>.col-11</span>
</div>
</div>
<div class="row">
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
<div class="col-1">
<span>.col-1</span>
</div>
</div>
<div class="row">
<div class="col-2">
<span>.col-2</span>
</div>
<div class="col-2">
<span>.col-2</span>
</div>
<div class="col-2">
<span>.col-2</span>
</div>
<div class="col-2">
<span>.col-2</span>
</div>
<div class="col-2">
<span>.col-2</span>
</div>
<div class="col-2">
<span>.col-2</span>
</div>
</div>
<div class="row">
<div class="col-3">
<span>.col-3</span>
</div>
<div class="col-3">
<span>.col-3</span>
</div>
<div class="col-3">
<span>.col-3</span>
</div>
<div class="col-3">
<span>.col-3</span>
</div>
</div>
<div class="row">
<div class="col-4">
<span>.col-4</span>
</div>
<div class="col-4">
<span>.col-4</span>
</div>
<div class="col-4">
<span>.col-4</span>
</div>
</div>
</div>
{% endblock %}