diff --git a/.changeset/good-ducks-share.md b/.changeset/good-ducks-share.md new file mode 100644 index 000000000..24457659e --- /dev/null +++ b/.changeset/good-ducks-share.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +The `o-rhythm--default` modifier may now be used to revert to default spacing in nested rhythm objects. diff --git a/.changeset/lazy-bees-perform.md b/.changeset/lazy-bees-perform.md new file mode 100644 index 000000000..bbb8f9ff2 --- /dev/null +++ b/.changeset/lazy-bees-perform.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Elements with a class containing 'heading' will now be affected by `o-rhythm--generous-headings` diff --git a/src/mixins/_spacing.scss b/src/mixins/_spacing.scss index effb506b8..85d6f211a 100644 --- a/src/mixins/_spacing.scss +++ b/src/mixins/_spacing.scss @@ -15,14 +15,19 @@ } // Where custom properties are supported, also allow headings to receive their - // own rhythm. + // own rhythm. Note that we also apply this selector to classes containing + // `heading`, which covers cases like the `c-heading` component or element + // classes like `{component-name}__heading`. This encourages developers to + // use semantic markup for headings without worrying about compatibility with + // rhythm helpers. @supports (--custom: properties) { & > * + h1, & > * + h2, & > * + h3, & > * + h4, & > * + h5, - & > * + h6 { + & > * + h6, + & > * + [class*='heading'] { margin-top: var(--rhythm-headings); } } diff --git a/src/objects/rhythm/demo/article.twig b/src/objects/rhythm/demo/article.twig index 5617c3498..e46a22023 100644 --- a/src/objects/rhythm/demo/article.twig +++ b/src/objects/rhythm/demo/article.twig @@ -17,7 +17,13 @@
That seems simple enough. But when it comes to defining what is responsive, things get a bit fuzzier.
-The best way to understand where the differences of opinion exist is by looking at an real life example: is Google Plus responsive?
{% embed '@cloudfour/objects/embed/embed.twig' with { class: 'o-embed--wide' } only %} {% block content %} diff --git a/src/objects/rhythm/rhythm.scss b/src/objects/rhythm/rhythm.scss index a57053af6..d8b773a4d 100644 --- a/src/objects/rhythm/rhythm.scss +++ b/src/objects/rhythm/rhythm.scss @@ -24,6 +24,10 @@ --rhythm: #{size.$rhythm-generous}; } +.o-rhythm--default { + --rhythm: #{size.$rhythm-default}; +} + // Heading modifiers .o-rhythm--generous-headings { diff --git a/src/objects/rhythm/rhythm.stories.mdx b/src/objects/rhythm/rhythm.stories.mdx index 3a3298eb9..d0db66fc7 100644 --- a/src/objects/rhythm/rhythm.stories.mdx +++ b/src/objects/rhythm/rhythm.stories.mdx @@ -75,9 +75,11 @@ While `o-rhythm--generous` is intended for separating distinct content chunks wi +To revert to the default spacing in nested rhythm objects, use the `o-rhythm--default` modifier. + ## Heading Modifiers -The `o-rhythm--generous-headings` modifier helps differentiate sections of articles (or similarly long prose content) by adding more whitespace before headings than other elements. +The `o-rhythm--generous-headings` modifier helps differentiate sections of articles (or similarly long prose content) by adding more whitespace before headings (or elements with a class name containing `heading`, such as [our heading component](/docs/components-heading--levels#heading)). +