From 190927f1618c9588c3c4a68a5fbf2cfae16f6f83 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:08:57 +0000 Subject: [PATCH 01/18] Add Sass function/mixins for handling CSS custom props --- assets-src/styles/advanced.scss | 42 +++--- assets-src/styles/core.scss | 126 +++++++++--------- .../sass/10-functions/_css-custom-props.scss | 47 +++++++ .../sass/20-mixins/_css-custom-props.scss | 88 ++++++++++++ 4 files changed, 221 insertions(+), 82 deletions(-) create mode 100644 assets-src/styles/sass/10-functions/_css-custom-props.scss create mode 100644 assets-src/styles/sass/20-mixins/_css-custom-props.scss diff --git a/assets-src/styles/advanced.scss b/assets-src/styles/advanced.scss index 8ebb1de..9e8c717 100755 --- a/assets-src/styles/advanced.scss +++ b/assets-src/styles/advanced.scss @@ -5,24 +5,26 @@ /*------------------------------------*\ #Settings \*------------------------------------*/ -@import "sass/00-settings/breakpoints"; -@import "sass/00-settings/colors"; -//@import "sass/00-settings/debug"; -@import "sass/00-settings/typesetting"; +@import 'sass/00-settings/breakpoints'; +@import 'sass/00-settings/colors'; +//@import 'sass/00-settings/debug'; +@import 'sass/00-settings/typesetting'; /*------------------------------------*\ #Functions \*------------------------------------*/ -@import "sass/10-functions/units"; +@import 'sass/10-functions/units'; +@import 'sass/10-functions/css-custom-props'; /*------------------------------------*\ #Mixins \*------------------------------------*/ -@import "sass/20-mixins/font-sizes"; -@import "sass/20-mixins/media-query"; -@import "sass/20-mixins/stack"; +@import 'sass/20-mixins/css-custom-props'; +@import 'sass/20-mixins/font-sizes'; +@import 'sass/20-mixins/media-query'; +@import 'sass/20-mixins/stack'; /*------------------------------------*\ @@ -30,7 +32,7 @@ Repeated to allow for extending placeholders \*------------------------------------*/ -@import "sass/30-base/hide-and-show"; +@import 'sass/30-base/hide-and-show'; /*------------------------------------*\ @@ -38,11 +40,11 @@ For JS enhancements \*------------------------------------*/ -@import "sass/60-advanced-components/navigation"; -@import "sass/60-advanced-components/cards"; -@import "sass/60-advanced-components/collapsibles"; -@import "sass/60-advanced-components/disclosure-widget"; -@import "sass/60-advanced-components/sortable-tables"; +@import 'sass/60-advanced-components/navigation'; +@import 'sass/60-advanced-components/cards'; +@import 'sass/60-advanced-components/collapsibles'; +@import 'sass/60-advanced-components/disclosure-widget'; +@import 'sass/60-advanced-components/sortable-tables'; //@import "sass/60-advanced-components/slider"; /*------------------------------------*\ @@ -51,9 +53,9 @@ Add third-party plugins here. Add custom styles directly after the original in a separate file \*------------------------------------*/ -@import "../../node_modules/accessible-autocomplete/src/autocomplete"; -@import "sass/70-third-party-plugins/s24-accessible-autocomplete"; -@import "../../node_modules/@splidejs/splide/src/css/core/index"; -@import "sass/70-third-party-plugins/s24-splide-carousel"; -@import "../../node_modules/tabbyjs/src/sass/tabby-ui"; -@import "sass/70-third-party-plugins/s24-tabby-ui"; \ No newline at end of file +@import '../../node_modules/accessible-autocomplete/src/autocomplete'; +@import 'sass/70-third-party-plugins/s24-accessible-autocomplete'; +@import '../../node_modules/@splidejs/splide/src/css/core/index'; +@import 'sass/70-third-party-plugins/s24-splide-carousel'; +@import '../../node_modules/tabbyjs/src/sass/tabby-ui'; +@import 'sass/70-third-party-plugins/s24-tabby-ui'; \ No newline at end of file diff --git a/assets-src/styles/core.scss b/assets-src/styles/core.scss index 4e9d389..5d1eb01 100755 --- a/assets-src/styles/core.scss +++ b/assets-src/styles/core.scss @@ -5,98 +5,100 @@ /*------------------------------------*\ #Settings \*------------------------------------*/ -@import "sass/00-settings/breakpoints"; -@import "sass/00-settings/colors"; -//@import "sass/00-settings/debug"; -@import "sass/00-settings/fonts"; -@import "sass/00-settings/typesetting"; +@import 'sass/00-settings/breakpoints'; +@import 'sass/00-settings/colors'; +//@import 'sass/00-settings/debug'; +@import 'sass/00-settings/fonts'; +@import 'sass/00-settings/typesetting'; /*------------------------------------*\ #Functions \*------------------------------------*/ -@import "sass/10-functions/units"; +@import 'sass/10-functions/units'; +@import 'sass/10-functions/css-custom-props'; /*------------------------------------*\ #Mixins \*------------------------------------*/ -@import "sass/20-mixins/font-sizes"; -@import "sass/20-mixins/media-query"; -@import "sass/20-mixins/stack"; +@import 'sass/20-mixins/css-custom-props'; +@import 'sass/20-mixins/font-sizes'; +@import 'sass/20-mixins/media-query'; +@import 'sass/20-mixins/stack'; /*------------------------------------*\ #Base \*------------------------------------*/ -@import "sass/30-base/box-sizing"; -@import "sass/30-base/body"; -@import "sass/30-base/typography"; -@import "sass/30-base/media"; -@import "sass/30-base/hide-and-show"; -@import "sass/30-base/flow-elements"; -@import "sass/30-base/buttons-and-links"; -@import "sass/30-base/skip-link"; -@import "sass/30-base/details-and-summary"; -@import "sass/30-base/svg"; -@import "sass/30-base/icons"; -@import "sass/30-base/lists"; -@import "sass/30-base/quotes"; -@import "sass/30-base/tables"; -@import "sass/30-base/animation"; -@import "sass/30-base/focus"; +@import 'sass/30-base/box-sizing'; +@import 'sass/30-base/body'; +@import 'sass/30-base/typography'; +@import 'sass/30-base/media'; +@import 'sass/30-base/hide-and-show'; +@import 'sass/30-base/flow-elements'; +@import 'sass/30-base/buttons-and-links'; +@import 'sass/30-base/skip-link'; +@import 'sass/30-base/details-and-summary'; +@import 'sass/30-base/svg'; +@import 'sass/30-base/icons'; +@import 'sass/30-base/lists'; +@import 'sass/30-base/quotes'; +@import 'sass/30-base/tables'; +@import 'sass/30-base/animation'; +@import 'sass/30-base/focus'; /*------------------------------------*\ #Forms \*------------------------------------*/ -@import "sass/35-forms/forms"; -@import "sass/35-forms/checkboxes-radios"; -@import "sass/35-forms/memorable-dates"; -@import "sass/35-forms/segmented-options"; -@import "sass/35-forms/select"; +@import 'sass/35-forms/forms'; +@import 'sass/35-forms/checkboxes-radios'; +@import 'sass/35-forms/memorable-dates'; +@import 'sass/35-forms/segmented-options'; +@import 'sass/35-forms/select'; /*------------------------------------*\ #Layout helpers \*------------------------------------*/ -@import "sass/40-layout-helpers/box"; -@import "sass/40-layout-helpers/center"; -@import "sass/40-layout-helpers/cover"; -@import "sass/40-layout-helpers/cluster"; -@import "sass/40-layout-helpers/frame"; -@import "sass/40-layout-helpers/sidebar"; -@import "sass/40-layout-helpers/switcher"; +@import 'sass/40-layout-helpers/box'; +@import 'sass/40-layout-helpers/center'; +@import 'sass/40-layout-helpers/cover'; +@import 'sass/40-layout-helpers/cluster'; +@import 'sass/40-layout-helpers/frame'; +@import 'sass/40-layout-helpers/sidebar'; +@import 'sass/40-layout-helpers/switcher'; /*------------------------------------*\ #Core components \*------------------------------------*/ -@import "sass/50-core-components/header"; -@import "sass/50-core-components/logo"; -@import "sass/50-core-components/navigation"; -@import "sass/50-core-components/breadcrumbs"; -@import "sass/50-core-components/main"; +@import 'sass/50-core-components/header'; +@import 'sass/50-core-components/logo'; +@import 'sass/50-core-components/navigation'; +@import 'sass/50-core-components/breadcrumbs'; +@import 'sass/50-core-components/main'; //@import "sass/50-core-components/hero"; -@import "sass/50-core-components/text"; -@import "sass/50-core-components/quotes"; -@import "sass/50-core-components/images"; -@import "sass/50-core-components/avatars"; -@import "sass/50-core-components/video"; -@import "sass/50-core-components/notes"; +@import 'sass/50-core-components/text'; +@import 'sass/50-core-components/quotes'; +@import 'sass/50-core-components/images'; +@import 'sass/50-core-components/avatars'; +@import 'sass/50-core-components/video'; +@import 'sass/50-core-components/notes'; //@import "sass/50-core-components/social"; -@import "sass/50-core-components/cards"; -@import "sass/50-core-components/shelves"; -@import "sass/50-core-components/progress-indicator"; +@import 'sass/50-core-components/cards'; +@import 'sass/50-core-components/shelves'; +@import 'sass/50-core-components/progress-indicator'; //@import "sass/50-core-components/payment-details"; -@import "sass/50-core-components/tag-list"; +@import 'sass/50-core-components/tag-list'; //@import "sass/50-core-components/fifty-fifty"; -@import "sass/50-core-components/collapsibles"; -@import "sass/50-core-components/carousel"; -@import "sass/50-core-components/search"; +@import 'sass/50-core-components/collapsibles'; +@import 'sass/50-core-components/carousel'; +@import 'sass/50-core-components/search'; //@import "sass/50-core-components/meta-info"; -@import "sass/50-core-components/pagination"; -@import "sass/50-core-components/footer"; +@import 'sass/50-core-components/pagination'; +@import 'sass/50-core-components/footer'; /*------------------------------------*\ @@ -110,13 +112,13 @@ 1. Used purely for the static Amplify site \*------------------------------------*/ -@import "sass/85-amplify/amplify-guide"; /* 1 */ +@import 'sass/85-amplify/amplify-guide'; /* 1 */ /*------------------------------------*\ #Utilities \*------------------------------------*/ -@import "sass/90-utilities/alignments"; -@import "sass/90-utilities/clearfix"; -@import "sass/90-utilities/layout"; -@import "sass/90-utilities/margins"; \ No newline at end of file +@import 'sass/90-utilities/alignments'; +@import 'sass/90-utilities/clearfix'; +@import 'sass/90-utilities/layout'; +@import 'sass/90-utilities/margins'; \ No newline at end of file diff --git a/assets-src/styles/sass/10-functions/_css-custom-props.scss b/assets-src/styles/sass/10-functions/_css-custom-props.scss new file mode 100644 index 0000000..e6ffa45 --- /dev/null +++ b/assets-src/styles/sass/10-functions/_css-custom-props.scss @@ -0,0 +1,47 @@ +/*------------------------------------*\ + #Get CSS custom properties + + Function for retrieving automatically prefixed CSS custom properties + (CSS variables) to ensure they are handled in a consistent, scalable manner. + + See https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88 +\*------------------------------------*/ + +/** + * Basic usage: + * + * .selector { + * color: cssvar(primary-color); + * } + * + * will result in + * + * .selector { + * color: var(--amplify-primary-color); + * } + * + * Overriding the default prefix: + * + * .selector { + * color: cssvar(primary-color, s24); + * } + * + * will result in + * + * .selector { + * color: var(--s24-primary-color); + * } + */ + +// @function cssvar($name, $prefix: amplify) { +// @return var(--#{$prefix}-#{$name}); +// } + +@function cssvar($name, $prefix: amplify, $fallback: null) { + @if $fallback != null { + @return var(--#{$prefix}-#{$name}, #{$fallback}); + } + @else { + @return var(--#{$prefix}-#{$name}); + } +} diff --git a/assets-src/styles/sass/20-mixins/_css-custom-props.scss b/assets-src/styles/sass/20-mixins/_css-custom-props.scss new file mode 100644 index 0000000..75b4f0b --- /dev/null +++ b/assets-src/styles/sass/20-mixins/_css-custom-props.scss @@ -0,0 +1,88 @@ +/*------------------------------------*\ + #Set and override CSS custom properties + + Mixins for setting and overriding automatically prefixed CSS custom properties + (CSS variables) to ensure they are handled in a consistent, scalable manner. + + See https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88 +\*------------------------------------*/ + +/** + * Declare a group of CSS custom properties. + * Each variable in the $css_variables map will be correctly prefixed. + * Double brackets are needed when using the mixin: + * - the first for the @include statement itself, + * - the second to pass the $css_variables map as the first argument + * + * Basic usage: + * + * @include cssvars(( + * font-family: #{"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif}, + * primary-color: #33b5e5, + * secondary-color: #ff500a, + * max-width: rem(20) + * )); + * + * will result in + * + * --amplify-font-family: value; + * --amplify-primary-color: value; + * --amplify-secondary-color: value; + * --amplify-max-width: value; + * + * Overriding the default prefix: + * + * @include cssvars(( + * font-family: #{"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif}, + * primary-color: #33b5e5, + * secondary-color: #ff500a, + * max-width: rem(20) + * ), s24); + * + * will result in + * + * --s24-font-family: value; + * --s24-primary-color: value; + * --s24-secondary-color: value; + * --s24-max-width: value; + */ + +@mixin cssvars($css_variables, $prefix: amplify) { + @each $name, $value in $css_variables { + --#{$prefix}-#{$name}: #{$value}; + } +} + + +/** + * Override a CSS custom property value. + * + * Basic usage: + * + * @include cssvar(primary-color, #ff69b4); + * + * will result in + * + * --amplify-max-width: newvalue; + * + * Overriding the default prefix as well as the custom property value: + * + * @include cssvar(primary-color, #ff69b4, s24); + * + * will result in + * + * --s24-max-width: newvalue; + */ + +// @mixin cssvar ($name, $value: '', $prefix: amplify) { +// --#{$prefix}-#{$name}: #{$value}; +// } + +@mixin cssvar($name, $value: null, $prefix: amplify, $fallback: null) { + @if $value != null { + --#{$prefix}-#{$name}: #{$value}; + } + @else if $fallback != null { + --#{$prefix}-#{$name}: #{$fallback}; + } +} From d517efc10f13e92def8a6cf415d6046243118ebc Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:10:20 +0000 Subject: [PATCH 02/18] Update box layout to introduce CSS custom props --- .../styles/sass/40-layout-helpers/_box.scss | 28 +++++++++---------- web/amplify/layout-helpers/box.html | 15 +++++----- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/assets-src/styles/sass/40-layout-helpers/_box.scss b/assets-src/styles/sass/40-layout-helpers/_box.scss index 51f48fe..e98c9cb 100644 --- a/assets-src/styles/sass/40-layout-helpers/_box.scss +++ b/assets-src/styles/sass/40-layout-helpers/_box.scss @@ -6,27 +6,25 @@ `.l-box` should have borders and/or padding on all sides, or none at all. Otherwise it's not a box, but something more specific. - 1. High contrast themes tend to eliminate background-color. If no - border is set on the box, we need to apply a transparent outline to - maintain the box shape. The negative outline-offset moves the outline - inside the perimeter so it behaves like a border and doesn't add to - the overall size. + 1. Forced colors mode (e.g. Windows High Contrast mode) may eliminate + background-color. In this mode, if a box has no border the edges of the box + may not be apparent. The transparent outline imitates a border, but it is + only visible when in forced colors mode. The negative outline-offset moves + the outline inside the perimeter of the box so it acts like a border and + doesn't add to its overall size. \*------------------------------------*/ .l-box { - border: 1px solid; + @include cssvars(( + box-padding: rem(24) + )); + border: solid 2px; display: block; - padding: rem(24); + padding: cssvar(box-padding); } - -.l-box--no-padding { - padding: 0; -} - - .l-box--no-border { border: none; - outline: 1px solid transparent; /* 1 */ - outline-offset: -1px; /* 1 */ + outline: 2px solid transparent; /* See note 1 above */ + outline-offset: -2px; /* See note 1 above */ } \ No newline at end of file diff --git a/web/amplify/layout-helpers/box.html b/web/amplify/layout-helpers/box.html index 4cd43c7..426acfb 100644 --- a/web/amplify/layout-helpers/box.html +++ b/web/amplify/layout-helpers/box.html @@ -91,26 +91,27 @@

