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

Responsive image aspect ratio variants #5308

Merged
merged 14 commits into from
Aug 20, 2024
Merged

Responsive image aspect ratio variants #5308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4fb6a84
Add responsive image container aspect ratio classes
jmuzina Aug 16, 2024
0cb9b60
Add responsive image container aspect ratio example
jmuzina Aug 16, 2024
5f49045
tweak aspect ratio responsive mixin calling
jmuzina Aug 16, 2024
f4bfc97
Add responsive image container aspect ratio class reference
jmuzina Aug 16, 2024
fa1e53d
Add more responsive aspect ratio examples, and add them to image cont…
jmuzina Aug 16, 2024
315faba
Add responsive aspect ratio class release note
jmuzina Aug 16, 2024
b1c8717
Better explain aspect ratio classnames table
jmuzina Aug 16, 2024
05ef72f
fix mdspell errors
jmuzina Aug 16, 2024
490d9f7
Add image combined as a responsive example
jmuzina Aug 16, 2024
e9c34f0
Widen image container aspect ratio class names list
jmuzina Aug 19, 2024
a350f38
Explain motive behind responsive aspect ratio classes
jmuzina Aug 19, 2024
512cf95
Move image container breakpoint bounds to _settings_breakpoints
jmuzina Aug 20, 2024
3c60c22
use width inequalities rather than min/max-width
jmuzina Aug 20, 2024
896d413
Merge remote-tracking branch 'upstream/main' into aspect-ratio-respon…
jmuzina Aug 20, 2024
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
4 changes: 4 additions & 0 deletions releases.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
url: /docs/base/separators
status: New
notes: We've added <code>.is-highlighted</code> and <code>.is-highlighted.is-accent</code> classes to the base horizontal rule.
- component: Image container
url: /docs/patterns/images#image-container-with-aspect-ratio
status: New
notes: We've added new breakpoint-specific aspect ratio classes to the image container component.
- version: 4.15.0
features:
- component: CTA Block
Expand Down
66 changes: 51 additions & 15 deletions scss/_patterns_image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,63 @@
Wraps contents in a container with an aspect ratio of 2.4:1.
.p-image-container--square:
Wraps contents in a container with an aspect ratio of 1:1.
.p-image-container--(16-9|3-2|2-3|cinematic|square)-on-(small|medium|large):
Wraps contents in a container with the specified aspect ratio on the specified breakpoint.
Image:
.p-image-container__image:
Image element within an image container.
*/

@import 'settings';

// Mapping of aspect ratio class names to their `aspect-ratio` values (width / height).
$aspect-ratios: (
'16-9': calc(16 / 9),
'3-2': calc(3 / 2),
'2-3': calc(2 / 3),
'cinematic': 2.4,
'square': 1,
);

@mixin aspect-ratio-classes {
@each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
.p-image-container--#{$aspect-ratio} {
aspect-ratio: $aspect-ratio-value;
}
}

@each $breakpoint-name, $breakpoint-bounds-pair in $breakpoint-bounds {
$min-width: map-get($breakpoint-bounds-pair, min);
$max-width: map-get($breakpoint-bounds-pair, max);

@if $min-width and $max-width {
@media ($min-width <= width < $max-width) {
@each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
.p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
aspect-ratio: $aspect-ratio-value;
}
}
}
} @else if $min-width {
@media (width >= $min-width) {
@each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
.p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
aspect-ratio: $aspect-ratio-value;
}
}
}
} @else if $max-width {
@media (width < $max-width) {
@each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
.p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
aspect-ratio: $aspect-ratio-value;
}
}
}
}
}
}

@mixin vf-p-image {
.p-image-container,
[class^='p-image-container--'] {
Expand Down Expand Up @@ -54,21 +104,7 @@
}
}

.p-image-container--16-9 {
aspect-ratio: 16/9;
}
.p-image-container--3-2 {
aspect-ratio: 3/2;
}
.p-image-container--2-3 {
aspect-ratio: 2/3;
}
.p-image-container--cinematic {
aspect-ratio: 2.4/1;
}
.p-image-container--square {
aspect-ratio: 1/1;
}
@include aspect-ratio-classes;

