diff --git a/package.json b/package.json index 5178037635..a9c4e9d16e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-framework", - "version": "4.9.1", + "version": "4.10.0", "author": { "email": "webteam@canonical.com", "name": "Canonical Webteam" diff --git a/releases.yml b/releases.yml index 050c9c319b..44eb7e6db3 100644 --- a/releases.yml +++ b/releases.yml @@ -1,3 +1,9 @@ +- version: 4.10.0 + features: + - component: Equal height row + url: /docs/patterns/equal-height-row + status: New + notes: We've introduced new equal height row pattern using the css subgrid feature. - version: 4.9.0 features: - component: Images diff --git a/scss/_patterns_equal-height-row.scss b/scss/_patterns_equal-height-row.scss new file mode 100644 index 0000000000..e804340751 --- /dev/null +++ b/scss/_patterns_equal-height-row.scss @@ -0,0 +1,155 @@ +@import 'settings'; + +@mixin pseudo-border($width) { + background: var(--vf-color-border-default); + content: ''; + display: block; + height: 1px; + position: absolute; + width: $width; +} + +@mixin border-top { + border-top-color: $colors--theme--border-default; + border-top-style: solid; + border-top-width: 1px; + margin-top: -1px; +} + +@mixin vf-p-equal-height-row { + .p-equal-height-row { + display: grid; + grid-template-columns: subgrid; + position: relative; + + .p-equal-height-col { + display: grid; + grid-column: span calc($grid-columns / 4); + grid-row: span 10; + grid-template-rows: subgrid; + position: relative; + } + + @media screen and (width < $breakpoint-large) { + .p-equal-height-col { + grid-column: span $grid-columns-medium; + grid-template-columns: subgrid; + @include border-top(); + } + + .p-equal-height-col .p-equal-height-col-item { + grid-column: span calc($grid-columns-medium / 2); + } + + .p-equal-height-col .p-equal-height-col-item:first-child { + grid-row: span 100; + } + } + + @media screen and (width < $breakpoint-small) { + .p-equal-height-col { + grid-column: span $grid-columns-small; + } + + .p-equal-height-col .p-equal-height-col-item { + grid-column: span $grid-columns-small; + } + + .p-equal-height-col .p-equal-height-col-item:first-child { + grid-row: auto; + } + } + + // divider styles + // Only have access to two pseudo elements, so if item-1 (::after) is present then item-3 must be (::before) + // Vise versa if item-2 is present + &.has-divider-below-item-1::after, + &.has-divider-below-item-2::before, + &.has-divider-below-item-3:not(.has-divider-below-item-1)::after, + &.has-divider-below-item-3:not(.has-divider-below-item-2)::before { + @include pseudo-border(100%); + grid-column: span $grid-columns; + } + + &.has-divider-below-item-1::after { + grid-row: 2; + } + + &.has-divider-below-item-2::before { + grid-row: 3; + } + + &.has-divider-below-item-3:not(.has-divider-below-item-1)::after, + &.has-divider-below-item-3:not(.has-divider-below-item-2)::before { + grid-row: 4; + } + + // For smaller screens, the divider pseudo element is inserted at the column level + @media screen and (width < $breakpoint-large) { + &.has-divider-below-item-1::after, + &.has-divider-below-item-2::before, + &.has-divider-below-item-3:not(.has-divider-below-item-1)::after, + &.has-divider-below-item-3:not(.has-divider-below-item-2)::before { + display: none; + } + + // We don't need to insert divider below item-1 for medium screen size since item-1 gets positioned on the left + &.has-divider-below-item-2 .p-equal-height-col::before, + &.has-divider-below-item-3:not(.has-divider-below-item-1) .p-equal-height-col::before, + &.has-divider-below-item-3:not(.has-divider-below-item-2) .p-equal-height-col::after { + @include pseudo-border(100%); + grid-column: 4 / 7; + } + + &.has-divider-below-item-2 .p-equal-height-col::before { + grid-row: 2; + } + + &.has-divider-below-item-3:not(.has-divider-below-item-1) .p-equal-height-col::before, + &.has-divider-below-item-3:not(.has-divider-below-item-2) .p-equal-height-col::after { + grid-row: 3; + } + } + + @media screen and (width < $breakpoint-small) { + &.has-divider-below-item-1 .p-equal-height-col::before, + &.has-divider-below-item-2 .p-equal-height-col::after, + &.has-divider-below-item-3:not(.has-divider-below-item-1) .p-equal-height-col::before, + &.has-divider-below-item-3:not(.has-divider-below-item-2) .p-equal-height-col::after { + @include pseudo-border(100%); + grid-column: span $grid-columns-small; + } + + &.has-divider-below-item-1 .p-equal-height-col::before { + grid-row: 2; + } + + &.has-divider-below-item-2 .p-equal-height-col::after { + grid-row: 3; + } + + &.has-divider-below-item-3:not(.has-divider-below-item-1) .p-equal-height-col::before, + &.has-divider-below-item-3:not(.has-divider-below-item-2) .p-equal-height-col::after { + grid-row: 4; + } + } + } + + // support for 25-75 split on large screen size for this pattern + .row--25-75-on-large > .col, + .row > .col-9 { + & .p-equal-height-row { + grid-gap: 0 map-get($grid-gutter-widths, default); + grid-template-columns: repeat(9, minmax(0, 1fr)); + + @media screen and (width < $breakpoint-large) { + grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr)); + } + + @media screen and (width < $breakpoint-small) { + grid-gap: 0 map-get($grid-gutter-widths, small); + grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr)); + } + } + } +} diff --git a/scss/_vanilla.scss b/scss/_vanilla.scss index ae5e5499e1..e290cf0e6b 100644 --- a/scss/_vanilla.scss +++ b/scss/_vanilla.scss @@ -4,18 +4,19 @@ @import 'patterns_accordion'; @import 'patterns_article-pagination'; +@import 'patterns_badge'; @import 'patterns_breadcrumbs'; @import 'patterns_buttons'; @import 'patterns_card'; @import 'patterns_chip'; -@import 'patterns_badge'; @import 'patterns_code-snippet'; @import 'patterns_contextual-menu'; @import 'patterns_divider'; +@import 'patterns_equal-height-row'; @import 'patterns_form-help-text'; -@import 'patterns_form-validation'; -@import 'patterns_form-tick-elements'; @import 'patterns_form-password-toggle'; +@import 'patterns_form-tick-elements'; +@import 'patterns_form-validation'; @import 'patterns_forms'; @import 'patterns_grid'; @import 'patterns_heading-icon'; @@ -39,22 +40,22 @@ @import 'patterns_search-and-filter'; @import 'patterns_search-box'; @import 'patterns_section'; +@import 'patterns_segmented-control'; @import 'patterns_separator'; -@import 'patterns_side-navigation'; @import 'patterns_side-navigation-expandable'; +@import 'patterns_side-navigation'; @import 'patterns_slider'; @import 'patterns_status-label'; @import 'patterns_strip'; +@import 'patterns_suru'; @import 'patterns_switch'; -@import 'patterns_segmented-control'; -@import 'patterns_table-icons'; @import 'patterns_table-expanding'; -@import 'patterns_table-of-contents'; +@import 'patterns_table-icons'; @import 'patterns_table-mobile-card'; +@import 'patterns_table-of-contents'; @import 'patterns_table-sortable'; @import 'patterns_tabs'; @import 'patterns_tooltips'; -@import 'patterns_suru'; // Layouts @import 'layouts_application'; @@ -96,22 +97,23 @@ // Patterns @include vf-p-accordion; @include vf-p-article-pagination; + @include vf-p-badge; @include vf-p-breadcrumbs; @include vf-p-buttons; @include vf-p-card; @include vf-p-chip; - @include vf-p-section; - @include vf-p-badge; @include vf-p-code-snippet; @include vf-p-contextual-menu; @include vf-p-divider; + @include vf-p-equal-height-row; @include vf-p-form-help-text; - @include vf-p-form-validation; @include vf-p-form-tick-elements; + @include vf-p-form-validation; @include vf-p-forms; @include vf-p-grid; @include vf-p-heading-icon; @include vf-p-headings; + @include vf-p-section; @include vf-p-form-password-toggle; @include vf-p-icons; diff --git a/scss/standalone/patterns_equal-height-row.scss b/scss/standalone/patterns_equal-height-row.scss new file mode 100644 index 0000000000..6be926283b --- /dev/null +++ b/scss/standalone/patterns_equal-height-row.scss @@ -0,0 +1,11 @@ +@import '../vanilla'; +@include vf-base; + +// dependencies needed for examples +@include vf-p-buttons; +@include vf-p-media-container; +@include vf-p-headings; + +// vf-p-grid is needed for this pattern to work +@include vf-p-grid; +@include vf-p-equal-height-row; diff --git a/side-navigation.yaml b/side-navigation.yaml index 8a42c7e09c..9a56582130 100644 --- a/side-navigation.yaml +++ b/side-navigation.yaml @@ -30,6 +30,8 @@ subheadings: - title: Accordion url: /docs/patterns/accordion + - title: Equal height row + url: /docs/patterns/equal-height-row - title: Badge url: /docs/patterns/badge - title: Breadcrumbs diff --git a/templates/docs/examples/patterns/equal-height-row/25-75-grid.html b/templates/docs/examples/patterns/equal-height-row/25-75-grid.html new file mode 100644 index 0000000000..455c3c92d4 --- /dev/null +++ b/templates/docs/examples/patterns/equal-height-row/25-75-grid.html @@ -0,0 +1,106 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Equal height row / Use in 25-75 grid{% endblock %} + +{% block standalone_css %}patterns_equal-height-row{% endblock %} + +{% block content %} + +
+
+ +