Box

The box layout helper is a simple container for grouping content within a defined region. It uses the class l-box.

Box deliberately treats padding and borders equally on all sides.

If your container needs asymmetrical styling, then it's a container with a more specific purpose and not a box.

+

Note: the background colour is purely for the examples on this site and is not part of the default styling.

-

Default box

+

Default box layout

Default box, with padding and border
-
+

Box without padding

-
Box with no padding
+
Box with no padding

Box without border

-
Box with no border
+
Box with no border: note the use of the l-box--no-border helper class
-
+

Box without padding or border

-
Box with no padding and no border
+
Box with no padding and no border: note the use of the l-box--no-border helper class

Considerations

-

Because high contrast themes can eliminate background-color, the l-box--no-border modifier class adds a transparent outline so that the shape of the box remains apparent. Negative outline-offset moves the outline inside the box perimeter so that it doesn't impact its overall size.

+

Because forced colors mode (e.g. Windows High Contrast mode) may eliminate background-color, the l-box--no-border helper class adds a transparent outline so that the edges of the box are still visible. Negative outline-offset moves the outline inside the box perimeter so that it doesn't impact its overall size.

From 1ab93d0eabc1d156a08a2a6548597fd2f76647ef Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:10:50 +0000 Subject: [PATCH 03/18] Update center layout to introduce CSS custom props --- .../styles/sass/40-layout-helpers/_center.scss | 14 +++++++++----- web/amplify/layout-helpers/center.html | 10 ++++++++-- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/assets-src/styles/sass/40-layout-helpers/_center.scss b/assets-src/styles/sass/40-layout-helpers/_center.scss index 2472adc..23e0029 100644 --- a/assets-src/styles/sass/40-layout-helpers/_center.scss +++ b/assets-src/styles/sass/40-layout-helpers/_center.scss @@ -3,17 +3,21 @@ From https://absolutely.every-layout.dev/layouts/center/ - `.l-center` creates a horizontally centered container. + `.l-center` creates a horizontally centered container for holding content. 1. We use left and right padding to add some minimum space between the contents of `.l-center` and the edges of the parent element or viewport. To avoid making the content narrower than intended, we add an exception - to our global box-sizing rule (defined in 30-base/_reset.scss). + to our global box-sizing rule (defined in 30-base/_box-sizing.scss). \*------------------------------------*/ .l-center { - box-sizing: content-box /* 1 */; + @include cssvars(( + center-width-max: rem($max-inline-size), + center-padding-x: 5vw + )); + box-sizing: content-box; /* See note 1 above */ margin-inline: auto; - max-inline-size: rem($max-inline-size); - padding-inline: 5vw; + max-inline-size: cssvar(center-width-max); + padding-inline: cssvar(center-padding-x); } \ No newline at end of file diff --git a/web/amplify/layout-helpers/center.html b/web/amplify/layout-helpers/center.html index 7c9886f..c5673f0 100644 --- a/web/amplify/layout-helpers/center.html +++ b/web/amplify/layout-helpers/center.html @@ -89,10 +89,16 @@

