Huesos
Style
Guide

Repositoire

GitHub

Preview

Text Wrapper

This is a very opinionated set of rules to apply to ling texts (i.e, the full text of a blog post).

It expects the inner HTMl to be:

  • Mainly headings, paragraphs and sectioning content (<nav>, <article>, <section>).
  • Last element will be either a <p>, an <article>or <section>.

It will perform the following operations:

  • Ensure the last item won’t have a margin-bottom.
  • Increase the whitespace between sections.
  • Applies $max-ch to ensure a maximum width based on a character number.

Negras tormentas agitan los aires
The future of .text-wrapper is bleak. It can and will be overriden by a combination of max-ch, lobotomized owl and other tecniques. Deprecation is coming.

Example

<article class="text-wrapper">
    <section>
        <h2>First heading has no margin-top</h2>
        <p>Hello there! i'm the first parargraph inside a div marked as text-wrapper.</p>
        <p>This means we can write several paragraphs and be sure that the last one will feature no margin-bottom</p>
    </section>
    <section>
        <h3>But the rest of headings <u>do have</u> a margin-top!</h3>
        <p>Otherwise, I will end up breaking the design by adding an unneeded space at the bottom!</p>
    </section>
</article>

Assets

  • Filesystem Path: src/components/typography/text-wrapper/_text-wrapper.scss
  • Size: 423 Bytes 
  • .text-wrapper {
	max-width: $max-ch;
	h1, h2, h3, h4 {
		margin-top: $gutter * 2;
	}
	section,
	article {
		margin-bottom: $gutter * 2;
	}
	// Except if it is the first child of the text...
	h1:first-child, 
	h2:first-child, 
	h3:first-child, 
	h4:first-child {
		margin-top:0;
	}
	// The last p, section of article features no margin-bottom
	p:last-child,
	section:last-child,
	article:last-child {
		margin-bottom:0;
	}
}