Latest from our blog

+ +
+
+
+
+ +

Unleash the power of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles

+ +

A few months ago, the OpenSSL Project announced the end of life of OpenSSL + 1.1.1. It is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu 20.04 LTS, with + many organisations relying on version 1.1.1....

+
+
+ +

Learn more

+ +
+
+
+ +

Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive

+ +

If you've been following my previous blog posts, you already know that + the automotive industry is changing faster than ever. Updating software and firmware in vehicles is one area + that's particularly challenging and in flux....

+
+
+ +

Learn more

+ +
+
+
+ +

Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive

+ +

Today, around 96% of software projects utilize open source in some way. The + web team here at Canonical is passionate about Open source. We lead with an open-by-default approach and so + almost everything we do and work on can be found publicly on the Canonical Github org.

+
+
+ +

Learn more

+ +
+
+
+
+
+ +

Unleash the power of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles

+ +

A few months ago, the OpenSSL Project announced the end of life of OpenSSL + 1.1.1. It is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu 20.04 LTS, with + many organisations relying on version 1.1.1....

+
+
+ +

Learn more

+ +
+
+
+ +

Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive

+ +

If you've been following my previous blog posts, you already know that + the automotive industry is changing faster than ever. Updating software and firmware in vehicles is one area + that's particularly challenging and in flux....

