Piccalilli - Intermediate topic archive

Fluid typography with CSS clamp

Andy Bell — Fri, 05 Feb 2021 00:00:00 GMT

I’m a big fan of clamp()—it’s decent at doing what I like to do the most with CSS: let the browser do its job with some hints at how to do it. It also provides just the right amount of control, which is handy for layout elements, too.

In this tutorial, we’re going to use clamp to generate a little fluid type system that can be configured using CSS Custom Properties.

Getting started

All we need for this tutorial is a little HTML page and a CSS file. Go ahead and create the following files:

index.html
global.css

Now, inside index.html, add the following:



  
    
    
    
    Fluid type demo
    
  
  
    
      Fusce dapibus, tellus ac cursus commodo
      Donec ullamcorper nulla non
      Morbi leo risus, porta ac consectetur
      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.

That’s it for HTML. It’s some lipsum placeholder text to demonstrate our fluid type system. Job done!

Digging in to the CSS

Now for the fun part. Let’s add our basic global styles first. Open up global.css and add the following to it:

body {
  background: #f3f3f3;
  color: #252525;
  line-height: 1.5;
  font-family: Georgia, serif;
  padding: 2rem;
}

h1,
h2,
h3 {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
    helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  line-height: 1.1;
  font-weight: 900;
}

That’ll make things look a little nicer. We’re using my favourite font, Georgia, as our base and the system font stack for headings. This contrast will really help you see the fluid type in action.

Now we can add the smart stuff—the fluid type setup. Open up global.css and add the following to it:

h1,
h2,
h3,
p {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
  );
}

There’s a lot going on here, so let’s break it down.

The clamp() function takes a minimum value, an ideal value and a maximum value. This allows us to create some locks.

To power all of this, we’re using 3 custom properties:

--fluid-type-min is the smallest we will allow our text to go
--fluid-type-target is our ideal, fluid setting. We use calc() because if you just use a viewport unit to size your type, it can cause problems in zooming, which in turn, creates a WCAG accessibility failure.
--fluid-type-max is the largest we will allow our text to go

For all three custom properties, we are setting the default value as the second parameter. This means that you can drop this fluid type system into any project, and even if none of those properties are defined: the system will still work off those default, sensible values.

FYI

It’s really important to apply fluid type responsibly. Luckily for us all, Adrian Roselli has written about this in depth. The specific criterion is here.

It’s really important to test that your text gets large enough when you zoom in and small enough when you zoom out—it should be very obviously larger or smaller. Because we’re using a rem as part of our fluid calculation in this tutorial, we’re helping that, considerably.

Implementing our system

We have applied our fluid type system to the following elements: h1, h2, h3, p. We could—if we wanted—turn this into a utility class for maximum portability. For this tutorial, we’ll keep it simple with type selectors though.

We want to add some specific settings for each of these, using custom properties, or all the text will be the same size.

Open up global.css and add the following to it:

h1 {
  --fluid-type-min: 2.5rem;
  --fluid-type-max: 5rem;
  --fluid-type-target: 5vw;

  max-width: 15ch;
}

h2 {
  --fluid-type-min: 1.8rem;
  --fluid-type-max: 3rem;
}

h3 {
  --fluid-type-min: 1.5rem;
  --fluid-type-max: 2.5rem;
}

h2,
h3 {
  max-width: 30ch;
}

p {
  max-width: 60ch;
}

For the

, we increase the `--fluid-type-target` to a larger, `5vw`. By increasing the viewport unit, we speed up the rate of growth, which will help to maintain its extra large size. To reduce the rate of growth and have less difference between your minimum and maximum sizes: reduce the size of `--fluid-type-target`.

For all of the other elements, the default growth rate is fine, so all we’re doing is setting sensible minimum and maximum sizes, using standard `rem` units.

FYI

We’re limiting the width of all of the elements, using a `ch` unit to improve readability. You can read more about that here.

We’re done! You can see a live demo of what we have built, here. You can also download the completed source files, here.

Wrapping up

This is a very simple, bare-bones system and will comfortably support a lot of usecases. For more advanced, complex designs, I would recommend using something like Typetura which gives very fine control or Utopia, which is a level up from this approach that we’ve learned today.

For full disclosure, I’m not a huge fan of fluid type, personally. I’ve had such a mixed, checkered history with it over the years, and personally, I prefer to create a size scale, implemented via media queries. That’s what this site does, at the time of writing.

Fluid type is in demand, too, so what you’ve learned today will undoubtedly be useful at some point—if nothing else, to give you a useful context of how clamp() works.

Until next time, take it easy 👋

Big thanks to Eric Bailey for casting his expert eye on this for me.

Build a responsive media browser with CSS

Andy Bell — Thu, 01 Oct 2020 00:00:00 GMT

Something that has been a bit of a brain teaser historically, is aspect ratio—specifically, maintaining it—especially over the last 10 or so years, since responsive design has been the industry standard way of building websites.

A context that has always been particularly problematic for this layout brain-teaser is video—especially a third-party embedded video, such as YouTube.

In this tutorial we are going to solve all of these problems using the magic of Flexbox. What we will end up with at the end is a water-tight layout that can be adapted for many use-cases where aspect ratio needs to be maintained, while other elements put that at risk.

See a completed demo

Getting started

