cu.css

Blocks

According to cube.fyi: “A block is a skeletal component or organisational structure. To compare it to common user interface elements: it is a card element or a button element.”

Personally, I like to think of Blocks as commonly used design patterns, which global styles, compositions and utilities don’t necessarily account for. For example, there is no pre-existing HTML <card> element and although we may be able to create a card using utilities alone, handling this level of complexity with a .card block makes life easier.

cu.css includes a handful of blocks to get you started. The CSS for which can be found in assets/scss/blocks.

Button #

Use the .button class to style links as buttons.

A link as a button A link as a button A disabled link as a button

<a class="button" href="#">A link styled as a button</a>
<a class="button" data-variant="outline" href="#">A link as a button</a>
<a class="button" role="link" aria-disabled="true">A disabled link as a button</a>

Use the w-full width utility class to make a button styled link fill the full width of it’s container.

<a class="button w-full" href="#">Link styled as a full-width button</a>

Callout #

Use .callout to draw attention to content in a visually distinct manner.

<aside class="callout">
  <strong>Callouts are useful</strong>
  <p>Use them to visually highlight important content. <a href="/compositions/#masonry-layout">Grid Masonry layout</a> shows a callout in action.</p>
</aside>

Apply data-variant="brand" to style a callout using the brand color.

<aside class="callout" data-variant="brand">
  <strong>Callouts are useful</strong>
  <p>Use them to visually highlight important content. <a href="/compositions/#masonry-layout">Grid Masonry layout</a> shows a callout in action.</p>
</aside>

Card #

.card can be used to distinguish content relating to a specific topic. Optionally include an image, heading, paragraph content, links and buttons.

To make the whole card clickable, add an <a> element inside a heading element. Both links and buttons found elsewhere in the card will remain clickable.

Use the Grid compostition to display multiple cards in columns, as shown below.

  • Millennium Falcon

    Won by Han Solo from Lando Calrissian in a game of sabacc. Made the infamous Kessel run in slightly over 12 parsecs.

    Photo by Josué AS on Unsplash.

  • X-wing starfighter

    Used by the Rebel Alliance in their conflict with the Galactic Empire and famously by Luke Skywalker to destroy the Death Star.

    View photo on Unsplash

  • A-wing starfighter

    The fastest vessels in the Star Wars canon, with the advantage of being the smallest hyperspace drive-equipped craft.

    Photo by Chuck Givens on Unsplash.

<ul role="list" class="grid" data-layout="33x3">
  <li class="card">
    <img src="/img/josue-as-_nprTIIwSk4-unsplash.jpg" alt="" />
    <div class="flow">
      <h3><a data-variant="naked" href="https://en.wikipedia.org/wiki/Millennium_Falcon">Millennium Falcon</a></h3>
      <p>Won by Han Solo from Lando Calrissian in a game of sabacc. Made the infamous Kessel run in slightly over 12 parsecs.</p>
      <p>Photo by <a href="https://unsplash.com/@yehoshuaas">Josué AS</a> on Unsplash.</p>
    </div> 
  </li>
   <li class="card">
    <img src="/img/brian-mcgowan-3bETLGHcAUU-unsplash.jpg" alt="" />
    <div class="flow">
      <h3><a data-variant="naked" href="https://en.wikipedia.org/wiki/X-wing_fighter">X-wing starfighter</a></h3>
      <p>Used by the Rebel Alliance in their conflict with the Galactic Empire and famously by Luke Skywalker to destroy the Death Star.</p>
      <a href="https://unsplash.com/photos/3bETLGHcAUU" class="button w-full">View photo on Unsplash</a>
    </div>
  </li>
   <li class="card">
    <img src="/img/chuck-givens-02AQdLh4gP4-unsplash.jpg" alt="" />
    <div class="flow">
      <h3><a data-variant="naked" href="https://en.wikipedia.org/wiki/A-wing">A-wing starfighter</a></h3>
      <p>The fastest vessels in the Star Wars canon, with the advantage of being the smallest hyperspace drive-equipped craft.</p>
      <p>Photo by <a href="https://unsplash.com/@one_dwigt">Chuck Givens</a> on Unsplash.</p>
    </div>
  </li>
</ul>

To vary the card design you might consider the following tips:

  • Omit the image altogether.
  • Flip the card layout using the data-state="reversed" exception.
  • Nest the image inside the .flow container to prevent a full bleed image.
  • Omit data-variant="naked" to use default link style.

  • Millennium Falcon

    Won by Han Solo from Lando Calrissian in a game of sabacc. Made the infamous Kessel run in slightly over 12 parsecs.

    Photo by Josué AS on Unsplash.

  • X-wing starfighter

    Used by the Rebel Alliance in their conflict with the Galactic Empire and famously by Luke Skywalker to destroy the Death Star.

    View photo on Unsplash

  • A-wing starfighter

    The fastest vessels in the Star Wars canon, with the advantage of being the smallest hyperspace drive-equipped craft.

    Photo by Chuck Givens on Unsplash.

