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

Fix grid offsets #4741

Merged
merged 12 commits into from
Apr 21, 2023
Merged

Fix grid offsets #4741

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
de21d92
Fix grid offsets
ClementChaumel Apr 20, 2023
ce549d6
Fix `.grid-demo` not targetting `col`
ClementChaumel Apr 20, 2023
dd65296
use 50-50 common grid pattern
ClementChaumel Apr 19, 2023
bdfd553
Use new grid common patterns in the brochure site examples
ClementChaumel Apr 20, 2023
569052d
Update content
ClementChaumel Apr 20, 2023
db20210
fix link checker
ClementChaumel Apr 20, 2023
e7aa9e7
Update templates/docs/patterns/grid/index.md
ClementChaumel Apr 21, 2023
ef54c57
Update templates/docs/examples/layouts/brochure-site/_25-25-50.html
ClementChaumel Apr 21, 2023
804ffcf
Update scss/_patterns_grid.scss
ClementChaumel Apr 21, 2023
e51181c
Remove `p-rule`
ClementChaumel Apr 21, 2023
3a29bdc
Use calc when dividing in SCSS
bartaz Apr 21, 2023
de5f6ee
Fix release notes
bartaz Apr 21, 2023
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
5 changes: 4 additions & 1 deletion releases.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
- version: 3.14.0
features:
- component: Common grid patterns
status: New
url: /docs/patterns/grid#common-grid-patterns
notes: "We've added new classes: <code>.row--50-50</code>, <code>.row--25-75</code>, <code>.row--25-25-50</code>, <code>.row--25-25-25-25</code> as an alias for common grid layouts."
- component: Vertical spacing
url: /docs/utilities/vertical-spacing
status: New
notes: "We've added new classes: <code>.row--50-50</code>, <code>.row--25-75</code>, <code>.row--25-25-50</code> as an alias for common grid layouts."
- component: Deep strip
url: /docs/patterns/strip#deep-strip
status: Updated
Expand Down
64 changes: 51 additions & 13 deletions scss/_patterns_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
@mixin vf-p-grid {
// FIXME: this should be removed from framework SCSS
// (see https://github.com/canonical/vanilla-framework/issues/3199)
.grid-demo [class*='#{$grid-column-prefix}'] {
.grid-demo [class*='col'] {
ClementChaumel marked this conversation as resolved.
Show resolved Hide resolved
background: transparentize($color-negative, 0.9);
margin-bottom: $spv--small;
}
Expand Down Expand Up @@ -190,40 +190,51 @@
}

// Common grid patterns
$col-50-medium: $grid-columns-medium / 2;
bartaz marked this conversation as resolved.
Show resolved Hide resolved

$col-25: $grid-columns / 4;
bartaz marked this conversation as resolved.
Show resolved Hide resolved
$col-50: $grid-columns / 2;
bartaz marked this conversation as resolved.
Show resolved Hide resolved
$col-75: ($grid-columns / 4) * 3;
bartaz marked this conversation as resolved.
Show resolved Hide resolved

.row--50-50 {
@extend %vf-row;

.#{$grid-column-prefix} {
> .col {
@include vf-grid-column($grid-columns-small);

@media (min-width: $threshold-4-6-col) {
@include vf-grid-column(calc($grid-columns-medium / 2));
@include vf-grid-column($col-50-medium);
}

@media (min-width: $threshold-6-12-col) {
@include vf-grid-column(calc($grid-columns / 2));
@include vf-grid-column($col-50);
}
}
}

.row--25-75 {
@extend %vf-row;

.#{$grid-column-prefix} {
> .col {
@include vf-grid-column($grid-columns-small);

@media (min-width: $threshold-4-6-col) {
@include vf-grid-column($grid-columns-medium);
}

@media (min-width: $threshold-6-12-col) {
&:nth-child(1) {
@include vf-grid-column(calc($grid-columns / 4));
&:nth-of-type(1) {
@include vf-grid-column($col-25);
}

&:nth-of-type(2) {
@include vf-grid-column($col-75);
}

&:nth-child(2) {
@include vf-grid-column(calc($grid-columns / 4 * 3));
// if there is only one column we offset it to the right
&:only-of-type {
Copy link
Member

@bartaz bartaz Apr 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Just noticed that, this is pretty cool!

I'm not super sure it's clear that it does that, but before we have any better implementation of the offset we can keep that. I like the simplicity of it, even if not super explicitly clear that this is gonna work this way. Especially that no other variants of this row do this. But maybe they can?

grid-column-start: calc($col-25 + 1);
@include vf-grid-column($col-75);
}
}
}
Expand All @@ -232,18 +243,45 @@
.row--25-25-50 {
@extend %vf-row;

.#{$grid-column-prefix} {
> .col {
@include vf-grid-column($grid-columns-small);

@media (min-width: $threshold-4-6-col) {
&:nth-child(-n + 2) {
@include vf-grid-column(calc($grid-columns-medium / 2));
&:nth-of-type(-n + 2) {
bartaz marked this conversation as resolved.
Show resolved Hide resolved
@include vf-grid-column($col-50-medium);
}

&:nth-child(3) {
&:nth-of-type(3) {
@include vf-grid-column($grid-columns-medium);
}
}

@media (min-width: $threshold-6-12-col) {
&:nth-of-type(1),
&:nth-of-type(2) {
@include vf-grid-column($col-25);
}

&:nth-of-type(3) {
@include vf-grid-column($col-50);
}
}
}
}

.row--25-25-25-25 {
@extend %vf-row;

> .col {
@include vf-grid-column($grid-columns-small);

@media (min-width: $threshold-4-6-col) {
@include vf-grid-column($col-50-medium);
}

@media (min-width: $threshold-6-12-col) {
@include vf-grid-column($col-25);
}
}
}
}
8 changes: 4 additions & 4 deletions scss/_settings_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ $grid-columns: 12 !default;
$threshold-4-6-col: $breakpoint-small !default;
$threshold-6-12-col: $breakpoint-large !default;

$grid-column-prefix: 'col' !default;
$grid-small-col-prefix: '#{$grid-column-prefix}-small-' !default;
$grid-medium-col-prefix: '#{$grid-column-prefix}-medium-' !default;
$grid-large-col-prefix: '#{$grid-column-prefix}-' !default;
$grid-column-prefix: 'col-' !default;
$grid-small-col-prefix: '#{$grid-column-prefix}small-' !default;
$grid-medium-col-prefix: '#{$grid-column-prefix}medium-' !default;
$grid-large-col-prefix: #{$grid-column-prefix} !default;

$grid-gutter-widths: (
small: $sp-unit * 3,
Expand Down
14 changes: 7 additions & 7 deletions templates/docs/examples/layouts/brochure-site/_25-25-25-25-structure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div class="row grid-demo">
<div class="col-3 col-medium-3">
<div class="row--25-25-25-25 grid-demo">
<div class="col">
<h4>25/25/25/25 split</h4>
</div>
<div class="col-3 col-medium-3">
<div class="col">
<p>Use 25/25/25/25 for a section with 4 columns split.</p>
</div>
<div class="col-3 col-medium-3">
<p>On medium screens it should become 2 rows of 50/50 + 50/50 split.</p>
<div class="col">
<p>On medium screens it becomes 2 rows of 50/50 + 50/50 split.</p>
</div>
<div class="col-3 col-medium-3">
<p>To achive that use <code>col-3 col-medium-3</code> class names on all the columns.</p>
<div class="col">
<p>To achieve that use <code>row--25-25-25-25</code> on the row and <code>col</code> class names on all the columns.</p>
</div>
</div>
12 changes: 6 additions & 6 deletions templates/docs/examples/layouts/brochure-site/_25-25-50-structure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div class="row grid-demo">
<div class="col-3 col-medium-3">
<div class="row--25-25-50 grid-demo">
<div class="col">
<h4>25/25/50 split</h4>
</div>
<div class="col-3 col-medium-3">
<div class="col">
<p>Use 25/25/50 split on section with 3 columns where 2 columns have less content than the last large column.</p>
</div>
<div class="col-6 col-medium-6">
<p>On medium screens it should become 2 rows of 50/50 + 100 split.</p>
<p>To achieve that use <code>col-3 col-medium-3</code> class names on first two columns and <code>col-6 col-medium-6</code> on last larger column.</p>
<div class="col">
<p>On medium screens it becomes 2 rows of 50/50 + 100 split.</p>
<p>To achieve that use <code>row--25-25-50</code> class name on the row and <code>col</code> on the column.</p>
</div>
</div>
20 changes: 10 additions & 10 deletions templates/docs/examples/layouts/brochure-site/_25-25-50.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<section class="p-strip u-no-padding--top">
<hr class="is-fixed-width u-no-margin--bottom">
<div class="row">
<div class="col-3 col-medium-3">
<hr class="p-rule">
ClementChaumel marked this conversation as resolved.
Show resolved Hide resolved
<div class="row--25-25-50">
<div class="col">
<img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_158,h_40/https://assets.ubuntu.com/v1/f34edb1f-Google+Cloud+logo+158x40.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_316,h_80/https://assets.ubuntu.com/v1/f34edb1f-Google+Cloud+logo+158x40.png 2x" alt="" width="158" height="40" loading="lazy">
</div>
<div class="col-3 col-medium-3">
<div class="col">
<p>
<span>Derry Cheng</span><br>
<span class="u-text--muted">Product Manager for Compute Engine</span>
</p>
</div>
<div class="col-6">
<div class="col">
<i>
<p>
“For the last decade, Google has partnered with Canonical to promote the adoption of open-source
Expand All @@ -23,18 +23,18 @@
</i>
</div>
</div>
<hr class="is-fixed-width u-no-margin--bottom">
<div class="row">
<div class="col-3 col-medium-3">
<hr class="p-rule">
<div class="row--25-25-50">
<div class="col">
<img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_158,h_40/https://assets.ubuntu.com/v1/9257d79e-tenable+logo+158x40.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_316,h_80/https://assets.ubuntu.com/v1/9257d79e-tenable+logo+158x40.png 2x" alt="" width="158" height="40" loading="lazy">
</div>
<div class="col-3 col-medium-3">
<div class="col">
<p>
<span>Robert Huber</span><br>
<span class="u-text--muted">Chief Security Officer</span>
</p>
</div>
<div class="col-6">
<div class="col">
<i>
<p>
“Tenable and Canonical collaborate to provide timely, accurate and actionable vulnerability alerts.
Expand Down
8 changes: 4 additions & 4 deletions templates/docs/examples/layouts/brochure-site/_25-75-nested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<section class="p-strip is-shallow u-no-padding--top">
<div class="row">
<hr class="u-no-margin--bottom">
<div class="col-medium-6 col-3">
<div class="row--25-75">
<hr class="p-rule">
<div class="col">
<h3 class="p-muted-heading">We’re Canonical</h3>
</div>
<div class="col-medium-6 col-9">
<div class="col">
<div class="row">
<div class="col-medium-2 col-3">
<h4 class="p-heading--2"><strong>950+</strong><br>Employees</h4>
Expand Down
6 changes: 3 additions & 3 deletions templates/docs/examples/layouts/brochure-site/_25-75-offset-structure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="row grid-demo">
<div class="col-start-large-4 col-9 col-medium-6">
<div class="row--25-75 grid-demo">
<div class="col">
<h4>(25)/75 offset split</h4>
<p>Use (25)/75 split with offset when first column is empty and the rest of the content is to be aligned with other 75% section of the page.</p>
<p>To achieve that use <code>col-start-large-4 col-9 col-medium-6</code> class names.</p>
<p>To achieve that use <code>row--25-75</code> class name and only one <code>col</code> child.</p>
</div>
</div>
4 changes: 2 additions & 2 deletions templates/docs/examples/layouts/brochure-site/_25-75-offset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="p-strip is-deep">
<div class="row">
<div class="col-start-large-4 col-8">
<div class="row--25-75">
<div class="col">
<h1 class="p-heading--2"><strong>Company culture</strong></h1>
<h2>We believe that talent is evenly distributed around the world.&nbsp; Diversity is part of our strength. What unifies us isn’t our background,&nbsp; it’s our mission to amplify open source.</h2>
</div>
Expand Down
10 changes: 5 additions & 5 deletions templates/docs/examples/layouts/brochure-site/_25-75-structure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="row grid-demo">
<div class="col-3 col-medium-6">
<div class="row--25-75 grid-demo">
<div class="col">
<h4>25/75 split</h4>
</div>
<div class="col-9 col-medium-6">
<div class="col">
<p>Use 25/75 split on sections with narrow first column (usually a heading) followed by large content area that can be split into smaller nested grid if needed.</p>
<p>On medium screens it should become 2 rows of 100 + 100 split.</p>
<p>To achieve that use <code>col-3 col-medium-6</code> class names on first column and <code>col-9 col-medium-6</code> on last larger column.</p>
<p>On medium screens it becomes 2 rows of 100 + 100 split.</p>
<p>To achieve that use <code>row--25-75</code> class name on the row and <code>col</code> on the columns.</p>
</div>
</div>
6 changes: 3 additions & 3 deletions templates/docs/examples/layouts/brochure-site/_25-75.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="p-strip u-no-padding--top">
<div class="row">
<div class="col-3">
<div class="row--25-75">
<div class="col">
<p class="p-muted-heading">Our mission</p>
</div>
<div class="col-9">
<div class="col">
<h2>Seamless consumption of open source across the compute spectrum</h2>
<p>Join an intense global mission - to deliver the world's best open source experience, from platform to platform.</p>
<button>Defining excellence</button>
Expand Down
8 changes: 4 additions & 4 deletions templates/docs/examples/layouts/brochure-site/_50-50-structure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="row grid-demo">
<div class="col-6 col-medium-3">
<div class="row--50-50 grid-demo">
<div class="col">
<h4>50/50 split</h4>
</div>
<div class="col-6 col-medium-3">
<div class="col">
<p>Use 50/50 split for standard section with a heading and some content.</p>
<p>The 50/50 split should be preserved on large and medium screen sizes, so use <code>col-6 col-medium-3</code> class names.</p>
<p>The 50/50 split should be preserved on large and medium screen sizes.</p>
</div>
</div>
24 changes: 12 additions & 12 deletions templates/docs/examples/layouts/brochure-site/_50-50.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<section class="p-strip is-shallow u-no-padding--top">
<hr class="is-fixed-width u-no-margin--bottom">
<div class="row">
<div class="col-6 col-medium-3">
<hr class="p-rule">
<div class="row--50-50">
<div class="col">
<h2>Become a customer</h2>
</div>
<div class="col-6 col-medium-3">
<div class="col">
<p>For enterprices to cover their Ubuntu estate - servers and workstations.<br/>
<a href="#">See Ubuntu Pro pricing</a>
</p>
Expand All @@ -13,25 +13,25 @@ <h2>Become a customer</h2>
</div>
</section>
<section class="p-strip is-shallow u-no-padding--top">
<hr class="is-fixed-width u-no-margin--bottom">
<div class="row">
<div class="col-6 col-medium-3">
<hr class="p-rule">
<div class="row--50-50">
<div class="col">
<h2>Free for personal use</h2>
</div>
<div class="col-6 col-medium-3">
<div class="col">
<p>Anyone can use Ubuntu Pro for free on up to 5 machines, or 50 if you are an official<a href="#">Ubuntu Community member</a>.
</p>
<button class="p-button--neutral">Register</button>
</div>
</div>
</section>
<section class="p-strip is-shallow u-no-padding--top">
<hr class="is-fixed-width u-no-margin--bottom">
<div class="row">
<div class="col-6 col-medium-3">
<hr class="p-rule">
<div class="row--50-50">
<div class="col">
<h2>Trial at no extra cost for existing Ubuntu Advantage customers</h2>
</div>
<div class="col-6 col-medium-3">
<div class="col">
<p>If you were an active customer before January 26th, 2023 you can try Ubuntu Pro for up to 1 year - until the end of your current contract. At the end of the trial, you can choose to upgrade to full Pro (at extra cost), or remain with your current plan.
</p>
<ul class="p-list--divided">
Expand Down
23 changes: 23 additions & 0 deletions templates/docs/examples/patterns/grid/25-25-25-25.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{% extends "_layouts/examples.html" %}
{% block title %}Grid / 25/25/25/25{% endblock %}

{% block standalone_css %}patterns_grid{% endblock %}

{% block content %}
<div class="grid-demo">
<div class="row--25-25-25-25">
<div class="col">
<span>25</span>
</div>
<div class="col">
<span>25</span>
</div>
<div class="col">
<span>25</span>
</div>
<div class="col">
<span>25</span>
</div>
</div>
</div>
{% endblock %}
Loading