+
+
+ +

Learn more

+ +
+
+
+ +

Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive

+ +

Today, around 96% of software projects utilize open source in some way. The + web team here at Canonical is passionate about Open source. We lead with an open-by-default approach and so + almost everything we do and work on can be found publicly on the Canonical Github org.

+
+
+ +

Learn more

+ +
+
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html b/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html new file mode 100644 index 0000000000..7d3c59766f --- /dev/null +++ b/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html @@ -0,0 +1,127 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Equal height row / 4 item columns{% endblock %} + +{% block standalone_css %}patterns_equal-height-row{% endblock %} + +{% block content %} + +
+
+ +

Latest from our blog

+ +
+
+
+
+
+ +
+
+ +

+ Unleash the pwoer of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles +

+ +
+
+

+ A few months ago, the OpenSSL Project announced the end of life of OpenSSL 1.1.1. It + is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu + 20.04 LTS, with many organisations relying on version 1.1.1.... +

+
+ +
+
+
+
+ +
+
+ +

+ Unleash the pwoer of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles +

+ +
+
+

+ A few months ago, the OpenSSL Project announced the end of life of OpenSSL 1.1.1. It + is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu + 20.04 LTS, with many organisations relying on version 1.1.1.... +

+
+ +
+
+
+
+ +
+
+ +

+ Unleash the pwoer of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles +

+ +
+
+

+ A few months ago, the OpenSSL Project announced the end of life of OpenSSL 1.1.1. It + is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu + 20.04 LTS, with many organisations relying on version 1.1.1.... +

+
+ +
+
+
+
+
+
+ +
+
+ +

+ Unleash the pwoer of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles +

+ +
+
+

+ A few months ago, the OpenSSL Project announced the end of life of OpenSSL 1.1.1. It + is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu + 20.04 LTS, with many organisations relying on version 1.1.1.... +

+
+ +
+
+
+
+ +
+
+ +

+ Unleash the pwoer of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles +

+ +
+
+

+ A few months ago, the OpenSSL Project announced the end of life of OpenSSL 1.1.1. It + is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu + 20.04 LTS, with many organisations relying on version 1.1.1.... +

+
+ +
+
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/templates/docs/examples/patterns/equal-height-row/default.html b/templates/docs/examples/patterns/equal-height-row/default.html new file mode 100644 index 0000000000..e13ad4cef6 --- /dev/null +++ b/templates/docs/examples/patterns/equal-height-row/default.html @@ -0,0 +1,55 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Equal height row / Default{% endblock %} + +{% block standalone_css %}patterns_equal-height-row{% endblock %} + +{% block content %} + +
+
+
+ + Some title + +

Use the Ubuntu terminal and run Linux applications on Windows. Use the Ubuntu + terminal + and run Linux applications on Windows.

+
+
+

Learn about Ubuntu for WSL

 +
+
+
+ + Some Title + +

