Define Non-Typography Content Margin/Flow Patterns

[blzaugg]

https://lexicondesign.io/docs/designPrinciples/typography.html

Define Non-Typography Content Margin/Flow Patterns. Similar to the example image below, but with a liberal amount a good aesthetics applied 😉.

Key

• Blue: Paragraph Margins
• Green: Good Pattern
• Red: Bad Pattern

[pat270]

@blzaugg do you want some kind of utility classes + markup pattern to add on the image/p tag to achieve the green example?

[blzaugg]

For Lexicon, I want a design/pattern to follow. I could not find any.

For Clay I'd want at least one "wrapping" class. I'm already working on creating 2 "wrapping" classes: an "styled content editor" class and a "styled content display" class; in Portal Themes. This could be applied at the Clay level, but I'm still working that out.

The classes wouldn't provide styles themselves, but would allow better targeting of child content elements. I don't think utility classes on the child content elements themselves is practical, as we may not have control over the markup used in the editor or its output.

I planned something like so, for targeting styled content:

.style-content-display,
.style-content-editor {
    img {
        max-width: 100%;

        &[style*="float"] {
	    margin: 1rem;
        }

        &[style*="float: left;"],
        &[style*="float:left;"] {
	    margin-left: 0;
        }
    }

    p {
        margin: 1rem 0;
    }
}

// So we can target editor vs content independently
.style-content-editor {
    img {
        border: 2px dashed blue;
    }
}

We are already doing this in Portal but it's messy, fragile and inconsistent. I want to centralize/standardize it.

[victorvalle]

Hi @blzaugg and @pat270 !
The number is 24px. It was defined in some Alloy ticket by David.
The distance between paragraphs is defined by the line height.

I will state this in the site as it is useful.

Thanks!

[blzaugg]

Is there a reason this margin unit is not relative, like all other margin, typography units? My worry is that a customer/user changes their font-size, etc, but this dimension stays the same.

[blzaugg]

Also, I'd want a visual pattern to follow, similar to the example image I gave, but with a liberal amount a good aesthetics applied 😉 .

Added to original issue description;

[blzaugg]

This issue has nothing to do with Alloy Editor specifically, as this is for general typography flow/whitespace.

[victorvalle]

I was updating the site yesterday with some examples of do and don't base on your example, but wedeploy is broken for us