Apply Diamond UI

Let’s go right back to the start and look at our page hero component again. Could we have done this differently with Diamond?

Dividing this page hero component up into the four Cs we see it’s actually made up of many sub-components:

• Content - Title and Text
• Controls - Button
• Canvas - Page Section
• Composition - Container, Spacing

In code form the separated components might now look like:

<section class="page-section page-section--muted">
  <div class="container">
    <div class="spacing-bottom-lg">
      <h1>Page title</h1>
      <p>Lorem ipsum dolor [...etc]</p>
    </div>
    <a class="button button--primary" href="#">
      Call to action
    </a>
  </div>
</section>

Initially, this may appear to be quite a lot of components for such a small piece of the page, but let’s see how this up-front work can pay off as the design gets more complicated.

Adding the eyebrow text and secondary paragraph is pretty straightforward. Because all our components accept any children, we can add an HTML element or component for the eyebrow text and another one for the secondary paragraph without updating any of the existing component props.

<section class="page-section page-section--muted">
  <div class="container">
    <div class="spacing-bottom-lg">
+     <p class="eyebrow">Eyebrow text</p>
      <h1>Page title</h1>
      <p>Lorem ipsum dolor [...etc]</p>
+     <p class="text-size-sm">
+       Suspendisse sed dictum dolor, at hendrerit nibh. 
+       Curabitur euismod ipsum jut mi 
+       <a href="#">elementum interdum</a>.
+     </p>
    </div>
    <a class="button button--primary" href="#">
      Call to action
    </a>
  </div>
</section>

We start to see here how composing individual components broken up by the four Cs over using single components with many props gives us more flexibility. For example, the new paragraph can accept the link at the end whereas our previous string prop for intro was unable to include any extra text formatting.

Next let’s look at the two button Controls, one has a new ‘secondary’ style. The grid Composition handles their size and spacing.

<section class="page-section page-section--muted">
  <div class="container">
    <div class="spacing-bottom-lg">
      <p class="eyebrow">Eyebrow text</p>
      <h1>Page title</h1>
      <p>Lorem ipsum dolor [...etc]</p>
      <p class="text-size-sm">
        Suspendisse sed dictum dolor, at hendrerit nibh. 
        Curabitur euismod ipsum jut mi 
        <a href="#">elementum interdum</a>.
      </p>
    </div>
+   <div class="grid">
+     <div class="grid__item">
        <a class="button button--primary" href="#">
          Main action
        </a>
+     </div>
+     <div class="grid__item">
+       <a class="button button--secondary" href="#">
+         Secondary action
+       </a>
+     </div>
+   </div>
  </div>
</section>

Now when the product team decide they need an email signup in the main hero or there’s a new dark hero variation we can perform the updates by swapping out the individual components.

+ <section class="page-section page-section--dark">
    <div class="container">
      <div class="spacing-bottom-lg">
        <p class="eyebrow">Eyebrow text</p>
        <h1>Page title</h1>
        <p>Lorem ipsum dolor [...etc]</p>
      </div>
+     <form action="#" method="post">
        <div class="grid">
          <div class="grid__item">
+           <email-input><input type="email" /></email-input>
          </div>
          <div class="grid__item">
+           <button 
+             type="submit" 
+             class="button button--primary" 
+             href="#"
+           >
+             Sign up
+           </button>
          </div>
        </div>
+     </form>
    </div>
  </section>

Something that would have previously been a complete refactor is now a simple update that builds upon our existing components instead of replacing them.

This is the power of Diamond UI methodology.