Before we start, let’s get you up and running with some starter files. I’ve set us up a project that uses Eleventy to generate a nice collection of pages that all run off the same template. This will make the media browser fully interactive, using good ol’ HTML and URLs.

To get started:

Download these starter files
Extract the contents
Open your terminal inside the folder and run npm install
Serve up and watch for file changes with npm start

FYI

You can skip this process and build a more static version of the site using a CodePen template if you’d prefer.

All you need to do is click here and a brand new pen will start up with all the stuff you need, ready to go.

When you run npm start and open your browser at , you should see something that looks a bit like this:

A quick look at the markup

All the HTML for this tutorial is already in place to keep things focused on CSS, but let’s look at the main .media-browser element’s markup.

You don’t need to copy this code


  Skip to the video navigation
  
    
      
    
  
  
    
      Albatross Soup
      All Cats Are Gray in the Dark
      Thrasher - Nick Mullins Sponsor Me
      Thrasher Bust or Bail 2008
      ‘Aliens’ (2020)
      A Normal Day of Sassi (쎄씨의 하루)
      Battle Patrol 2084

What we have here is an element that features a Vimeo embed and a collection of links which link to other pages, which contain the same media browser, with a different video loaded. At the start of the .media-browser element, we have a skip link that allows the user to skip straight to the

element to move to other videos.

FYI

You might be thinking, “but in the completed demo, the links are at the start, on the left”, which is true, but because we will be visually changing the source order, we need to make sure we are not creating a problem for keyboard users.

We make the

element programatically focusable by setting tabindex="-1", which helps to ensure that when a user activates the skip link, the next focusable element will be the first link to another video.

Another useful addition to this

is that we have an aria-label. This is actually best practice if you have more than one

landmark so assistive technology, such as a screen reader, will more helpfully announce them.

FYI

When you add an aria-label to a

That’ll do for HTML programming for now. We’ll cover stuff in more detail as we style it.

Global styles

The CSS in this tutorial uses some of the principles from CUBE CSS.

With that in mind, the first thing we will do is add some global CSS. In your starter files, open src/css/global.css and add the following to it:

body {
  padding: 2.5rem 1.5rem;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  background: #ffffff;
  color: #333333;
}

main {
  max-width: 50rem;
  margin: 0 auto;
}

main > * + * {
  margin-top: 2em;
}

h1 {
  font-weight: 500;
}

p {
  max-width: 60ch;
}

a {
  color: currentColor;
}

:focus {
  outline: 1px dashed;
  outline-offset: 0.25rem;
}

This is all fairly straightforward, global styling. We’re setting some sensible defaults, such as a system font stack, link styles and importantly, global focus styles.

We’re also adding some flow and rhythm by telling all direct siblings of the

element to add 2em of top margin. We do this using a lobotomised owl selector.

FYI

This approach of managing stacking with flow and rhythm is something I’ve written extensively about for a while, but check out this and most importantly, this for a high-level overview.

Your version of the project should look a bit like this now:

Responsive video player

Now we have our global styles, let’s focus on some specific elements. Before we tackle the .media-browser, let’s build out the .video-player. Still inside global.css, add the following:

/* Video player */
.video-player {
  position: relative;
  padding-bottom: 56.25%;
}

.video-player > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

What we do here is create a container with a 16:9 aspect ratio. The 56.25% might look like a magic number, but it’s actually a result of the following calculation:

Divide 9 by 16: 0.5625
Multiply that by 100 (or move decimal 2 places): 56.25

This works with any aspect ratio!

We add padding to the bottom of the .video-player because vertical padding percentages work from the element’s width. Let’s say that our video player happens to find itself in a 1000px wide container: it would have a bottom padding value of 562.5px.

We then target the direct child of the video player and make it absolutely positioned. Because we pull the video itself out of the document flow, it fits all sides by setting width and height, then sticking it in the top left with positioning. This means that the video element will always maintain the same proportions as its responsive parent, thanks to its padding. Handy, right?

Styling the skip link

Our skip link needs to be visually hidden unless it is focused. We also want to make that absolutely positioned, so it doesn’t affect our .media-browser layout.

While you’re still in global.css, add the following:

.skip-link {
  display: inline-block;
  padding: 0.5rem 1.5rem 0.6rem 1.5rem;
  background: #efd6da;
  border: 1px solid #cccccc;
  border-radius: 0.25rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 99;
  text-decoration: none;
}