Center

The center layout helper creates a vertical strip of content inside a given container element, with equal spacing on either side. It uses the class l-center. This technique is used on the main element (albeit without using the l-center class).

-

Padding on the sides of the center layout helper maintains a space between its contents and the edges of the parent container, even when the parent is narrower than the max-width of the center layout.

-

The center layout helper uses an exception to the global box-sizing: border-box; declaration. It uses box-sizing: content-box; to prevent the padding from making the content narrower than intended.

+

Padding on the sides of the center layout helper maintains a space between its contents and the edges of the parent container, even when the parent is narrower than the max-inline-size of the center layout.

+

The center layout helper uses an exception to the global box-sizing: border-box; declaration. It uses box-sizing: content-box; to prevent the padding from making the content area narrower than intended.

+

Note: the background colour is purely for the examples on this site and is not part of the default styling.

+

Default center layout

+
Center layout in action
+
+
+

Modified center: reduced maximum width

Center layout in action
From 5f84f2b1ac29867384b286c52493bd3b4cd7c4f2 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:11:57 +0000 Subject: [PATCH 04/18] Update cluster layout - introduce CSS custom props - make use of flexbox gap for spacing --- .../sass/40-layout-helpers/_cluster.scss | 36 +++++--------- web/amplify/layout-helpers/cluster.html | 47 ++++++++++++------- 2 files changed, 40 insertions(+), 43 deletions(-) diff --git a/assets-src/styles/sass/40-layout-helpers/_cluster.scss b/assets-src/styles/sass/40-layout-helpers/_cluster.scss index 9b83937..c17e1aa 100644 --- a/assets-src/styles/sass/40-layout-helpers/_cluster.scss +++ b/assets-src/styles/sass/40-layout-helpers/_cluster.scss @@ -7,34 +7,20 @@ are liable to wrap. Use the Cluster to align any groups of horizontally laid out elements to the left or right, or in the center, with even spacing between elements. + + Note: There is no spacing in browsers that don't support the flexbox gap property. \*------------------------------------*/ /** -Suppress horizontal scrolling caused by the negative margin -in some circumstances. +We use flexbox to configure the elements into clusters without creating white space. +The gap property specifies the spacing. We can control how we align items within +the cluster by optionally using 'align-items` and/or `justify-content`. */ .l-cluster { - overflow: hidden; -} - - -/** -We use flexbox to configure the elements into clusters without creating -white space. We can control how we align items within the cluster, -by using 'align-items` and `justify-content`. - */ -.l-cluster > * { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin: rem(-10); -} - - -/** -We apply an even, symmetrical margin to the elements that we wish to space -out, but halve it to to account for 'doubling up' at the edges. - */ -.l-cluster.l-cluster > * > * { - margin: rem(10); + @include cssvars(( + cluster-gap: rem(10) + )); + display: flex; + flex-wrap: wrap; + gap: cssvar(cluster-gap); } \ No newline at end of file diff --git a/web/amplify/layout-helpers/cluster.html b/web/amplify/layout-helpers/cluster.html index 4b15a9c..fc997ce 100644 --- a/web/amplify/layout-helpers/cluster.html +++ b/web/amplify/layout-helpers/cluster.html @@ -88,26 +88,37 @@