Use your Raspberry Pi as a desktop, server or IoT device with Ubuntu.

+
+
+

Learn about Ubuntu for Raspberry Pi

 +
+
+
+ + Some Title + +

Spin up Ubuntu VMs on Windows, Mac and Linux.

+
+
+

Learn about Multipass

 +
+
+
+ + Some Title + +

Fast, dense, and secure container and VM management at any scale.

+
+
+

Learn about LXD

 +
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/templates/docs/examples/patterns/equal-height-row/full-screen-dividers.html b/templates/docs/examples/patterns/equal-height-row/full-screen-dividers.html new file mode 100644 index 0000000000..8dcd4ad006 --- /dev/null +++ b/templates/docs/examples/patterns/equal-height-row/full-screen-dividers.html @@ -0,0 +1,64 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Equal height row / Full screen dividers{% endblock %} + +{% block standalone_css %}patterns_equal-height-row{% endblock %} + +{% block content %} + +
+
+
+
+ +
+

Use the Ubuntu terminal and run Linux applications on Windows. Use the + Ubuntu + terminal + and run Linux applications on Windows.

+
+
+ +

Learn about Ubuntu for WSL

+ +
+
+
+
+ +
+

Use your Raspberry Pi as a desktop, server or IoT device with Ubuntu.

+
+
+ +

Learn about Ubuntu for Raspberry Pi

+ +
+
+
+
+ +
+

Spin up Ubuntu VMs on Windows, Mac and Linux.

+
+
+ +

Learn about Multipass

+ +
+
+
+
+ +
+

Fast, dense, and secure container and VM management at any scale.

+
+
+ +

Learn about LXD

+ +
+
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/templates/docs/patterns/equal-height-row.md b/templates/docs/patterns/equal-height-row.md new file mode 100644 index 0000000000..ead46512e7 --- /dev/null +++ b/templates/docs/patterns/equal-height-row.md @@ -0,0 +1,99 @@ +--- +wrapper_template: '_layouts/docs.html' +context: + title: Equal height row | Components +--- + +The equal height row component aims to provide consistent alignment for grid items within a row format. This is achieved using the CSS `subgrid` feature which allows column grids to share the same layout used in the parent row grid. + +This component relies on the [grid component](/docs/patterns/grid) to work. Currently, the following grid layouts are supported: + +1. Having a four column row (`.p-equal-height-row`) as direct child of `.row`. Each column (`.p-equal-height-col`) may have up to four grid items (`.p-equal-height-col-item`). + +2. Use inside the `25-75` grid pattern on large screen size (`.row--25-75-on-large`). The row (`.p-equal-height-row`) should be placed within the 75% container with a maximum of three columns. + +In addition to enforcing column alignment within each row, responsive behaviour is provided out of the box as shown below: + + + + + + + + + + + + + + + + + + + + + + +
Screen size (px)Behaviour
Less than $breakpoint-smallEach column spans across the entire parent grid. Column items are vertically stacked.
$breakpoint-small - $breakpoint-largeEach column spans across the entire parent grid. The first item within each column is placed on the left of the other column items.
Greater than $breakpoint-largeColumns within the row are displayed horizontally. Column items are vertically stacked.
+ +The below sections provides examples for using this component to achieve common design patterns. + +## Four column row pattern + +
+View example of the four column row pattern using equal height row component. +
+ +## Full screen dividers + +You can insert dividers that span across all columns within a row using `.has-divider-below-item-1`, `.has-divider-below-item-2` and `.has-divider-below-item-3`. + +
+
+
Note:
+

For smaller screen sizes i.e. < $breakpoint-large the divider will appear below relevant items within each column.

+
+
+ +
+
+

You may only have two dividers maximum. For example, if you have .has-divider-below-item-1 and .has-divider-below-item-2 set for the row, then .has-divider-below-item-3 will not be shown. This is a limitation due to usage of pseudo elements for visualising dividers that is capable of spanning across grid gaps.

+
+
+ +
+View example of full screen dividers in equal height row component. +
+ +## 25-75 grid pattern + +You may use the equal height row component within a 25-75 grid layout for large screen sizes. You should place the equal height row component with a maximum of three columns inside the 75% container when using this pattern. + +
+View example of the 25-75 grid pattern using equal height row component. +
+ +## Four items per column pattern + +Each column can have up to 4 items. + +
+View example of the four items per column pattern using equal height row component. +
+ +## Import + +To import just this component into your project, copy the snippet below and include it in your main Sass file. + +```scss +// import Vanilla and include base mixins +// this only needs to happen once in a given project +@import 'vanilla-framework'; +@include vf-base; + +@include vf-p-grid; +@include vf-p-equal-height-row; +``` + +For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.