<ul role="list" class="grid" data-layout="33x3">
  <li class="card">
    <div class="flow">
      <h3><a data-variant="naked" href="https://en.wikipedia.org/wiki/Millennium_Falcon">Millennium Falcon</a></h3>
      <p>Won by Han Solo from Lando Calrissian in a game of sabacc. Made the infamous Kessel run in slightly over 12 parsecs.</p>
      <p>Photo by <a href="https://unsplash.com/@yehoshuaas">Josué AS</a> on Unsplash.</p>
    </div> 
  </li>
   <li class="card" data-state="reversed">
    <img src="/img/brian-mcgowan-3bETLGHcAUU-unsplash.jpg" alt="" />
    <div class="flow">
      <h3><a data-variant="naked" href="https://en.wikipedia.org/wiki/X-wing_fighter">X-wing starfighter</a></h3>
      <p>Used by the Rebel Alliance in their conflict with the Galactic Empire and famously by Luke Skywalker to destroy the Death Star.</p>
      <a href="https://unsplash.com/photos/3bETLGHcAUU" class="button w-full">View photo on Unsplash</a>
    </div>
  </li>
   <li class="card">
    <div class="flow">
      <img src="/img/chuck-givens-02AQdLh4gP4-unsplash.jpg" alt="" />
      <h3><a href="https://en.wikipedia.org/wiki/A-wing">A-wing starfighter</a></h3>
      <p>The fastest vessels in the Star Wars canon, with the advantage of being the smallest hyperspace drive-equipped craft.</p>
      <p>Photo by <a href="https://unsplash.com/@one_dwigt">Chuck Givens</a> on Unsplash.</p>
    </div>
  </li>
</ul>

Hero #

Use .hero, in combination with region and flow, to create a distictive section on pages. You can see .hero in action at the top of each page on this website.

A modern CSS framework

cu.css is built using Cube CSS and Utopia fluid responsive design.

<div class="hero | region flow">
  <h1>Some page title</h1>
  <p>Some page description</p>
</div>

Notice pipes are used to group classes, as seen in the example code above. In this case, a pipe (|) seperates the block class hero from the utility classes region and flow. The purpose of this is simply to improve clarity.

Prose #

.prose can be used alongside the flow utility to improve the legibility of longform content. Particular useful for improving the look of typography in articles and pages.

Apply .prose to any HTML element that accepts flow content, to subtly increasing line-height, along with the default --flow-space of its children.

Consider the following extract with .prose and .flow applied:

The Chosen One

Long ago, in a galaxy far, far away, the Skywalker saga began. Anakin Skywalker, a young slave from Tatooine, was discovered by Jedi Master Qui-Gon Jinn. Sensing the Force was strong with him, Qui-Gon believed Anakin was the chosen one, destined to bring balance to the Force.

The Rise of Darth Vader

Anakin's path was fraught with temptation. Seduced by the dark side of the Force, he became Darth Vader, apprentice to the Sith Lord Darth Sidious. His actions led to the fall of the Jedi Order and the rise of the Galactic Empire.

A New Hope

Years later, a new hope emerged in the form of Luke Skywalker, Anakin's son. Trained by Jedi Master Obi-Wan Kenobi and the wise Jedi Master Yoda, Luke sought to redeem his father and restore peace to the galaxy.

<article class="prose | flow">
  <h2>The Chosen One</h2>
  
  <p>Long ago, in a galaxy far, far away, the Skywalker saga began. Anakin Skywalker, a young slave from Tatooine, was discovered by Jedi Master Qui-Gon Jinn. Sensing the Force was strong with him, Qui-Gon believed Anakin was the chosen one, destined to bring balance to the Force.</p>

  <h2>The Rise of Darth Vader</h2>
  
  <p>Anakin's path was fraught with temptation. Seduced by the dark side of the Force, he became Darth Vader, apprentice to the Sith Lord Darth Sidious. His actions led to the fall of the Jedi Order and the rise of the Galactic Empire.</p>

  <h2>A New Hope</h2>
  
  <p>Years later, a new hope emerged in the form of Luke Skywalker, Anakin's son. Trained by Jedi Master Obi-Wan Kenobi and the wise Jedi Master Yoda, Luke sought to redeem his father and restore peace to the galaxy.</p>
</article>

Now consider the same extract without .prose and .flow applied:

1. The Chosen One

Long ago, in a galaxy far, far away, the Skywalker saga began. Anakin Skywalker, a young slave from Tatooine, was discovered by Jedi Master Qui-Gon Jinn. Sensing the Force was strong with him, Qui-Gon believed Anakin was the chosen one, destined to bring balance to the Force.

2. The Rise of Darth Vader

Anakin's path was fraught with temptation. Seduced by the dark side of the Force, he became Darth Vader, apprentice to the Sith Lord Darth Sidious. His actions led to the fall of the Jedi Order and the rise of the Galactic Empire.

3. A New Hope

Years later, a new hope emerged in the form of Luke Skywalker, Anakin's son. Trained by Jedi Master Obi-Wan Kenobi and the wise Jedi Master Yoda, Luke sought to redeem his father and restore peace to the galaxy.