cu.css

Utilities

cu.css include a handful of utilities. Utilities help to solve common, yet specific problems found throughout a project. They can be used with any element in any context.

According to cube.fyi: “A utility, in the context of CUBE CSS, is a CSS class that does one job and does that one job well.”

It’s important to note, cu.css doesn’t make use of any third-party tooling to generate utility classes. Instead, create any additional utilities by hand, as and when they are required.

The CSS for these utilities can be found in assets/scss/utilities.

Wrapper #

.wrapper horizontally centers content and adds a minimum margin either side to prevent content sitting flush to the parent element.

This is useful for creating site wide content wrappers, or simply centering sections of content, as you see on the cu.css homepage.

Margin
Padding
Content
Padding
Margin
Wrapper with horizontal padding visualised in purple and margin in green
/*
WRAPPER
@link: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
*/
.wrapper {
  max-width: var(--wrapper-max-width, 90rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

The default max-width of .wrapper is set to 90rem. However, by setting a --wrapper-max-width value, you can control the maximum width of an element that has the class applied.

<section class="wrapper" style="--wrapper-max-width: 70ch;">
  <div>Some centered content</div>
</section>

Similarly, set a value for --gutter to control the minimum margin applied either side of an element with .wrapper applied.

For those familiar with Every Layout, you may recognise .wrapper as the Center Layout.

Region #

.region adds consistent vertical padding to an element to create regions of content with sufficient spacing.

By default, .region uses --space-l-xl from the space scale, however the amount of space can also be configured by setting --region-space inline or within any new class you decide to create and use alongside .region.

Padding
Content
Padding
A region of content with vertical padding visualised in purple
/*
REGION 
Add consistent vertical padding to create regions of content 
Can either be configured by setting --region-space or use a default from the space scale
@link: https://codepen.io/harrycresswell/pen/bGQmBNL
*/
.region {
 padding-top: var(--region-space, var(--space-l-xl));
 padding-bottom: var(--region-space, var(--space-l-xl));
}

Flow #

Applies a margin to sibling elements based on a --flow-space custom property.

Content
Margin (default)
Content
Margin (set inline using --flow-space)
Content
Flow utility with margin visualised in green
/*
FLOW
@link: See The Stack in Every Layout https://every-layout.dev/layouts/stack/
@link: https://piccalil.li/tutorial/improve-the-readability-of-the-content-on-your-website#heading-the-flow-utility
@link: https://piccalil.li/quick-tip/flow-utility/
*/
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

Visually Hidden #

Use the .visually-hidden utility to visually hide an element in the browser while ensuring it’s still accessible to assistive technologies, such as screen readers.

/* 
VISUALLY HIDDEN
@link: https://piccalil.li/quick-tip/visually-hidden/ 
*/
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

This is different from using the [hidden] attribute which will hide the content from both the browser and assistive technologies.

Text #

The .text-center utility class can be used to center the horizontal alignment of inline-level content inside a block element or table-cell box.

This text is horizontally centered 
.text-center {
  text-align: center;
}

Width #

The .w-full utility class can be used to make an element fill the full width of its parent container. Particularly useful for buttons and form elements.

.w-full {
  width: 100%;
}

The .skip-link utility can be used to create skip navigation links. These are links that are visually hidden by default and become visible on focus, usually when using the keyboard Tab button to navigate a website.

<a class="skip-link" href="#main-content">Skip to main content</a>
...
<main id="main-content">
    ...
</main>

Useful if, for example, you want to offer your website visitors the option to skip the navigation and head straight to your main page content without the need to tab through every link in your navigation.