Cluster

-

The cluster layout helper suits any group of elements that differ in length, are liable to wrap and need even spacing between them, e.g. lists of tags or groups of buttons. It uses the class l-cluster.

-

Cluster needs an inner flexbox container - in the following example it's provided by the ul. Flexbox gives us control of the alignment of items inside.

-

The cluster items - li in this example - sit within this container. Each item has a margin on all sides.

-

The flexbox container has a negative margin of the same size as the cluster items, creating even spacing between them. overflow: hidden; is used to tidy up the edges.

+

The cluster layout helper suits any group of elements that differ in length, are liable to wrap and need even spacing between them, e.g. lists of tags or groups of buttons. It uses the class l-cluster to create a flexbox container - the ul in the following example. Flexbox gives us control of the alignment of the child items - li in this example - via properties like align-items and justify-content. It also gives us control over the amount of internal spacing via the gap property.

-
- -
+

Default cluster layout

+ +
+
+

Modified center layout: increased spacing

+
From bab4252e7f895a271f0b54ac109a1d8c1a0bc563 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:12:13 +0000 Subject: [PATCH 05/18] Update cover layout to introduce CSS custom props --- .../styles/sass/40-layout-helpers/_cover.scss | 21 ++++++++++++------- web/amplify/layout-helpers/cover.html | 3 ++- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/assets-src/styles/sass/40-layout-helpers/_cover.scss b/assets-src/styles/sass/40-layout-helpers/_cover.scss index 69ecb59..2b9d43d 100644 --- a/assets-src/styles/sass/40-layout-helpers/_cover.scss +++ b/assets-src/styles/sass/40-layout-helpers/_cover.scss @@ -4,24 +4,29 @@ From https://absolutely.every-layout.dev/layouts/cover/ `.l-cover` uses Flexbox to vertically center a principal item - of content. It is given a min-block-size value to achieve this - which could be 100vh, or less. + of content. It is given a min-block-size (minimum height) value + to achieve this which could be 100vh, or less. - Horizontal centering of content can be achieved using the `.l-center` - layout within `.l-cover`, or with the `.u-center` utility found in - /90-utilities/layout + Horizontal centering of content inside can be achieved by placing + an element with the `.l-center` class inside of `.l-cover` or by + using the `.u-center` utility class found in /90-utilities/layout \*------------------------------------*/ .l-cover { + @include cssvars(( + cover-min-height: 30vh, + cover-padding: rem(20), + cover-margin-inner-y: rem(20) + )); display: flex; flex-direction: column; - min-block-size: 30vh; - padding: 1rem; + min-block-size: cssvar(cover-min-height); + padding: cssvar(cover-padding); } .l-cover > * { - margin-block: 1rem; + margin-block: cssvar(cover-margin-inner-y); } diff --git a/web/amplify/layout-helpers/cover.html b/web/amplify/layout-helpers/cover.html index 7a2aaf8..b814b9c 100644 --- a/web/amplify/layout-helpers/cover.html +++ b/web/amplify/layout-helpers/cover.html @@ -89,6 +89,7 @@