// Deprecated; will be removed in v5
.p-image--bordered {
Expand Down
16 changes: 16 additions & 0 deletions scss/_settings_breakpoints.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,19 @@ $breakpoint-large: 1036px !default;
$breakpoint-navigation-threshold: $breakpoint-large !default;
$breakpoint-heading-threshold: $breakpoint-large !default;
$breakpoint-x-large: 1681px !default; // exclude most laptops

// Mapping of breakpoint names to the min and max widths at which they apply.
$breakpoint-bounds: (
small: (
min: null,
max: $breakpoint-small,
),
medium: (
min: $breakpoint-small,
max: $breakpoint-large,
),
large: (
min: $breakpoint-large,
max: null,
),
);
31 changes: 17 additions & 14 deletions templates/docs/examples/patterns/image/container/aspect-ratio/all.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,47 @@
{% block standalone_css %}patterns_image{% endblock %}

{% block content %}
<div>
<section>
<span>16:9</span>
{% include 'docs/examples/patterns/image/container/aspect-ratio/16-9.html' %}
</div>
<div>
</section>
<section>
<span>16:9 (with 16:9 image)</span>
<div class="p-image-container--16-9 is-highlighted">
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/7c9867c1-16x9.png" width="1200" alt="">
</div>
</div>
<div>
</section>
<section>
<span>3:2</span>
<div class="p-image-container--3-2 is-highlighted">
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</div>
<div>
</section>
<section>
<span>2:3</span>
<div class="p-image-container--2-3 is-highlighted">
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</div>
<div>
</section>
<section>
<span>2:3 (with 2:3 image)</span>
<div class="p-image-container--2-3 is-highlighted">
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e97cdac9-2x3.png" width="1200" alt="">
</div>
</div>
<div>
</section>
<section>
<span>2.4:1 (Cinematic)</span>
<div class="p-image-container--cinematic is-highlighted">
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</div>
<div>
</section>
<section>
<span>1:1 (Square)</span>
<div class="p-image-container--square is-highlighted">
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</div>
</section>
<section>
{% include 'docs/examples/patterns/image/container/aspect-ratio/responsive-all.html' %}
</section>
{% endblock %}
140 changes: 140 additions & 0 deletions templates/docs/examples/patterns/image/container/aspect-ratio/responsive-all.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
{% extends "_layouts/examples.html" %}
{% block title %}Image Container / Aspect Ratio / Responsive / All{% endblock %}

{% block standalone_css %}patterns_image{% endblock %}

{% block content %}
<section>
<span>Cinematic on large, 16:9 on medium, 2:3 on small</span>
{% include 'docs/examples/patterns/image/container/aspect-ratio/responsive.html' %}
</section>

<section>
<span>Cinematic on large, 16:9 on medium</span>
<div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>Cinematic on large, 2:3 on small</span>
<div class="p-image-container--cinematic-on-large p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>16:9 on medium, 2:3 on small</span>
<div class="p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>Cinematic on large</span>
<div class="p-image-container--cinematic-on-large is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>Cinematic on large, 16:9 on medium</span>
<div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>Cinematic on large, 2:3 on small</span>
<div class="p-image-container--cinematic-on-large p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>16:9 on medium</span>
<div class="p-image-container--16-9-on-medium is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>16:9 on medium, 2:3 on small</span>
<div class="p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>2:3 on small</span>
<div class="p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>16:9 on medium</span>
<div class="p-image-container--16-9-on-medium is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>Cinematic on large, 16:9 on medium, 2:3 on small</span>
<div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>Cinematic on large, 16:9 on medium</span>
<div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>Cinematic on large, 2:3 on small</span>
<div class="p-image-container--cinematic-on-large p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>16:9 on medium, 2:3 on small</span>
<div class="p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>16:9 on medium</span>
<div class="p-image-container--16-9-on-medium is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

<section>
<span>2:3 on small</span>
<div class="p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
</section>

{% endblock %}
11 changes: 11 additions & 0 deletions templates/docs/examples/patterns/image/container/aspect-ratio/responsive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{% extends "_layouts/examples.html" %}
{% block title %}Image Container / Aspect Ratio / Responsive{% endblock %}

{% block standalone_css %}patterns_image{% endblock %}

{% block content %}
<div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
<img class="p-image-container__image"
src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
</div>
{% endblock %}
Loading
Loading