From 1c9c8debd32779b10a0ffaee1e42b184fc5a4b3a Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 22 Apr 2020 15:54:47 -0700 Subject: [PATCH 01/10] Reset default margins --- src/base/_defaults.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/base/_defaults.scss b/src/base/_defaults.scss index a084893d2..afba445a7 100644 --- a/src/base/_defaults.scss +++ b/src/base/_defaults.scss @@ -33,6 +33,27 @@ a { color: colors.$text-action; } +/** + * Remove default spacing from block elements we plan on redefining with our + * own classes and structure. + */ + +blockquote, +dl, +figure, +h1, +h2, +h3, +h4, +h5, +h6, +ol, +p, +pre, +ul { + margin: 0; +} + /** * 1. Block display is usually what we want * 2. Remove strange space-below when inline From a5d0e8baa584f157fcf26683e7aa897e9042f7ea Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 22 Apr 2020 15:54:54 -0700 Subject: [PATCH 02/10] Add size tokens --- src/design-tokens/sizes.yml | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/design-tokens/sizes.yml b/src/design-tokens/sizes.yml index 027b09e24..3db1be023 100644 --- a/src/design-tokens/sizes.yml +++ b/src/design-tokens/sizes.yml @@ -55,3 +55,19 @@ props: value: 2 type: modular/em category: sizing + - name: rhythm_space_minimal + value: -6 + type: modular/em + category: rhythm + - name: rhythm_space_condensed + value: -1 + type: modular/em + category: rhythm + - name: rhythm_space + value: 1 + type: modular/em + category: rhythm + - name: rhythm_space_generous + value: 3 + type: modular/em + category: rhythm From 772737e917d65698dff16281418fca2294c985cf Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 22 Apr 2020 15:55:04 -0700 Subject: [PATCH 03/10] Add rhythm object --- src/objects/rhythm/demo/article.twig | 50 +++++++++++++++++++++++++++ src/objects/rhythm/rhythm.scss | 28 +++++++++++++++ src/objects/rhythm/rhythm.stories.mdx | 12 +++++++ src/objects/rhythm/rhythm.twig | 6 ++++ 4 files changed, 96 insertions(+) create mode 100644 src/objects/rhythm/demo/article.twig create mode 100644 src/objects/rhythm/rhythm.scss create mode 100644 src/objects/rhythm/rhythm.stories.mdx create mode 100644 src/objects/rhythm/rhythm.twig diff --git a/src/objects/rhythm/demo/article.twig b/src/objects/rhythm/demo/article.twig new file mode 100644 index 000000000..30a7f2578 --- /dev/null +++ b/src/objects/rhythm/demo/article.twig @@ -0,0 +1,50 @@ +{% embed '../../container/container.twig' with { class: 'o-container--prose' } %} + {% block content %} + {% embed '../rhythm.twig' %} + {% block content %} +

Defining Responsiveness

+

When people say that something is responsive, what do they mean?

+

I’m not being facetious. I think many of us think we know what is meant, but when you dig deeper, there is disagreement about what it means for something to be responsive.

+

Responsive web design has a clear definition

+

To his credit, Ethan defined responsive web design clearly with three technical pieces:

+
    +
  • Fluid grids
    • +
  • Flexible images
    • +
  • Media queries
    • +
+

That seems simple enough. But when it comes to defining what is responsive, things get a bit fuzzier.

+

Is Google Plus responsive?

+

The best way to understand where the differences of opinion exist is by looking at an real life example: is Google Plus responsive?

+ {% embed '../../embed/embed.twig' with { class: 'o-embed--wide' } %} + {% block content %} + + {% endblock %} + {% endembed %} +

It looks like it might be responsive. The layout varies from one, two or three columns depending on the width of the page. The size of elements on the page change as well.

+

Let’s look at some reasons why Google Plus might not be responsive.

+

Reason #1: Google Plus is not responsive because it has a separate mobile site

+

The first time I cited Google Plus as responsive example, I was told that it didn’t qualify as responsive because it doesn’t go all the way down to support small screens.

+

This is silly to me. Nothing in Ethan’s article says that responsive web design has to support any possible screen resolution.

+

We’re perfectly happy calling things responsive designs that have a fixed width past a certain point on wide screens. And we praise the efforts by the BBC, Guardian, People and others that build a responsive mdot site that will eventually replace their main site.

+

So why would the fact that Google Plus doesn’t support small screens preclude it from being considered responsive?

+

Reason #2: Google Plus doesn’t use media queries

+

Google Plus isn’t using media queries the way you might expect.

+

As far as I can tell, none of the major layout changes you see in Google Plus are handled by media queries. They are controlled in JavaScript.

+

This is similar to Nathan Smith’s Adaptive.js library which puts breakpoints in JavaScript instead of CSS.

+

So by definition, Google Plus is not a responsive web design. It may look like one, but it doesn’t contain the three technical pieces necessary to be a responsive web design.

+

+ {% embed '../../../components/button/button.twig' with { + href: 'https://cloudfour.com/thinks/defining-responsiveness/' + } %} + {% block content %} + Full article + {% include '../../../assets/icons/arrow-right.svg.twig' with { + class: 'c-icon c-icon--inline' + } %} + {% endblock %} + {% endembed %} +

+ {% endblock %} + {% endembed %} + {% endblock %} +{% endembed %} diff --git a/src/objects/rhythm/rhythm.scss b/src/objects/rhythm/rhythm.scss new file mode 100644 index 000000000..ff0c62fc5 --- /dev/null +++ b/src/objects/rhythm/rhythm.scss @@ -0,0 +1,28 @@ +@use '../../design-tokens/sizes.yml'; + +.o-rhythm > * + * { + margin-top: sizes.$rhythm-space; +} + +.o-rhythm--minimal > * + * { + margin-top: sizes.$rhythm-space-minimal; +} + +.o-rhythm--condensed > * + * { + margin-top: sizes.$rhythm-space-condensed; +} + +.o-rhythm--generous > * + * { + margin-top: sizes.$rhythm-space-generous; +} + +.o-rhythm--generous-headings { + & > * + h1, + & > * + h2, + & > * + h3, + & > * + h4, + & > * + h5, + & > * + h6 { + margin-top: sizes.$rhythm-space-generous; + } +} diff --git a/src/objects/rhythm/rhythm.stories.mdx b/src/objects/rhythm/rhythm.stories.mdx new file mode 100644 index 000000000..e7d2f08b2 --- /dev/null +++ b/src/objects/rhythm/rhythm.stories.mdx @@ -0,0 +1,12 @@ +import { Story, Preview, Meta } from '@storybook/addon-docs/blocks'; +import articleDemo from './demo/article.twig'; + + + +# Rhythm + +TODO + + + {articleDemo} + diff --git a/src/objects/rhythm/rhythm.twig b/src/objects/rhythm/rhythm.twig new file mode 100644 index 000000000..dd84ef08f --- /dev/null +++ b/src/objects/rhythm/rhythm.twig @@ -0,0 +1,6 @@ +{% set tagName = tagName|default('div') %} + +<{{tagName}} class="o-rhythm o-rhythm--generous-headings"> + {% block content %} + {% endblock %} + From 7bf02f985dce999d8d71771238b49c0a26f644c1 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 22 Apr 2020 16:59:28 -0700 Subject: [PATCH 04/10] Rename minimal to compact --- src/design-tokens/sizes.yml | 2 +- src/objects/rhythm/rhythm.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/design-tokens/sizes.yml b/src/design-tokens/sizes.yml index 3db1be023..8906d5deb 100644 --- a/src/design-tokens/sizes.yml +++ b/src/design-tokens/sizes.yml @@ -55,7 +55,7 @@ props: value: 2 type: modular/em category: sizing - - name: rhythm_space_minimal + - name: rhythm_space_compact value: -6 type: modular/em category: rhythm diff --git a/src/objects/rhythm/rhythm.scss b/src/objects/rhythm/rhythm.scss index ff0c62fc5..70849d15b 100644 --- a/src/objects/rhythm/rhythm.scss +++ b/src/objects/rhythm/rhythm.scss @@ -4,8 +4,8 @@ margin-top: sizes.$rhythm-space; } -.o-rhythm--minimal > * + * { - margin-top: sizes.$rhythm-space-minimal; +.o-rhythm--compact > * + * { + margin-top: sizes.$rhythm-space-compact; } .o-rhythm--condensed > * + * { From eee526e360f9d0317bea2e19d6382f3469bfa824 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 22 Apr 2020 16:59:48 -0700 Subject: [PATCH 05/10] Add rhythm stories --- src/objects/rhythm/demo/article.twig | 10 +++--- src/objects/rhythm/demo/intro.twig | 7 ++++ src/objects/rhythm/demo/list.twig | 9 ++++++ src/objects/rhythm/demo/sections.twig | 11 +++++++ src/objects/rhythm/demo/summary.twig | 18 +++++++++++ src/objects/rhythm/rhythm.stories.mdx | 46 +++++++++++++++++++++++++-- src/objects/rhythm/rhythm.twig | 2 +- 7 files changed, 95 insertions(+), 8 deletions(-) create mode 100644 src/objects/rhythm/demo/intro.twig create mode 100644 src/objects/rhythm/demo/list.twig create mode 100644 src/objects/rhythm/demo/sections.twig create mode 100644 src/objects/rhythm/demo/summary.twig diff --git a/src/objects/rhythm/demo/article.twig b/src/objects/rhythm/demo/article.twig index 30a7f2578..6e7622648 100644 --- a/src/objects/rhythm/demo/article.twig +++ b/src/objects/rhythm/demo/article.twig @@ -1,6 +1,6 @@ -{% embed '../../container/container.twig' with { class: 'o-container--prose' } %} +{% embed '../../container/container.twig' with { class: 'o-container--prose' } only %} {% block content %} - {% embed '../rhythm.twig' %} + {% embed '../rhythm.twig' with { class: 'o-rhythm--generous-headings' } only %} {% block content %}

Defining Responsiveness

When people say that something is responsive, what do they mean?

@@ -15,7 +15,7 @@

That seems simple enough. But when it comes to defining what is responsive, things get a bit fuzzier.

Is Google Plus responsive?

The best way to understand where the differences of opinion exist is by looking at an real life example: is Google Plus responsive?

- {% embed '../../embed/embed.twig' with { class: 'o-embed--wide' } %} + {% embed '../../embed/embed.twig' with { class: 'o-embed--wide' } only %} {% block content %} {% endblock %} @@ -35,12 +35,12 @@

{% embed '../../../components/button/button.twig' with { href: 'https://cloudfour.com/thinks/defining-responsiveness/' - } %} + } only %} {% block content %} Full article {% include '../../../assets/icons/arrow-right.svg.twig' with { class: 'c-icon c-icon--inline' - } %} + } only %} {% endblock %} {% endembed %}

diff --git a/src/objects/rhythm/demo/intro.twig b/src/objects/rhythm/demo/intro.twig new file mode 100644 index 000000000..8fb897a6f --- /dev/null +++ b/src/objects/rhythm/demo/intro.twig @@ -0,0 +1,7 @@ +{% embed '../rhythm.twig' %} + {% block content %} +

SVG: So Very Good

+

Icon fonts! CSS-only illustrations! High-resolution GIF animations! Today's web designers still regularly and enthusiastically employ these techniques... yet they're all a better fit for SVG, a powerful vector image format that's already old enough to drive a car.

+

Join me for an impassioned introduction to your new favorite image format: What it is, how it works, and why it's so awesome.

+ {% endblock %} +{% endembed %} diff --git a/src/objects/rhythm/demo/list.twig b/src/objects/rhythm/demo/list.twig new file mode 100644 index 000000000..2bcd2b0ae --- /dev/null +++ b/src/objects/rhythm/demo/list.twig @@ -0,0 +1,9 @@ + +{% embed '../rhythm.twig' with { tagName: 'ul', class: 'o-rhythm--compact' } %} + {% block content %} +
  • Accessibility
    • +
  • Design Systems
    • +
  • Performance
    • +
  • Progressive Web Apps
    • + {% endblock %} +{% endembed %} diff --git a/src/objects/rhythm/demo/sections.twig b/src/objects/rhythm/demo/sections.twig new file mode 100644 index 000000000..e41fd59e3 --- /dev/null +++ b/src/objects/rhythm/demo/sections.twig @@ -0,0 +1,11 @@ +{% embed '../rhythm.twig' with { class: 'o-rhythm--generous' } %} + {% block content %} + {% for i in 1..3 %} + {% embed '../../container/container.twig' with { class: 'o-container--prose' } only %} + {% block content %} +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam tellus, auctor non faucibus consequat, dictum et dui. Praesent vitae magna sit amet odio egestas semper. Duis nec tellus ligula. Pellentesque mollis varius pulvinar. Suspendisse eu ultrices quam. In dignissim felis efficitur lorem porttitor porttitor. Aliquam maximus tempus erat ut sagittis.

    + {% endblock %} + {% endembed %} + {% endfor %} + {% endblock %} +{% endembed %} diff --git a/src/objects/rhythm/demo/summary.twig b/src/objects/rhythm/demo/summary.twig new file mode 100644 index 000000000..e75cfabca --- /dev/null +++ b/src/objects/rhythm/demo/summary.twig @@ -0,0 +1,18 @@ +{% embed '../rhythm.twig' with { class: 'o-rhythm--condensed' } %} + {% block content %} +

    Our goals are audacious.

    +

    We believe a small company like ours can have an outsized impact on our customers and the world. We bring this perspective to everything we do.

    +

    + {% embed '../../../components/button/button.twig' with { + href: 'https://cloudfour.com/believes/' + } only %} + {% block content %} + What sets us apart + {% include '../../../assets/icons/arrow-right.svg.twig' with { + class: 'c-icon c-icon--inline' + } only %} + {% endblock %} + {% endembed %} +

    + {% endblock %} +{% endembed %} diff --git a/src/objects/rhythm/rhythm.stories.mdx b/src/objects/rhythm/rhythm.stories.mdx index e7d2f08b2..912011611 100644 --- a/src/objects/rhythm/rhythm.stories.mdx +++ b/src/objects/rhythm/rhythm.stories.mdx @@ -1,12 +1,54 @@ import { Story, Preview, Meta } from '@storybook/addon-docs/blocks'; import articleDemo from './demo/article.twig'; +import listDemo from './demo/list.twig'; +import introDemo from './demo/intro.twig'; +import sectionsDemo from './demo/sections.twig'; +import summaryDemo from './demo/summary.twig'; # Rhythm -TODO +The `o-rhythm` class applies [consistent vertical spacing between child elements](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/). + +The default spacing works great for medium-to-long text content: + + + + {introDemo} + + + +## Modifiers + +For shorter summary content, use the `o-rhythm--condensed` modifier to tighten things up a bit: + + + + {summaryDemo} + + + +`o-rhythm--compact` is best for shorter content chunks that just need a _pinch_ more space: + + + + {listDemo} + + + +While `o-rhythm--generous` is intended for separating distinct content chunks with more whitespace: + + + + {sectionsDemo} + + + +## Heading Modifiers + +The `o-rhythm--generous-headings` helps differentiate sections of articles (or similarly long prose content) by adding more whitespace before headings than other elements. - {articleDemo} + {articleDemo} diff --git a/src/objects/rhythm/rhythm.twig b/src/objects/rhythm/rhythm.twig index dd84ef08f..f23c5795c 100644 --- a/src/objects/rhythm/rhythm.twig +++ b/src/objects/rhythm/rhythm.twig @@ -1,6 +1,6 @@ {% set tagName = tagName|default('div') %} -<{{tagName}} class="o-rhythm o-rhythm--generous-headings"> +<{{tagName}} class="o-rhythm{% if class %} {{class}}{% endif %}"> {% block content %} {% endblock %} From bbcfb44ad7d00ea0754cc8b51d4a638d481e3bed Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 22 Apr 2020 17:01:39 -0700 Subject: [PATCH 06/10] Add comments to CSS --- src/objects/rhythm/rhythm.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/objects/rhythm/rhythm.scss b/src/objects/rhythm/rhythm.scss index 70849d15b..28dfdc7a4 100644 --- a/src/objects/rhythm/rhythm.scss +++ b/src/objects/rhythm/rhythm.scss @@ -1,9 +1,22 @@ @use '../../design-tokens/sizes.yml'; +/** + * This pattern makes heavy use of Heydon Pickering's "lobotomized owl" + * selectors. By adding `margin-top` to adjacent elements, we avoid impacting + * the layout of the container itself (which would complicate alignment of + * adjacent columns). + * + * @see https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ + */ + .o-rhythm > * + * { margin-top: sizes.$rhythm-space; } +/** + * General spacing modifiers + */ + .o-rhythm--compact > * + * { margin-top: sizes.$rhythm-space-compact; } @@ -16,6 +29,10 @@ margin-top: sizes.$rhythm-space-generous; } +/** + * Heading modifiers + */ + .o-rhythm--generous-headings { & > * + h1, & > * + h2, From d09153994ad7f9eae62567717d9f8cc3fcd05424 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Wed, 22 Apr 2020 17:02:47 -0700 Subject: [PATCH 07/10] Fix typo --- src/objects/rhythm/rhythm.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/rhythm/rhythm.stories.mdx b/src/objects/rhythm/rhythm.stories.mdx index 912011611..54acba4f6 100644 --- a/src/objects/rhythm/rhythm.stories.mdx +++ b/src/objects/rhythm/rhythm.stories.mdx @@ -47,7 +47,7 @@ While `o-rhythm--generous` is intended for separating distinct content chunks wi ## Heading Modifiers -The `o-rhythm--generous-headings` 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 than other elements. {articleDemo} From 847e2da804c1fa3d0413f3d1386d3aed41e3bc62 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Thu, 23 Apr 2020 12:50:54 -0700 Subject: [PATCH 08/10] Expand margin overrides --- src/base/_defaults.scss | 55 ++++++++++++++++++++++++----------------- 1 file changed, 32 insertions(+), 23 deletions(-) diff --git a/src/base/_defaults.scss b/src/base/_defaults.scss index afba445a7..96a041bb3 100644 --- a/src/base/_defaults.scss +++ b/src/base/_defaults.scss @@ -13,32 +13,18 @@ } /** - * 1. Prevents custom background colors, iframes, etc. from making page content - * unreadable. - * 2. 100% black can appear somewhat harsh against white. - * 3. Remove white space surrounding page. - */ - -body { - background-color: #fff; /* 1 */ - color: colors.$text-dark; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Default link color - */ - -a { - color: colors.$text-action; -} - -/** - * Remove default spacing from block elements we plan on redefining with our - * own classes and structure. + * Remove default spacing from elements. We'll be managing these directly at a + * layout or component level. + * + * Element list derived from browser default stylesheets. + * + * @see https://stackoverflow.com/a/3980775/5175805 */ blockquote, +body, +button, +dd, dl, figure, h1, @@ -47,13 +33,36 @@ h3, h4, h5, h6, +hr, +input, ol, p, pre, +select, +textarea, ul { margin: 0; } +/** + * 1. Prevents custom background colors, iframes, etc. from making page content + * unreadable. + * 2. 100% black can appear somewhat harsh against white. + */ + +body { + background-color: #fff; /* 1 */ + color: colors.$text-dark; /* 2 */ +} + +/** + * Default link color + */ + +a { + color: colors.$text-action; +} + /** * 1. Block display is usually what we want * 2. Remove strange space-below when inline From 4fda70734b8b107e5fd866708e4809d8473dca7c Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Thu, 23 Apr 2020 12:51:09 -0700 Subject: [PATCH 09/10] Remove unnecessary margins --- src/components/button/button.scss | 1 - src/components/checkbox/checkbox.scss | 1 - src/components/input/input.scss | 1 - 3 files changed, 3 deletions(-) diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 6a94b657a..c87424251 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -33,7 +33,6 @@ font-weight: font.$weight-semibold; height: sizes.$control-height; /* 3 */ line-height: normal; - margin: 0; padding: sizes.$control-pad-vertical sizes.$control-pad-horizontal; position: relative; text-align: center; diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss index 983af3220..4e3d80203 100644 --- a/src/components/checkbox/checkbox.scss +++ b/src/components/checkbox/checkbox.scss @@ -30,7 +30,6 @@ flex: none; /* 3 */ font: inherit; /* 4 */ height: sizes.$toggle-medium; - margin: 0; padding: 0; position: relative; transition-duration: motion.$speed-quick; diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 6d8531e62..3e89fc6f6 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -27,7 +27,6 @@ font-style: normal; height: sizes.$control-height; /* 2 */ line-height: normal; /* 3 */ - margin: 0; outline: none; padding: sizes.$control-pad-vertical sizes.$control-text-inset; -webkit-text-fill-color: colors.$text-dark; /* 4 */ From 408ca02fc0a46455747747563328e0de4559b572 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Thu, 23 Apr 2020 12:52:28 -0700 Subject: [PATCH 10/10] Add title to satisfy aXe text --- src/objects/rhythm/demo/article.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/objects/rhythm/demo/article.twig b/src/objects/rhythm/demo/article.twig index 6e7622648..5856b625f 100644 --- a/src/objects/rhythm/demo/article.twig +++ b/src/objects/rhythm/demo/article.twig @@ -17,7 +17,7 @@

    The best way to understand where the differences of opinion exist is by looking at an real life example: is Google Plus responsive?

    {% embed '../../embed/embed.twig' with { class: 'o-embed--wide' } only %} {% block content %} - + {% endblock %} {% endembed %}

    It looks like it might be responsive. The layout varies from one, two or three columns depending on the width of the page. The size of elements on the page change as well.