Composition, simply put, is when you build something greater than the sum of its parts. For example, an organism is composed of organs, which are composed of organ parts, which are composed of cells, which are composed of atoms.

A musical composition can be broken down to nothing more than masterfully applying rhythm and tempo to 12 unique notes, creating all of our musical masterpieces.

Composition also applies to web layout. Complex layouts can be broken down into simpler "layout primitives," 

. These layout primitives are single-purpose layout components that do one thing and one thing well. It is by strategically combining these primitives that we achieve more complex layout structures.

Let's take the below hero layout, for example:

Naively we might choose to do something like this:

.hero-container {
  /* container styles*/
}
.hero-top {
  /* top styles*/
}
.hero-left {
  /* left styles*/
}
.hero-right {
  /* right styles*/
}
/* ect... */

 can help create more consistent class names and are generally useful in managing our CSS style sheets at scale. Unfortunately, those methodologies can only get you so far.

When we approach our component's layout as something unique for each component, we miss a fantastic opportunity to define a consistent visual structure in our application. Instead, all of our layouts are treated as unique things that need to be built from scratch over and over again.

Instead of looking at our Hero component as one isolated element, let's break it up into smaller, single-purpose layout components, like this:

function Stack() {
  /** vertically stacks elements on top of each other */
}

function Inline() {
  /** horizontally stacks elements in a row */
}

function Split() {
  /** splits the parent's width between two elements */
}

function Cover() {
  /** covers an area and vertically centers its child */
}

function Frame() {
  /** Frames out a media into the correct aspect ratio */
}

(Don't worry about how these components are implemented right now. Just focus on the intended outcome of the components.)

Then we can apply these layout components like this:

In code, this would translate to something like this:

export function Hero() {
  return (
    <Stack>
      <Inline>{/* */}</Inline>
      <Split>
        <Cover>
          <Stack>
            <h1>{/* */}</h1>
            <p>{/* */}</p>
            <Inline>
              <button>{/* */}</button>
              <button>{/* */}</button>
            </Inline>
          </Stack>
        </Cover>
        <Frame>
          <img />
        </Frame>
      </Split>
    </Stack>
  );

These "layout primitives" can be applied in a signup form, a blog post feed, a feature page, or any other part of our web page. Most of the layouts we use every day are not that unique and can be broken down, at least in part, to one of a handful of layout patterns.

Thinking in terms of layout composition can feel strange at first. Probably one of the more difficult parts is knowing **where** you should apply your style rules in your component. 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Composing Layouts</h1><p>Composition, simply put, is when you build something greater than the sum of its parts. For example, an organism is composed of organs, which are composed of organ parts, which are composed of cells, which are composed of atoms.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210704194457457_slide10-l.jpg" attachmentid="57051e87-22d8-4420-aa55-d97abfcc93ee" contenteditable="false"><div></div></figure><p></p><p> </p><p>A musical composition can be broken down to nothing more than masterfully applying rhythm and tempo to 12 unique notes, creating all of our musical masterpieces.</p><p></p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210704194602699_music-theory.jpg" attachmentid="c7aa0ff7-9425-4783-948d-ec9d510eb77c" contenteditable="false"><div></div></figure><p></p><p><br>Composition also applies to web layout. Complex layouts can be broken down into simpler "layout primitives," <a href="https://every-layout.dev/rudiments/composition/" rel="noopener noreferrer nofollow">as described by Heydon Pickering</a>. These layout primitives are single-purpose layout components that do one thing and one thing well. It is by strategically combining these primitives that we achieve more complex layout structures.</p><h2 class="heading-anchor-text" id="layout-without-composition"><span>Layout without composition</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#layout-without-composition">#</a></h2><p>Let's take the below hero layout, for example:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210704194807270_hero-example.png" attachmentid="139aa385-0cba-4fb5-85e9-cc5887bab8fc" contenteditable="false"><div></div></figure><p><br>Naively we might choose to do something like this:</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-TAqLT" id="cm-TAqLT">.hero-container {
  /* container styles*/
}
.hero-top {
  /* top styles*/
}
.hero-left {
  /* left styles*/
}
.hero-right {
  /* right styles*/
}
/* ect... */</textarea><p><br>Several CSS methodologies like <a href="http://getbem.com/introduction/" rel="noopener noreferrer nofollow">BEM</a>, <a href="http://oocss.org/" rel="noopener noreferrer nofollow">Object-Oriented CSS(OOCSS)</a>, or <a href="https://github.com/nemophrost/atomic-css" rel="noopener noreferrer nofollow">Atomic CSS</a>&nbsp;can help create more consistent class names and are generally useful in managing our CSS style sheets at scale. Unfortunately, those methodologies can only get you so far.</p><p>When we approach our component's layout as something unique for each component, we miss a fantastic opportunity to define a consistent visual structure in our application. Instead, all of our layouts are treated as unique things that need to be built from scratch over and over again.</p><h2 class="heading-anchor-text" id="layout-composition"><span>Layout composition</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#layout-composition">#</a></h2><p>Instead of looking at our Hero component as one isolated element, let's break it up into smaller, single-purpose layout components, like this:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ohhPs" id="cm-ohhPs">function Stack() {
  /** vertically stacks elements on top of each other */
}

function Inline() {
  /** horizontally stacks elements in a row */
}

function Split() {
  /** splits the parent's width between two elements */
}

function Cover() {
  /** covers an area and vertically centers its child */
}

function Frame() {
  /** Frames out a media into the correct aspect ratio */
}</textarea><p><br>(Don't worry about how these components are implemented right now. Just focus on the intended outcome of the components.)</p><p>Then we can apply these layout components like this:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210704195642064_hero-breakdown.png" attachmentid="e6a85251-e9fc-4b3b-a961-c2457f10e6fe" contenteditable="false" data-width="2314" data-height="1616"><div></div></figure><p>In code, this would translate to something like this:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-KLMv9" id="cm-KLMv9">export function Hero() {
  return (
    &lt;Stack&gt;
      &lt;Inline&gt;{/* */}&lt;/Inline&gt;
      &lt;Split&gt;
        &lt;Cover&gt;
          &lt;Stack&gt;
            &lt;h1&gt;{/* */}&lt;/h1&gt;
            &lt;p&gt;{/* */}&lt;/p&gt;
            &lt;Inline&gt;
              &lt;button&gt;{/* */}&lt;/button&gt;
              &lt;button&gt;{/* */}&lt;/button&gt;
            &lt;/Inline&gt;
          &lt;/Stack&gt;
        &lt;/Cover&gt;
        &lt;Frame&gt;
          &lt;img /&gt;
        &lt;/Frame&gt;
      &lt;/Split&gt;
    &lt;/Stack&gt;
  );</textarea><p><br>These "layout primitives" can be applied in a signup form, a blog post feed, a feature page, or any other part of our web page. Most of the layouts we use every day are not that unique and can be broken down, at least in part, to one of a handful of layout patterns.</p><p><br>Thinking in terms of layout composition can feel strange at first. Probably one of the more difficult parts is knowing **where** you should apply your style rules in your component. <br></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Composing Layouts

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript