LYTSExamples

Article

Create a common article layout with Clamp, with support for full-width "break out" elements.

// Edit the live code below

<Clamp clamp='400px'>

  <b>Check this out</b>



  <p>Created at ... by ...</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>



  <Breakout xAlign='center'>

    I am a full-width "break out" element!

  </Breakout>



  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</Clamp>

To achieve a simple article layout the example is wrapped in a Clamp, which privides us with 3 things:

  1. Consistent Stack-style vertical spacing (via the gap prop)
  2. Horizontal clamping to a specified max-width
  3. The ability to create "break-out" children (more on that below)

What about that "break-out" thing?

Clamp is using a technique popularized by Josh Comeau's Full-Bleed Layout Using CSS Grid. With this technique, any direct child can "opt-out" of the clamping by using grid-column to "1 / -1". LYTS implements this behavior with the Breakout component.

This makes it possible to use a Clamp at the top-level, but to still have the flexibility to include full-width content, such as section with a different background-color or -image.