Cover

The cover layout helper creates a container with a minimum height to hold vertically centered content, ideal for "above the fold" hero blocks and sections needing visual prominence. It uses the classes l-cover for the container and principal for the content to be centered.

+

Note: the background colour is purely for the examples on this site and is not part of the default styling.

Cover with horizontal centering using a utility class

@@ -114,7 +115,7 @@

Cover with optional header and footer content

Considerations

-

By adding a class to "Header" and/or "Footer" we could then use align-self: flex-end; to shift them to the far edge of cover.

+

If we were to add a class to "Header" and/or "Footer" we could target this and apply align-self: flex-end; to move them to the far edge of cover.

From 5d3f9c702cd8594ab4558e266030d419acbbea86 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:13:44 +0000 Subject: [PATCH 06/18] Update frame layout - introduce CSS custom props - make use of CSS aspect ratio instead of padding hack --- .../styles/sass/40-layout-helpers/_frame.scss | 58 ++++++------------- web/amplify/layout-helpers/frame.html | 43 +++++++------- 2 files changed, 40 insertions(+), 61 deletions(-) diff --git a/assets-src/styles/sass/40-layout-helpers/_frame.scss b/assets-src/styles/sass/40-layout-helpers/_frame.scss index 7c5d75d..1138384 100644 --- a/assets-src/styles/sass/40-layout-helpers/_frame.scss +++ b/assets-src/styles/sass/40-layout-helpers/_frame.scss @@ -4,11 +4,17 @@ From https://absolutely.every-layout.dev/layouts/frame/ `.l-frame` is most useful for cropping media (images - and video) to a specific aspect ratio. + and video) to a specific aspect ratio. It uses the modern + CSS property `aspect-ratio` rather than the old padding hack. It is not recommended to apply the `.l-frame` class to the
element, as it will interfere with the
. - Instead, place it on or a
inside of
. + Instead, place it on a
(or , if employing art + direction to change not just image dimensions but also aspect + ratio) inside of
. + + See https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction + to learn more about when to use the element. \*------------------------------------*/ .l-frame { @@ -17,19 +23,18 @@ position: relative; } - -.l-frame > * { - align-items: center; - display: flex; - inset-block-end: 0; - inset-block-start: 0; - inset-inline-end: 0; - inset-inline-start: 0; - justify-content: center; - position: absolute; +.l-frame { + @include cssvars(( + frame-x: 16, + frame-y: 9, + )); + align-items: center; + aspect-ratio: cssvar(frame-x) / cssvar(frame-y); + display: flex; + justify-content: center; + overflow: hidden; } - .l-frame > iframe, .l-frame > img, .l-frame > video { @@ -37,34 +42,7 @@ inline-size: 100%; } - -.l-frame > iframe { - border: 0; -} - - .l-frame > img, .l-frame > video { object-fit: cover; -} - - -/* Common aspect ratios */ -.l-frame--16-9 { - padding-block-end: 56.25%; -} - - -.l-frame--3-2 { - padding-block-end: 66.67%; -} - - -.l-frame--4-3 { - padding-block-end: 75%; -} - - -.l-frame--square { - padding-block-end: 100%; } \ No newline at end of file diff --git a/web/amplify/layout-helpers/frame.html b/web/amplify/layout-helpers/frame.html index f9b73f2..fbc10ff 100644 --- a/web/amplify/layout-helpers/frame.html +++ b/web/amplify/layout-helpers/frame.html @@ -89,50 +89,51 @@

Frame

The frame layout helper is useful for cropping media (images and video) to a specific aspect ratio. It uses the class l-frame and additional modifier classes for pre-defined aspect ratios. These modifier classes determine the amount of vertical padding on the frame, which then acts as a window onto the content inside.

+

Note: the figures that follow have a maximum width applied purely for the examples on this site.

16:9 aspect ratio

-
-
- +
+
+ Tabby cat
-
An example of the 16:9 frame modifier
+
The default aspect ratio for the frame layout

3:2 aspect ratio

-
-
- +
+
+ Tabby cat
-
An example of the 3:2 frame modifier
+
Modified to a 3:2 aspect ratio

4:3 aspect ratio

-
-
- +
+
+ Tabby cat
-
An example of the 4:3 frame modifier
+
Modified to a 4:3 aspect ratio
-

Square aspect ratio

-
-
- +

1:1 aspect ratio

+
+
+ Tabby cat
-
An example of the square frame modifier
+
A 1:1 aspect ratio results in a square image

Considerations

Figure/figcaption use

-

If using figure with figcaption, make sure to apply the l-frame class to an inner div or picture rather than directly to the figure to avoid obscuring the figcaption.

-

Internet Explorer/non-Chromium Edge

-

The default frame layout uses object-fit: cover for images and videos. This is not supported in Internet Explorer or Edge prior to version 16 and in Edge 16-18 it is only supported on images. However, the Chromium Edge browser, which does support object-fit, is now available to systems as far back as Windows 7.

-

If you need broader support you may prefer to forgo object-fit and adapt your instance of the frame to rely on absolute positioning of the contents and hiding any overflow.

+

If using figure with figcaption, make sure to apply the l-frame class to an inner div (or to picture, if employing art direction to serve multiple images with both different image dimensions and aspect ratios) inside the figure rather than directly to the figure to avoid obscuring the caption.

+

Older browsers

+

The default frame layout uses object-fit: cover for images and videos. This is not supported in Edge prior to version 16 and in Edge 16-18 it is only supported on images. However, the Chromium Edge browser, which does support object-fit, is available to systems as far back as Windows 7.

+

If you need broader support you may prefer to forgo object-fit and adapt your instance of the frame layout to rely on absolute positioning of the contents and hiding any overflow.

From 3d94bc350784ce192dd51958a14811021ed84806 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:14:32 +0000 Subject: [PATCH 07/18] Update sidebar layout - introduce CSS custom props - make use of flexbox gap for spacing --- .../sass/40-layout-helpers/_sidebar.scss | 76 ++++++++----------- web/amplify/layout-helpers/sidebar.html | 46 +++++------ 2 files changed, 53 insertions(+), 69 deletions(-) diff --git a/assets-src/styles/sass/40-layout-helpers/_sidebar.scss b/assets-src/styles/sass/40-layout-helpers/_sidebar.scss index 9535069..b1f3cca 100644 --- a/assets-src/styles/sass/40-layout-helpers/_sidebar.scss +++ b/assets-src/styles/sass/40-layout-helpers/_sidebar.scss @@ -11,39 +11,31 @@ point at which this happens is determined by setting a flex-basis on the sidebar panel and a min-inline-size on the other panel. - N.B: because this layout uses Flexbox, we can use the `order` + Because this layout uses Flexbox, we can use the `order` property on either `.not-sidebar` or `.sidebar` (depending upon the source order of the HTML) to determine whether the sidebar sits on the left or right side. + + We can add a gutter between the children of `.l-sidebar` using + the flexbox gap property. Note: There is no spacing in browsers + that don't support the flexbox gap property. \*------------------------------------*/ -/** -Suppress horizontal scrolling caused by the negative margin -in some circumstances. - */ .l-sidebar { - overflow: hidden; -} - - -/** -We target the intermediary wrapper and give it a negative margin -to create a gutter between the `.sidebar` and `.not-sidebar`. - */ -.l-sidebar > * { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin: -0.75rem; -} - - -/** -We apply an even, symmetrical margin to `.sidebar` and `.not-sidebar`, -but halve it to to account for 'doubling up' at the edges. - */ -.l-sidebar > * > * { - margin: 0.75rem; + @include cssvars(( + sidebar-content-width: 60%, + sidebar-bar-width: rem(320), + sidebar-gap: rem(20) + )); + display: flex; + flex-wrap: wrap; + gap: cssvar(sidebar-gap); + + /* Acts as an override for how spacing is handled inside forms, + in case a
uses the `.l-sidebar` class directly. */ + > * + * { + margin-top: 0; + } } @@ -54,29 +46,27 @@ omitted to let the contents of `.sidebar` determine the width of */ .l-sidebar .sidebar { @include stack; - flex-basis: rem(320); + flex-basis: cssvar(sidebar-bar-width); flex-grow: 1; } +/** +Optional modifier class: unset the flex-basis to let the`.sidebar` +contents determine the width of `.sidebar` (e.g. a button, or +an image with a specified width or maximum width). + */ +.l-sidebar .sidebar--intrinsic { + flex-basis: unset; +} + /** The min-inline-size determines the point at which `.sidebar` and `.not-sidebar` will sit side-by-side rather than vertically. This negates the use of a viewport media query. */ -.l-sidebar .not-sidebar { - @include stack; - flex-basis: 0; - flex-grow: 999; - min-inline-size: calc(55% - 1.5rem); -} - - -.l-sidebar--expanded { - inline-size: 100%; -} - - -.l-sidebar .sidebar.sidebar--compact { - flex-basis: rem(180); +.l-sidebar .content { + flex-basis: 0; + flex-grow: 999; + min-inline-size: cssvar(sidebar-content-width); } \ No newline at end of file diff --git a/web/amplify/layout-helpers/sidebar.html b/web/amplify/layout-helpers/sidebar.html index 300d887..00d474c 100644 --- a/web/amplify/layout-helpers/sidebar.html +++ b/web/amplify/layout-helpers/sidebar.html @@ -88,45 +88,39 @@

Sidebar

-

The sidebar layout helper creates a pair of content panels inside a containing element. These two panels stack vertically, until there is enough horizontal space for them to sit alongside each other. One content panel is typically narrower than the other, acting as a "sidebar".

-

The sidebar layout helper needs an inner flexbox container to hold the two panels. The same negative margin technique used for the cluster layout creates gutter spacing between the panels.

-

The point at which the panels sit side-by-side horizontally is determined by a flex-basis property on the narrower panel and a min-width on the wider panel. As there are no viewport media queries, the sidebar layout will nest nicely inside other containers.

-

Considerations

-

It is not recommended to use the sidebar layout helper to create an entire page layout, with a main content area and a sidebar. This is because the technique Amplify uses to manage responsive tables has been found not to work if the table sits within the sidebar layout helper.

+

The sidebar layout helper creates two panels inside a parent container with Flexbox context. These panels stack vertically, until there is enough horizontal space for them to sit alongside each other. One panel is typically narrower than the other, acting as a "sidebar" to the wider "content" panel.

+

The point at which the panels sit side-by-side horizontally is determined by a flex-basis property on the "sidebar" panel and min-inline-size on the "content" panel. We can use the gap property to control the amount of spacing between the panels inside the sidebar layout.

+

As there are no viewport media queries, the sidebar layout will nest nicely inside other containers.

+

Note: the background colour is purely for the examples on this site and is not part of the default styling.

Default sidebar

-
-
Wide panel
-
Narrow "sidebar" panel
-
+
Wide "content" panel
+
Narrow "sidebar" panel
-

Using nested containers for spacing content

+

With nested box layouts

+

To create some space between the edges of the "content" and "sidebar" panels and what's inside them.

-
-
-
Wide panel
-
-
-
Narrow "sidebar" panel
-
+
+
Wide "content" panel
+
+
+
Narrow "sidebar" panel

Using intrinsic content width for the sidebar

-
- - - - -
-
-
-

We can choose to not specify a width on the narrow "sidebar" panel (by not declaring a flex-basis value) and let the content of the sidebar determine how wide it is. The preceding example shows how to override the default styles by using an additional class and omitting the sidebar class.

+

Note the use of the sidebar--intrinsic helper class.

+
+ +
+ +
+
From 7c1988ac0f83ebf5618cf7ff8a8bf511bab1ed1e Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:15:27 +0000 Subject: [PATCH 08/18] Rescind defunct advice for responsive tables Now safe to use within sidebar layout --- web/amplify/fundamentals/tables.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/web/amplify/fundamentals/tables.html b/web/amplify/fundamentals/tables.html index 69fedf5..f0689c4 100644 --- a/web/amplify/fundamentals/tables.html +++ b/web/amplify/fundamentals/tables.html @@ -201,10 +201,7 @@

Responsive tables

Notes on responsive tables

-
    -
  • The scrolling behaviour described above will not work if the table sits within a sidebar layout helper, because the sidebar layout helper tends to allow the table to grow.
    • -
  • Unless a min-width is set on the td elements in the table, the cells will tend to shrink to allow the table to fit the available width, with content wrapping over multiple lines.
    • -
+

Unless a min-inline-size (minimum width) is set on the td elements in the table, the cells will tend to shrink to allow the table to fit the available width, with content wrapping over multiple lines.

From f32e600d3f162b0ad4cefd9ffe5a04f1d49d2b7a Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:16:53 +0000 Subject: [PATCH 09/18] Update switcher layout - introduce CSS custom props - make use of flexbox gap for spacing --- .../sass/40-layout-helpers/_switcher.scss | 79 ++++++++++++------- web/amplify/layout-helpers/switcher.html | 46 +++++++---- 2 files changed, 81 insertions(+), 44 deletions(-) diff --git a/assets-src/styles/sass/40-layout-helpers/_switcher.scss b/assets-src/styles/sass/40-layout-helpers/_switcher.scss index 90361d0..f343035 100644 --- a/assets-src/styles/sass/40-layout-helpers/_switcher.scss +++ b/assets-src/styles/sass/40-layout-helpers/_switcher.scss @@ -1,44 +1,69 @@ /*------------------------------------*\ - #Switcher layout helper + #Switcher layout helpers - Uses this to switch between vertical and horizontal layouts: - https://www.freecodecamp.org/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/ + There are two types of switcher layout. Both types switch a + Flexbox context between a horizontal and a vertical layout + at a given, CONTAINER-BASED breakpoint, rather than using + viewport media queries. Child elements are always of equal width. - `.l-switcher` switches a Flexbox context between a horizontal and a - vertical layout at a given, CONTAINER-BASED breakpoint, rather than - using viewport media queries. + Use `.l-switcher` if you do not want any spacing between children. - The child elements in the horizontal configuration will be of equal - width. + Use `.l-switcher-gap` if you do want spacing between children, which + incorporates flexbox gap in the formula. Note: There is no spacing + in browsers that don't support the flexbox gap property. - For gutter spacing, apply padding to the flex items and an equal - negative margin to the flex container. This will double up, - so use half the intended value. + 1. The default value of 690 corresponds to the desired breakpoint value, + while 100% corresponds to the width of the parent container. + This calculation results in a value that's either bigger than + the max-inline-size or smaller than the min-inline-size, + so that either of these properties is applied instead. + See https://www.freecodecamp.org/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/ + + 2. Determines child width in the single column, vertical configuration + + 3. Determines how many children in a row in the horizontal configuration \*------------------------------------*/ +/** +Switcher without spacing - make sure that the numbers used in the +switcher-breakpoint and temp variables always match. + */ .l-switcher { - overflow: hidden; + @include cssvars(( + switcher-row-qty: 2, + switcher-breakpoint: 690, + temp: 690px + )); + display: flex; + flex-flow: row wrap; } - .l-switcher > * { - display: flex; - flex-flow: row wrap; + inline-size: calc(#{cssvar(temp)} * cssvar(switcher-breakpoint) - 100% * cssvar(switcher-breakpoint)); /* See note 1 above */ + max-inline-size: 100%; /* See note 2 above */ + min-inline-size: calc(100% / #{cssvar(switcher-row-qty)}); /* See note 3 above */ } /** -1. Determines the item width in the single column, vertical configuration - -2. Determines how many items will be in a row in the horizontal configuration - -3. The 690 value matches the desired breakpoint value. The 100% corresponds to -the width of the columns' parent container. This calculation will create a -value that's either bigger than the max-inline-size or smaller than the -min-inline-size, so that either of these properties is applied instead. +Switcher with spacing - make sure that the numbers used in the +switcher-breakpoint and temp variables always match. */ -.l-switcher > * > * { - max-inline-size: 100%; /* 1 */ - min-inline-size: 50%; /* 2 */ - inline-size: calc(690px * 690 - 100% * 690); /* 3 */ +.l-switcher-gap { + @include cssvars(( + switcher-row-qty: 2, + switcher-gap-qty: 1, + switcher-gap: rem(20), + switcher-breakpoint: 690, + temp: 690px + )); + display: flex; + flex-flow: row wrap; + gap: cssvar(switcher-gap); +} + +.l-switcher-gap > * { + inline-size: calc(#{cssvar(temp)} * cssvar(switcher-breakpoint) - 100% * cssvar(switcher-breakpoint)); /* See note 1 above */ + max-inline-size: 100%; /* See note 2 above */ + min-inline-size: calc( ( 100% - (#{cssvar(switcher-gap-qty)} * #{cssvar(switcher-gap)}) ) / #{cssvar(switcher-row-qty)} ); /* See note 3 above */ } \ No newline at end of file diff --git a/web/amplify/layout-helpers/switcher.html b/web/amplify/layout-helpers/switcher.html index a9973cb..c0c3f0e 100644 --- a/web/amplify/layout-helpers/switcher.html +++ b/web/amplify/layout-helpers/switcher.html @@ -88,35 +88,47 @@

Switcher

-

The switcher layout helper switches the alignment of items from horizontal to vertical at a given, container-based breakpoint. It's a good choice for situations where each child item should be considered of equal importance and has an equal width. You will find an example of the switcher on the Amplify home page.

-

As with the cluster and sidebar layouts, an inner flexbox container holds the switcher items, and the negative margin technique to create gutter spacing between items.

+

There are two types of switcher layout helper, applied using different classes (see the examples which follow). Both of them switch the alignment of items from horizontal to vertical at a given, container-based breakpoint. They are a good choice for situations where each child item should be considered of equal importance and has an equal width.

As there are no viewport media queries, the switcher will nest nicely inside other containers.

+

Switcher with no spacing between items

+

Use the l-switcher class. A box layout helper has been nested in each child item.

-
-
Item 1
-
-
-
Item 2
-
-
-
Item 3
-
+
Item 1
+
+
+
Item 2
+
+
+
Item 3
+
+
+
+
+

Switcher with spacing between items

+

Use the l-switcher-gap class. A box layout helper has been nested in each child item.

+
+
+
Item 1
+
+
+
Item 2
+
+
+
Item 3

Considerations

-

The default switcher layout behaves as follows:

+

The default switcher behaviour is as follows:

    -
  • When the inner flexbox container is less than 690px wide, the child items sit vertically.
    • -
  • Otherwise, the child items sit horizontally.
    • -
  • The number of columns in a row is two (determined by the min-width percentage used on the child items).
    • +
  • When the parent container is less than 690px wide, child items of switcher stack vertically.
    • +
  • Otherwise, child items sit horizontally in rows.
    • +
  • The maximum number of children per row is two.
-

For gutter spacing, apply padding to the flex items and an equal negative margin to the flex container. This will double up, so use half the intended value.

-

Use an additional class to override the default behaviour.

From 3f20e293ded86586cfbec39e3714bb7441401817 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:17:30 +0000 Subject: [PATCH 10/18] Update styles for layout examples on Amplify site --- .../sass/85-amplify/_amplify-guide.scss | 58 ++++++++++++++----- 1 file changed, 43 insertions(+), 15 deletions(-) diff --git a/assets-src/styles/sass/85-amplify/_amplify-guide.scss b/assets-src/styles/sass/85-amplify/_amplify-guide.scss index 868f8a3..43fb761 100644 --- a/assets-src/styles/sass/85-amplify/_amplify-guide.scss +++ b/assets-src/styles/sass/85-amplify/_amplify-guide.scss @@ -138,31 +138,59 @@ margin-block-start: 1rem; } +.amplify .l-switcher-gap.teasers .card { + padding: rem(24); +} -.amplify .l-switcher.teasers { - overflow: visible; + +/** +Styling examples shown on the Amplify website + */ +.amplify .component .l-box, +.amplify .component .l-center, +.amplify .component .l-cover { + background-color: $neutral-30; } -.amplify .l-switcher.teasers > * { - margin: rem(-12); +.amplify .component .l-sidebar > * { + background-color: $accent-20; } -.amplify .l-switcher.teasers > * > * { - min-inline-size: 33%; - padding: rem(12); +.amplify .box-custom .l-box { + @include cssvar(box-padding, 0); } -.amplify .l-switcher.teasers .card { - padding: rem(24); +.amplify .center-custom .l-center { + @include cssvar(center-width-max, rem(500)); } +.amplify .cluster-custom .l-cluster { + @include cssvar(cluster-gap, rem(24)); +} -.amplify .search-bar .not-sidebar { - min-inline-size: 70%; +.amplify .frame-example { + max-inline-size: rem(400); +} + +.amplify .frame-example .ratio-1-1 { + @include cssvar(frame-x, 1); + @include cssvar(frame-y, 1); } -// To omit the `flex-basis` in this example we haven't used the `.sidebar` class -// on this element. So we must manually re-apply the required `flex-grow` property. -.amplify .search-bar button { - flex-grow: 1; +.amplify .frame-example .ratio-3-2 { + @include cssvar(frame-x, 3); + @include cssvar(frame-y, 2); +} + +.amplify .frame-example .ratio-4-3 { + @include cssvar(frame-x, 4); + @include cssvar(frame-y, 3); +} + +.amplify .search-bar.l-sidebar > * { + background-color: transparent; +} + +.amplify .search-bar .content { + min-inline-size: 70%; } \ No newline at end of file From 0aecd4a5b866cd895ac6624e1ea0645289f904a3 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:17:46 +0000 Subject: [PATCH 11/18] Update switcher layout on Amplify homepage --- web/amplify/index.html | 56 ++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/web/amplify/index.html b/web/amplify/index.html index 16f8eef..7e7e686 100644 --- a/web/amplify/index.html +++ b/web/amplify/index.html @@ -77,42 +77,40 @@

Amplify

Welcome to the Studio 24 starter kit for design and front-end development.

-
+
-
-
-
-

Fundamentals

-

Understand how Amplify handles the fundamentals, e.g. colours, typography, buttons/links, lists, tables, forms, spacing and print styles.

- Browse fundamentals -
+
+
+

Fundamentals

+

Understand how Amplify handles the fundamentals, e.g. colours, typography, buttons/links, lists, tables, forms, spacing and print styles.

+ Browse fundamentals
-
-
-
-

Layout helpers

-

Explore the basic layout helpers, which can be combined and customised to make a variety of components and templates.

- Browse layout helpers -
+
+
+
+
+

Layout helpers

+

Explore the basic layout helpers, which can be combined and customised to make a variety of components and templates.

+ Browse layout helpers
-
-
-
-

Core components

-

Examples of commonly required components, such as breadcrumbs and pagination.

- Browse core components -
+
+
+
+
+

Core components

+

Examples of commonly required components, such as breadcrumbs and pagination.

+ Browse core components
-
-
-
-

Advanced components

-

Examples of components with JavaScript enhancements, such as collapsible content.

- Browse advanced components -
+
+
+
+
+

Advanced components

+

Examples of components with JavaScript enhancements, such as collapsible content.

+ Browse advanced components
From 5527782ecb40e63e4b56d73bbe62524274d60a39 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:19:49 +0000 Subject: [PATCH 12/18] Remove margins when using `.clean-list` Resolves display issue for lists using updated cluster layout --- assets-src/styles/sass/30-base/_lists.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets-src/styles/sass/30-base/_lists.scss b/assets-src/styles/sass/30-base/_lists.scss index 466d200..e5e8563 100755 --- a/assets-src/styles/sass/30-base/_lists.scss +++ b/assets-src/styles/sass/30-base/_lists.scss @@ -39,12 +39,14 @@ the number of items in a list is announced, add role="list" to the
    */ .clean-list { list-style: none; + margin: 0; padding: 0; li, ol, ul { - padding: 0; + margin: 0; + padding: 0; } } From 7c6722aaf2fd877bb8365a1101b66f86608d935b Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:21:04 +0000 Subject: [PATCH 13/18] Tidy indentation --- assets-src/styles/sass/00-settings/_breakpoints.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets-src/styles/sass/00-settings/_breakpoints.scss b/assets-src/styles/sass/00-settings/_breakpoints.scss index 07bac3e..50572a9 100644 --- a/assets-src/styles/sass/00-settings/_breakpoints.scss +++ b/assets-src/styles/sass/00-settings/_breakpoints.scss @@ -13,6 +13,6 @@ $bp-tab-landscape: 1024; $bp-lap: 1280; $bp-desk: 1440; -$max-inline-size: 1120; +$max-inline-size: 1120; $text-measure: 660; /* 1 */ \ No newline at end of file From edff8fb7e02821f9fce63cc1e3182c9301d5435f Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Sat, 9 Nov 2024 18:23:41 +0000 Subject: [PATCH 14/18] Fix pagination component markup Reflects update to cluster layout helper --- web/amplify/core-components/pagination.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/amplify/core-components/pagination.html b/web/amplify/core-components/pagination.html index 1c32821..c79c798 100644 --- a/web/amplify/core-components/pagination.html +++ b/web/amplify/core-components/pagination.html @@ -98,8 +98,8 @@

    Pagination

-