.skip-link:not(:focus) {
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

The skip link is styled to look like a button and uses pretty straightforward styles to do that. The real interesting stuff is what follows after that.

Firstly, we’re using the :not pseudo-selector to add styles to the button when it doesn’t have focus. Inside that rule, we are using the same CSS as this visually hidden quick tip. This visually hides the element, but allows assistive technology, such as screen readers, to still access it.

When you refresh and hit your tab key, it should look like this:

The main course: styling the media browser

We’ve danced around the edges for long enough now: let’s get into the main course and get the media browser layout styled up.

While you’re still in global.css, add the following to it:

.media-browser {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #cccccc;
  box-shadow: 0 0 2.5rem 1rem rgba(0, 0, 0, 0.1);
}

This is the main layout that sits the elements side-by-side. Like we covered in the skip link section, we have flipped the video and the nav visually by using flex-direction: row-reverse.

FYI

Be very careful changing the source order of content—especially when there are focusable elements at play (,

Right now, this layout isn’t very helpful, so let’s fine-tune it. Add the following to your global.css file:

.media-browser__nav {
  display: flex;
  flex-direction: column;
  flex-basis: 16rem;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

.media-browser__video {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 60%;
  background: black;
}

This here is how you get a responsive media player without using a single media query. We’re using the same principles that we covered in the Sidebar in Every Layout.

By setting the nav to have a flex-basis of 16rem and the video to have a flex-basis of 0, we are assisting the browser’s flexbox calculation of available space. Then, because the video has a flex-grow value of 999, we’re hinting to the browser that it should let the video fill all available space as a top priority. We want our sidebar to grow too, so by adding flex-grow: 1 to that, we send another clear message where the spacing-filling priority lies.

We further assist this layout by adding a min-width of 60% to the video element. This is to make sure we don’t end up with a situation where the nav and video are both equal widths, which in this context, would be pretty rubbish.

Our main .media-browser element has flex-wrap: wrap set, so when flexbox can’t fit these two elements—using basis rules we set—in line with each other, they will stack on top of each other. Because they both have flex-grow, they will be 100% wide.

Lastly, even though we reversed the elements visually: this reversal does not apply when they are stacked, which means that on small viewports, the video is at the top and the nav is at the bottom.

Now that is some proper CSS layout!

Making the nav shrinkable

If you look at your project now, it should look like this:

That nav is at risk of pushing the aspect ratio of the video out if it gets longer than the height of it. To mitigate this in the old days, we’d get our friend absolute positioning out for this sort of problem, but today, we have modern CSS to help us, so we don’t need to bother with archaic hacks.

In your global.css, add the following:

.media-browser__nav > * {
  flex-basis: 0;
  flex-grow: 1;
  overflow-y: auto;
  position: relative;
  min-height: 10rem;
}

This selector targets the

’s direct children, which in this case, is an

.media-browser__nav

.media-browser__nav {
  display: flex;
  flex-direction: column;
}

Because we have that CSS set on the nav, the flex rules on our

flex-basis

0

flex-grow

1

Also on the

auto

10rem

.media-browser

flex-basis: 0

FYI

Because the .media-browser__nav is a child of .media-browser, which has display: flex set, it takes advantage of flex’s default alignment of stretch, which does what it says on the tin: makes its children stretch, vertically.

This means that the space for the

Adding some style

The layout is done and working great. You’ve got a handy layout primitive to work with now! Let’s add a bit of style though.

In your global.css, add the following:

.media-browser__links > * + * {
  border-top: 1px solid #cccccc;
}

.media-browser__links a {
  display: block;
  padding: 1rem;
  text-decoration: none;
  line-height: 1.2;
  background: #f3f3f3;
}

.media-browser__links :hover {
  background: #e5bec4;
}

.media-browser__links :focus {
  outline-offset: -0.25rem;
}

That’ll turn the links into nice, tap-friendly blocks. Let’s give the active link—which because we’re using links, allows us to treat it as an active page—a bit of treatment. Because it’s an active page, we can use an aria-current="page" attribute, which tells assistive technology like screen readers that the ’s href attribute is in fact, the page we are currently on.

This also gives us a handy style hook, using the Exception Principle from CUBE CSS.

Add the following to global.css:

.media-browser__links a[aria-current='page'] {
  border-left: 0.4rem solid #444444;
}

Adding a scrollbar

Because CSS is a hell of a powerful programming language: we don’t need to mess around with JavaScript to get a nice, custom scrollbar for those auto-scrolling nav links.

Add the following to your global.css:

::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: #f8eef0;
}

::-webkit-scrollbar-thumb {
  background: #444444;
}

/* Color order: thumb, then track */
* {
  scrollbar-color: #444444 #f8eef0;
}

Wrapping up

There we have it, a flexible, responsive and progressive media browser that is achieved with not much CSS at all.

I hope this has shown you how powerful modern CSS layout is—especially when you approach it in a flexible manner, rather than pixel-pushing and forcing the layout to work.

You can download a zip of the final version of this tutorial or go ahead and check out a git repository of it.

Until next time, take it easy 👋

Build a dashboard with CUBE CSS

Andy Bell — Wed, 29 Jul 2020 00:00:00 GMT

CUBE CSS allows us to build seemingly complex front-ends with relative ease and to demonstrate that, in this tutorial, we’re going to build a banking dashboard which covers the whole methodology.

See what you are building

Before we start, it’s recommended that you check out the CUBE CSS docs or read the introduction post to get a feel for what we are working.

Starter files

To focus this tutorial on the CSS only, we’re going to use a HTML boilerplate that I built earlier, with all of the necessary folders and assets, so the first thing you need to do is download those and set them up wherever you need to.

Download starter files

Now they are downloaded, your folder structure should look a bit like this:

index.html
fonts
Images
scss
├── blocks
└── utilities

Setting up Sass

We’re going to use Sass for this tutorial along with a project I maintain called Gorko, which allows us to generate utility classes.

The first thing we’ll do is install Sass, so in your terminal, run the following:

npm install sass

This installs canonical Sass, which is the version of Sass you should be using, if possible, because you get all of the latest features quickest. It’s also currently the only way to use the most modern CSS features within Sass.

You should have a package.json file in your starter files, so open that up and replace the "scripts" section with the following:

"scripts": {
  "start": "npx sass scss/global.scss css/global.css --watch",
  "build": "npx sass scss/global.scss css/global.css --style=compressed"
},

You should now be able to run npm start which will run Sass and then watch for any file changes.

FYI

You can also run this project locally by opening another terminal window/tab, moving into this project folder, then running npx serve. You can read more about that, here.

Now that we have Sass installed, let’s install Gorko. In your terminal, run the following:

npm install gorko

Let’s now add some config for Gorko. In your working folder, in the scss folder, create a new file called _config.scss and add the following to it:

/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
$gorko-base-size: 1rem;

/**
 * SIZE SCALE
 * This is a Major Third scale that powers all the utilities that
 * it is relevant for (font-size, margin, padding). All items are
 * calcuated off the base size, so change that and cascade across
 * your whole project.
 */
$gorko-size-scale: (
  '300': $gorko-base-size * 0.8,
  '400': $gorko-base-size,
  '500': $gorko-base-size * 1.33,
  '600': $gorko-base-size * 1.77,
  '700': $gorko-base-size * 2.4
);

/**
 * COLORS
 * Colors are shared between backgrounds and text by default. 
 * You can also use them to power borders, fills or shadows, for example.
 */
$gorko-colors: (
  'primary': #231651,
  'secondary': #ff8484,
  'secondary-shade': #ff5151,
  'tertiary': #2c988c,
  'tertiary-glare': #d6fff6,
  'quaternary': #2374ab,
  'light': #fafafa,
  'light-shade': #eeeeee,
  'grey': #c4c4c4
);

/**
 * CORE CONFIG
 * This powers everything from utility class generation to breakpoints
 * to enabling/disabling pre-built components/utilities.
 */
$gorko-config: (
  'bg': (
    'items': $gorko-colors,
    'output': 'standard',
    'property': 'background'
  ),
  'color': (
    'items': $gorko-colors,
    'output': 'standard',
    'property': 'color'
  ),
  'font': (
    'items': (
      'base': '"IBM Plex Sans", Helvetica, Arial, sans-serif',
      'mono': '"IBM Plex Mono", Courier New, Courier, monospace'
    ),
    'output': 'standard',
    'property': 'font-family'
  ),
  'gap-top': (
    'items': $gorko-size-scale,
    'output': 'standard',
    'property': 'margin-top'
  ),
  'pad-top': (
    'items': $gorko-size-scale,
    'output': 'standard',
    'property': 'padding-top'
  ),
  'text': (
    'items': $gorko-size-scale,
    'output': 'responsive',
    'property': 'font-size'
  ),
  'weight': (
    'items': (
      'medium': '500',
      'bold': '700'
    ),
    'output': 'standard',
    'property': 'font-weight'
  ),
  'breakpoints': (
    'md': '(min-width: 48em)'
  )
);

I won’t go into too much detail with this because the Gorko documentation does that already, but essentially, what we have here is some colour, fonts and a size scale (perfect fourth) which then informs various low-level utilities. This is the U in CUBE that we are working with.

Now that we have the config, let’s add a reset. We’re going to use this modern reset here. In your working folder, in the scss folder, create a new file called _reset.scss and add the following to it:

// Modern CSS reset: https://github.com/hankchizljaw/modern-css-reset

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

We’ve got our base setup now, so let’s start building out our global styles. In your working folder, in the scss folder, create a new file called global.scss and add the following to it:

// First up: config
@import 'config';

// Next: pull in gorko for design tokens
@import '../node_modules/gorko/gorko.scss';

// Pull in modern reset
@import 'reset';

We’re pulling in our config, which informs Gorko. Then, we pull in our reset. In your output (css/global.css), you should now see some reset styles and utility classes.

Global styles

The base of CUBE CSS is global styles, so let’s add some of those now. Open up scss/global.scss and add the following to it:

// Global CSS starts
body {
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: get-size('600');

  @include apply-utility('weight', 'medium');
}

h1,
h2,
h3 {
  line-height: 1.2;
}

h1 {
  font-size: get-size('700');
}

h2,
h3 {
  font-size: get-size('600');
}

a {
  color: currentColor;
}

table {
  border-collapse: collapse;
}

th {
  text-align: left;
}

:focus {
  outline: 2px dotted;
  outline-offset: 0.25rem;
}

The design of this UI is pretty simple, so there’s not much to do here, but as you can see, our focus is element selectors, where key elements, such as headings, get some rules set. We also cover global focus styles to make sure each focusable element gets a consistent treatment.

Utilities and tokens

With the globals in place, let’s start adding some core utilities and design tokens to our HTML. Most of the tokens are already implemented in the HTML because this would be a hell of a boring tutorial if we added them all manually, but to give you a feel for how things work, we’ll add some key ones now.

First of all, run your site locally and take a look. It should look a bit like this:

As you can see, with global styles and most of the tokens implemented, it doesn’t look half-bad at all. This is the magic of CUBE CSS: we can do a lot with very little.

Let’s add some more tokens. Open up index.html and on line 11 there should be the opening tag. Replace it with the following:

That’s globally setting some colour tokens and the base font as the main font. Let’s continue this process by moving to line 12 with the

element. Replace it with the following:

We’ve added a site-head block, which we will come back to soon, but the main thing here is we’ve set its background colour with a utility.

FYI

You might be thinking “what the heck are those square brackets for?”. If this is you, go ahead and read up on them in the CUBE CSS documentation.

Lastly, skip down to line 116. You should see the following:

. Replace that with the following:

Now, when you reload your local version of this page, it should look like this:

Pretty cool, right? So much of the design implementation is already done. Now we’ve got to do the other parts of CUBE: composition, blocks and exceptions.

Composition styles

Right, we’ve done quite a lot already. Now it’s time to look at the bigger picture with composition styles. We’ll start with some high-level layouts.

Wrapper

The wrapper gives us a consistent max-width container with a bit of gutter. This is destined to be a utility because remember: a utility does one job and does it well.

Create a new file called scss/utilities/_wrapper.scss and add the following to it:

.wrapper {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 get-size('500');
}

The get-size function comes from Gorko and allows us to grab a size ratio value based on the key.

Flow

Next up is flow. This is a super tiny utility that adds margin to child sibling elements, using a lobotomised owl selector. This means that we get tonnes of flexibility, because any element will be affected (unless they are display: inline) and we don’t have to add daft CSS that targets last children to remove spacing.

Create a new file called scss/utilities/_flow.scss and add the following to it:

.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}

We first look for a --flow-space Custom Property and if that’s defined, it gets used. By default, using a fallback, we tell each child element to space itself 1rem from its sibling. The great thing about using a Custom Property is that we can control spacing in context without touching this utility again. Those Custom Properties are affected by the cascade too.

We use a more comprehensive version of this utility in Every Layout, where it’s called The Stack.

Splitter

This utility gives us our main responsive layout, which is two elements pushed away from each other at larger viewports.

Create a new file called scss/utilities/_splitter.scss and add the following to it:

.splitter {
  > :last-child {
    margin-top: get-size('500');
  }

  @include media-query('md') {
    display: flex;

    > * {
      flex-grow: 1;
    }

    > :last-child {
      margin-top: 0;
      margin-left: get-size('500');
      min-width: 22rem;
    }
  }
}

Being called splitter, this utility assumes it is dealing with two elements, so it works that way. This is shown right at the start of the utility when the last child has margin added to it.

FYI

“Why not use flow?!” I hear you scream. This is good thinking, but what we try to do with CUBE CSS is make things predictable and especially in the case of utilities: single purpose.

If we introduced another utility into this one (splitter), it would immediately become more complex, so it makes more sense to be specific, predictable and most importantly, pragmatic.

The rest of this utility adds flex at larger viewports, then flips the spacing.

Visually hidden

Create a new file called scss/utilities/_visually-hidden.scss and add the following to it:

.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 utility does what it says on the tin: it visually hides stuff. Using this utility instead of using display: none means that screen reader users can still access the content. In our project, this mainly affects the table headers.

Radius

Last up in these utilities is radius. This one isn’t technically a compositional rule, but while we’re in here, we might as well add it.

Create a new file called scss/utilities/_radius.scss and add the following to it:

.radius {
  border-radius: 0.5rem;
}

If there was ever a single-purpose utility, it would be this one!

Wiring up the utilities and composition styles

Open up scss/global.scss and add the following:

// Utilities
@import 'utilities/flow';
@import 'utilities/radius';
@import 'utilities/splitter';
@import 'utilities/wrapper';
@import 'utilities/visually-hidden';

Here, we are importing all of the CSS we have just written. If you reload your local version now, it should look like this:

Adding our blocks

Now we’ve handled global styles, design tokens, single purpose utilities and composition styles, we naturally move on to blocks. We’ll also get into exceptions at this point too.

Site header

This is the main header of the site, but it’s a super tiny block. Create a new file called scss/blocks/_site-head.scss and add the following to it:

.site-head {
  padding: 0.8rem 0;

  &__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  // Right margin prevents any collisions with the title
  h1 {
    margin: 0.5rem 1rem 0.5rem 0;
  }
}

The main theme of this block is to create an auto-wrapping flex layout. We’ve only got two elements: a heading and a user block—which we’ll build next—that should never collide with each other. We guarantee this by building a force-field around our

with margin.

FYI

Remember: inside of blocks is open season, because in CUBE CSS, blocks are more like namespaces. It’s very safe therefore to target HTML elements directly.

You can read more about this in the documentation.

User

While we’re in the site head, let’s build the user block. Create a new file called scss/blocks/_user.scss and add the following to it:

.user {
  display: inline-grid;
  align-items: center;
  grid-template-columns: max-content 50px;
  grid-gap: get-size('300');

  img {
    border-radius: 100%;
  }
}

Firstly, we use inline-grid because we want this block to only be as big as the content inside it. For that same reason, we use max-content in the grid-template-columns declaration. Lastly, we again, directly target the HTML element and apply our 100% radius.

Key header

This is the element that introduces our transactions and summary. It provides a label for that data and also some key actions. It’s already got the splitter on it, so in true CUBE CSS fashion, we are using this block to create more contextual specificity.

Create a new file called scss/blocks/_key-header.scss and add the following to it:

.key-header {
  align-items: flex-end;

  > :last-child {
    display: flex;
    flex-wrap: wrap;
    gap: get-size('300');

    > * {
      flex-shrink: 0;
      margin: 0.2rem 0 0 0.2rem;
    }
  }

  @include media-query('md') {
    > :last-child {
      justify-content: flex-end;
    }
  }
}

This is mostly self-explanatory because the main theme is specifying alignment and justification.

The key area to focus on, though, is the :last-child, which is a group of buttons. We use a wrapping flex container, like in the site-head, but we use gap to space the items. A progressive enhancement pro tip follows as we add a tiny bit of vertical and horizontal margin to the elements. This is our fallback for if gap isn’t supported. Because it’s such a tiny amount of margin, it barely makes a scratch on the overall layout too. Happy days.

Button

It wouldn’t be a UI without a button, so let’s get them out of the way. Create a new file called scss/blocks/_button.scss and add the following to it:

.button {
  @extend .radius;

  font: inherit;
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  border: 1px solid get-color('secondary');
  background: get-color('secondary');
  padding: 0.6rem 1.5rem;
  position: relative;

  @include apply-utility('weight', 'bold');

  &[data-variant='ghost'] {
    border-color: currentColor;
    background: transparent;
  }

  &:focus {
    outline-offset: -0.4rem;
    outline: 1px solid;
  }

  &:hover {
    background: get-color('primary');
    border-color: get-color('primary');
    color: get-color('light');
  }

  &:active {
    transform: scale(0.95);
  }
}

This is a pretty generic button. In our context, both buttons are links, but we should always style a button to be a real

Build a light and global state system

Andy Bell — Tue, 10 Mar 2020 12:37:01 GMT

Observability and reactivity have mostly been reserved for JavaScript frameworks in the past, but thanks to modern JavaScript, we can observe the state of an object and react to changes made to it.

In this tutorial, we’re going to use one of my favourite modern JavaScript features: Proxies, to create a global, observable object that can be used as a lightweight, basic state management tool.

The end result is a meagre 132 bytes minified (128 bytes gzipped), which is the sort of lightweight JavaScript that I love.

Here it is in its entirety:

window.subscribers = [];

const state = new Proxy(typeof defaultState !== 'undefined' ? defaultState : {}, {
  set(state, key, value) {
    const oldState = {...state};

    state[key] = value;

    window.subscribers.forEach(callback => callback(state, oldState));

    return state;
  }
});

Let’s dig into how it all works, but first of all, we need to understand Proxies.

What are Proxies and how do they work?

A Proxy object allows us to add custom behaviours to an object. We do this by defining a handler, which is where we set traps. This all sounds a bit dramatic, so I’ll create an analogy to hopefully make it a bit more understandable.

Consider a nightclub that can only have 100 people in it at any time. It has a queue of people outside which is 30 people long and inside the club there are 90 people. At the door, there is a security guard who has a count of the people currently in the club and for each person that tries to enter, they check that this number hasn’t reached 100 yet.

Because there are 90 people in the club, the security guard runs this process 10 times and waves the people through. This now means that there are 100 people in the club so no more can enter. Because of this, the next person that tries to enter gets stopped.

If someone leaves the club, the number goes down, so that means more can enter. The security guard observes the number and runs another process which calls people forward to enter as other people leave. All of this creates a nice, fluid system that keeps the maximum amount of people in the club where possible.

Let’s now translate this into JavaScript.

We define our object as usually would without Proxies, like this:

const defaultState = {
  guests: 90
};

Now lets create our security guard: AKA the Proxy:

const state = new Proxy(typeof defaultState !== 'undefined' ? defaultState : {}, {
  set(state, key, value) {
    if (key === 'guests' && state.guests >= 100) {
      throw new Error('No more guests allowed');
      return state;
    }

    state.guests = value;
    return state;
  }
});

This is where the security guard is doing their core job: making sure too many people can’t enter the club.

In the context of this Proxy, we are using what’s called a trap—specifically a set trap. This particular trap monitors each time outside code tries to modify a property of the object, so the JavaScript that triggers this trap should look very familiar:

state.guests = 93;

We need to observe the guest count and we can do that within our Proxy set trap. We need to do some groundwork, first.

The first thing we’ll do is set an array of subscriber functions on the window like this:

window.subscribers = [];

Then inside our set trap, we can publish the state changes.

set(state, key, value) {
	if(key === 'guests' && state.guests >= 100) {
	  throw new Error('No more guests allowed');
	  return state;
	}

	state.guests = value;

	// Publish the state changes to the subscribers
  window.subscribers.forEach(callback => callback(state));

  return state;
}

This means we can do something like this now:

const guestWatcher = state => {
  if (state.guests <= 100) {
    alert('More guests can now enter');
  }
};

It’s at this point that our security guard would wave some more people in.

Applying this process to create a global state system

Now that you hopefully understand how Proxies work at a surface level, you can probably see how we apply an almost identical approach to create our global state system.

To save you scrolling back up, here it is again:

window.subscribers = [];

const state = new Proxy(typeof defaultState !== 'undefined' ? defaultState : {}, {
  set(state, key, value) {
    const oldState = {...state};

    state[key] = value;

    window.subscribers.forEach(callback => callback(state, oldState));

    return state;
  }
});

Let’s break it down:

We start by creating an empty array to hold our subscriber functions. They could do anything and they will be called every time any object value changes, which is super handy.

FYI

To prevent your subscriber functions running unnecessarily, you can test the oldState value against the state that is passed in. Both of these are passed as parameters, so in the context of our nightclub, we can do this:

window.subscribers.push((state, oldState) => {
  // No changes, so bail out
  if (state.guests === oldState.guests) {
    return;
  }
});

If you’re used to working with frameworks like React, this is probably a pretty recognisable approach to prevent your components re-rendering where they don’t need to.

After we define our subscribers array on the window object, we create the Proxy. The first parameter that’s passed to a Proxy is an object. In our sample, we pass this: typeof defaultState !== 'undefined' ? defaultState : {}.

What that does is use defaultState if it is defined or use an empty object by default. This is really handy for setting your sensible defaults before you create the Proxy.

The second parameter is a handler. We’re only setting one trap in this handler, which is the set trap, which runs whenever a value of the proxied-object is changed.

Like we saw in the nightclub example, let’s say you have this as your defaultState:

const defaultState = {
  name: 'Rafaela'
};

When we do this: state.name = 'Tlaytmas', our set trap will spring into action.

Inside the set trap we take a copy of our old state:

const oldState = {...state};

The reason we use a spread operator is because if we did const oldState = state, it would create a reference. This means that when state changes: so would oldState. Using a spread operator prevents that from happening.

state[key] = value;

After we take a copy of our old state, we need to apply the changes to our object. Remember: this is a trap that we’ve created, so if we don’t apply the changes that were requested, they won’t change. This is why developers often use Proxies to perform validation.

window.subscribers.forEach(callback => callback(state, oldState));

return state;

Lastly, we loop through the window’s subscriber functions and call them before eventually returning the new state back.

And…breathe, because we’re done. Pretty darn cool, right?

This setup is all cool in theory, but how does it look in practice? Let’s take a look.

Examples

The first example is a countdown clock. Here’s a demo, which you will probably need to click “reset” to see the effect:

See the Pen Proxy-driven global state object - Countdown by Andy Bell (@piccalilli) on CodePen.

What we do here is set our default state to be 20 seconds. A renderCountdown subscriber function is then passed into the window’s subscribers array. This means that for each second that the runTimer() timer takes from state, the front-end will be re-rendered.

Once the timer has reached 0, we change the HTML to a role="alert" element to notify the user of assistive technology that the timer has completed. This also reveals a reset button which when clicked, starts the timer again.

FYI

We use aria-atomic="true" on the role="timer" element because only the number changes.

The timer role is pretty darn handy, too, which you can read about, along with other roles, here.

Our second example is a good ol’ character counter that sits under a </code>. See the Pen <a href="https://codepen.io/piccalilli/pen/eYNemYB">Proxy-driven global state object - Character Counter</a> by Andy Bell (<a href="https://codepen.io/piccalilli/">@piccalilli</a>) on <a href="https://codepen.io">CodePen</a>. We trigger state changes with every <code>input</code> event on the <code><textarea></code> which renders the resulting message underneath. If the character count has not been exceeded, it shows how many you have left, in a positive state. If you exceed the character count, though, it shows how many you have gone over in an error state. The <code>data-element="result"</code> element that houses the character count has <code>aria-live="polite"</code> which stops assistive technology being hounded by the constant updates. We also use <code>aria-atomic="true"</code> again to determine that the region is only partially updated. Just for fun, there’s a summary outside the form which also updates with how many characters you’ve typed. Because state is stored centrally, this is pretty darn trivial. <h2>Wrapping up</h2> This is just one example of how you can use Proxies to create lots of power, with tiny amounts of code. They really are a fantastic addition to JavaScript. The central system that powers this particular example is tiny snippet of code, which in a browser context where connection speed, processor speed and contextual environment attributes are completely unpredictable, is exactly the sort of thing we need to build hi-performance sites. With that in mind: this sort of global state system probably won’t be helpful if you have a massive app, but that only accounts for a tiny minority of cases, so for most stuff, you can achieve a lot with a meagre 132 bytes of JavaScript. I hope that this tutorial has piqued your interest in state management and state machines too, because there is a lot of good stuff to learn. Here’s a few of my recommended resources: <ul> <li><a href="https://www.youtube.com/watch?v=0cqeGeC98MA">Crafting Stateful Styles with State Machines by David Khourshid</a></li> <li><a href="https://statecharts.github.io/what-is-a-state-machine.html">What is a state machine?</a></li> <li><a href="https://css-tricks.com/build-a-state-management-system-with-vanilla-javascript/">Build a state management system with vanilla JavaScript</a> (hey it’s me again)</li> <li><a href="https://hackernoon.com/introducing-javascript-es6-proxies-1327419ab413">Introducing Javascript ES6 Proxies</a> (the article that got me excited about Proxies)</li> </ul> </article> <article> <h1>Create a responsive grid layout</h1> Andy Bell — Tue, 10 Mar 2020 00:00:00 GMT Embracing the flexible nature of the web gives us resilient user interfaces. Instead of using prescribed, specific sizes, we give elements sensible boundaries and let them auto flow or resize where possible. A good way to think of this is that we provide browsers with some rules and regulations, then let them decide what’s best—using them as a guide. <h2>What we’re making</h2> In this tutorial, we’re going to take this flexible mindset and produce a responsive grid layout that rules and regulations, then renders the best possible grid for the device that asks for it. Here it is in action: See the Pen <a href="https://codepen.io/piccalilli/pen/MWwEzNe">Responsive grid layout: Example 1</a> by Andy Bell (<a href="https://codepen.io/piccalilli/">@piccalilli</a>) on <a href="https://codepen.io">CodePen</a>. It’s a fully responsive grid that uses no media queries to work across all viewports and it’s all thanks to <a href="https://css-utilitys.com/snippets/css/complete-guide-grid/">CSS Grid</a>. <h2>How it works</h2> First of all, let’s take a look at the code: <pre><code>.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size, 16rem), 1fr)); grid-gap: 1rem; } </code></pre> CSS Grid is incredibly powerful for layout but usually, this type of flexible layout utility would use <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox</a>, because of its flexibility. The reason we use grid for this particular utility, though, is the magic function, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/minmax">minmax</a>. The minmax function allows us to clamp our grid items to maintain just the right amount of control. We achieve this by telling the function what the smallest size is for our items, by using a CSS Custom Property, which has a fallback of 16rem. Then we tell it what the maximum size should be for each item. We declare that as 1fr, which takes 1 portion of the remaining available space. Because each item in this grid uses 1fr, the remaining space is split up equally between the other items, so if there are 10 items, 1fr is equal to 10% of the remaining available space. This is how we get that nice flexibility. <div><h2>FYI</h2> The <code>--auto-grid-min-size</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">Custom Property</a> powers the minimum width. We set this as a Custom Property because we probably never know where this layout will appear, so by making the min-width easily configurable, it can be modified to work in specific contexts. Because we’re setting a default value at the point of using <code>--auto-grid-min-size</code>, we’re reducing the risk of of creating specificity issues and making sure that if <code>--auto-grid-min-size</code> isn’t set: the grid will still operate as we expect it too. Now that’s flexibility. </div> <h2>How can we improve this layout utility?</h2> Because this <code>.auto-grid</code> utility will keep trying to fill remaining available space, it’s useful to either give the layout itself a maximum width or wrap it with a shared wrapper utility. I prefer the latter approach because explicitly sizing the grid itself will reduce its own flexibility. It’s fine to explicitly set a width sometimes, sure, but creating specific components that only deal with page-wide composition, like the wrapper element make working with flexible component systems a dream! Here’s the HTML code for the wrapper element: <pre><code><div class="wrapper"> <ul class="auto-grid">  </ul> </div> </code></pre> And then the CSS: <pre><code>.wrapper { max-width: 65rem; margin-left: auto; margin-right: auto; padding: 0 1rem; } </code></pre> Here it is in action: See the Pen <a href="https://codepen.io/piccalilli/pen/YzXrdwR">Responsive grid layout: Example 2 - Wrapper</a> by Andy Bell (<a href="https://codepen.io/piccalilli/">@piccalilli</a>) on <a href="https://codepen.io">CodePen</a>. <div><h2>FYI</h2> The wrapper is set to be <code>max-width: 55rem</code> in this example, so you can see the effect in the context of this tutorial. Usually I use the wrapper as a central container and limit the width to around 62rem or 1000px. </div> Making the wrapper a separate utility means that we can use it wherever we need it, which is some good ol’ portability! Because the wrapper has a <code>max-width</code> set, it’ll support all viewport sizes too, without using media queries. The padding provides a gutter, so at tiny viewports, you get a 1rem sized gap at each side, which is ideal. <h2>Progressive enhancement</h2> <a href="https://caniuse.com/#feat=css-grid">CSS Grid support</a>, at the time of writing, is 94.69%, so the vast majority of browsers have support for it. We can improve our code to provide a default experience for the minority of users that don’t have support for it with a <a href="https://hankchizljaw.com/wrote/the-p-in-progressive-enhancement-stands-for-pragmatism/">minimum viable experience</a>, though. See the Pen <a href="https://codepen.io/piccalilli/pen/XWbeoMz">https://codepen.io/andybelldesign/pen/XWbeoMz</a> by Andy Bell (<a href="https://codepen.io/piccalilli/">@piccalilli</a>) on <a href="https://codepen.io">CodePen</a>. For this layout, the minimum viable experience is stacked items with some vertical margin between each one, which for the 5.31% of browsers that don’t support CSS grid: <pre><code>.auto-grid > * { max-width: 25rem; margin-left: auto; margin-right: auto; } .auto-grid > * + * { margin-top: 1rem; } @supports (display: grid) { .auto-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--auto-grid-min-size, 16rem), 1fr) ); grid-gap: 1rem; } .auto-grid > * { max-width: unset; margin: unset; } } </code></pre> As the code block demonstrates, the minimum viable experience removes that default style using <a href="https://piccalil.li/tutorial/solution-006-auto-scrolling-responsive-grid">@supports</a> which detects CSS Grid support. This sample will work fine all the way back to super old IE browser versions. You could even use floats and Flexbox if you absolutely wanted a grid-like layout for all browsers and a real power move would be to use something like <a href="https://piccalil.li/tutorial/solution-006-auto-scrolling-responsive-grid">this auto-scrolling approach</a>. Utilising the forgiving nature of CSS to build up, rather than fix and break down will very likely result in you writing better, lighter code, so finding the lowest-tech approach to compatibility issues is only ever going to be a good thing. <h2>Wrapping up</h2> I use this auto-grid all the time. I also use the wrapper utility, extensively in every project that I work on. Hopefully this tutorial has demonstrated the power of modern CSS and how we can write very little to achieve a lot. It really is a powerful language when you give it room to breathe. Even the heavier, progressively enhanced version that supports all browsers is tiny and importantly, so much tinier than writing hacks and specific browser CSS! </article> </main></body></html>