Piccalilli - Tutorial topic archive

A highly configurable switch component using modern CSS techniques

Andy Bell — Tue, 30 Jan 2024 07:55:00 GMT

Safari Technology preview has recently added a native switch component with version 185 and 186, which is great! It’s going to be a long while before this is ready to rock on a production website though.

Still, this collection of demos is worth enjoying. Here’s a video for those who don’t have the latest version of Safari Technology Preview.

Native switches that are seemingly highly customisable with CSS in Safari Technology preview.

FYI

You’re going to need to enable the HTML switch, ::thumb and ::track pseudo-element feature flags for this to work for you.

While we wait for native switch support, I thought I would build a highly configurable switch component using :has(), container queries, Logical Properties and Custom Properties for fun and to show you how much goes into a truly flexible component. Let’s dig in.

What we’re building

See the Pen Our final switch component by Andy Bell (@piccalilli) on CodePen.

HTML first, always

The HTML for this is pretty straightforward:


  Enable setting
  
  On
  Off

The first thing to note is the root of this component is a element. I like that pattern for checkbox and radio buttons because you get a nice increased tap area.

The HTML form control is a checkbox, but I’ve added a role="switch" attribute to it. This is so the component is announced as a switch by a screen reader and also each state change is announced as “on” or “off”, which is appropriate for a switch in my opinion.

I could have used an aria-label for the text label (always add a text label, pals), but I opted instead for a visually hidden . The main reason is it’s easier for a user’s in-browser translation tool to translate the content.

FYI

If you’re going to use this in the wild, avoid using the word “switch” in your label because it’s already announced as a switch by screen readers.

Lastly, there’s 3 decorative only elements. The “on” and “off” text are hidden from assistive tech with aria-hidden="true" because that tech is already announcing those states. The visual thumb of the control is hidden in the same manner too because it only provides value for sighted users.

Configuration settings

As promised, this thing is configurable. There’s no better way in native CSS than Custom Properties.

:root {
  --switch-input-thumb-size: 44px;
  --switch-input-thumb-bg: #ffffff;
  --switch-input-thumb-stroke: 1px solid grey;
  --switch-input-off-bg: #444444;
  --switch-input-off-text: #ffffff;
  --switch-input-on-bg: #00a878;
  --switch-input-on-text: #ffffff;
  --switch-input-gutter: 4px;
  --switch-input-decor-space: var(--switch-input-gutter) 1.25ch;
  --switch-input-focus-stroke: 2px solid #ff6978;
  --switch-input-font-weight: bold;
  --switch-input-font-family: sans-serif;
  --switch-input-font-size: 18cqw;
  --switch-input-transition: inset 50ms linear;
}

I’m not going to go into too much detail at this point. I’ll explain stuff as we come to it in the component’s CSS. One thing I will note though is that the pixel sizes are there for reasons like:

I wanted to hit the WCAG minimum tap target size
The thumb size and thumb gutter are used in calculations, so clamp() is outa the window

Visually hidden utility

.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;
}

I roll this variant of screen reader only CSS out on pretty much every project and have done so for quite some time. This will allow a screen reader to read the label’s content, but will visually hide it and also prevent it from affecting layout etc.

The `.switch-input` root

It’s time to get stuck into the component now.

.switch-input {
  width: calc((var(--switch-input-thumb-size) * 2) + (var(--switch-input-gutter) * 3));
  height: calc(var(--switch-input-thumb-size) + (var(--switch-input-gutter) * 2));
  border-radius: calc(var(--switch-input-thumb-size) + var(--switch-input-gutter));
  padding: var(--switch-input-gutter);
  background: var(--switch-input-off-bg);
  color: var(--switch-input-off-text);
  text-align: left;
  text-transform: uppercase;
  font-family: var(--switch-input-font-family);
  font-weight: var(--switch-input-font-weight);
  position: relative;
  cursor: pointer;
  container-type: inline-size;
}

The first calculation is the width of the component itself because it is also the switch “track”. The two configuration options used are --switch-input-thumb-size and --switch-input-thumb-gutter. The thumb size is self-explanatory, but the gutter is the space around the thumb.

The gutter provides space around the thumb, so we need to account for each side of the overall .switch-input element and also added space for the middle. The formula for the calculation is thumbSize x 2 added to gutter x 3.

The border-radius uses the following formula for relative rounded corners: radius + padding. It’s not as visible in this context as say, a rounded rectangle, but if you have a large gutter it will make a difference.

There’s a lot of inheritable CSS in here such as font treatments, so we’ll skip that. The last bit I want to focus on is the container-type: inline-size. This will be used later to calculate the label’s size, so it’s critical that it is present here because that size will be relative to the track’s inline size. We also roll out position: relative because everything is absolutely positioned from here on in.

The decorative text elements

FYI

These are completely optional. You might also want to use icons for a theme switcher, for example.

.switch-input__decor {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  padding: var(--switch-input-decor-space);
  font-size: var(--switch-input-font-size);
  display: flex;
  width: 100%;
  align-items: center;
}

We’re using the logical versions of inset here because it’ll be handy for this component to respond the HTML dir attribute. For example, if a parent HTML has dir="rtl", it’ll automatically present as rtl.

FYI

You might not want this to be the behaviour of your version of this component. If you add direction: ltr to the .switch-input CSS, it’ll behave as you wish it too.

It’s worth noting that the inset shorthand property is not logical. It is shorthand for top, right, bottom and left. That’s why we’re using the specific logical versions.

You can also see that we’re applying our font-size here, rather than inheriting from the parent. This is because the --switch-input-font-size Custom Property is using cqw units: a portion of the container’s computed width.

As the thumb sizes changes, the whole component, including the text changes with it. As the padding increases, the need for a relative border radius for the parent component is demonstrated too.

As that demo shows, if the component grows, the labels grow with it nicely. Please use this approach with caution though. You need to make sure that the text is large enough (ideally computed to at least 16px) and that it also zooms appropriately. With the switch input’s overall size being pixel controlled in this example, and the fact we’re using 44px — the minimum tap target size — that is the case.

Future stuff: align-content

A nice improvement to this decorative text’s rule would be the following (don’t add this to your code):

align-content: center;
display: block;
block-size: 100%;

We’re only using flexbox to vertically align our text labels in the middle. This new alignment capability is arriving to block elements in the future which should render those already completely out of date, vertical alignment CSS memes, useless, once and for all. I imagine this won’t change the social media clout chaser’s behaviour though, unfortunately.

.switch-input__decor[data-switch-input-state='off'] {
  justify-content: flex-end;
}

Lastly for this element, we’re adding a CUBE Exception to push the “off” label out to the inline end because the thumb will be at the inline start in the default off state.

The thumb element

Time to style up our little round thumb element.

.switch-input__thumb {
  display: block;
  width: var(--switch-input-thumb-size);
  height: var(--switch-input-thumb-size);
  border-radius: var(--switch-input-thumb-size);
  background: var(--switch-input-thumb-bg);
  border: var(--switch-input-thumb-stroke);
  z-index: 1;
  position: absolute;
  inset-block-start: var(--switch-input-gutter);
  inset-inline-start: var(--switch-input-gutter);
  transition: var(--switch-input-transition);
}

We’re making a square by setting the width and height, then making that square a circle by using the same configuration value for border-radius. You could use percentages here, but I personally prefer this approach. I think it’s a symptom of the bad old days of browsers.

It’s important to set z-index because we want this to always be a layer up from our decorative labels and guarantees that the thumb won’t interfere with the visual text.

Finally, using absolute positioning, the thumb is set to the inline and block start, using the logical inset values. A transition (very quick one!) is added to smooth out the on and off state changes. Normally I would recommend that you don’t transition inset because translate is much smoother, but in this context, it should be fine because it’s not a large surface area and the transition is very quick (100ms).

Focus states

The important thing to get right here for me is that the focus ring should show for keyboard users only and not when the component is clicked or tapped.

.switch-input:has(:focus-visible) .switch-input__thumb {
  outline: var(--switch-input-focus-stroke);
}

Luckily :focus-visible does this well and is very well supported.

The party trick here is the usage of :has(). Historically with this sort of component you’d have to write a selector like this: .switch-input input:focus-visible ~ .switch-input__thumb.

This would require the source order to be just right in the component. Now that we have :has() — which is also very well supported — that state can be determined at the root level of the component. In theory, the input could be the last child element now.

The on/off states

This is the last bit of CSS and we are done!

.switch-input:has(:checked) {
  background: var(--switch-input-on-bg);
  color: var(--switch-input-on-text);
}

.switch-input:has(:checked) .switch-input__thumb {
  inset-inline-start: calc(
    var(--switch-input-thumb-size) + (var(--switch-input-gutter) * 2)
  );
}

Historically setting the background of the switch component would again, require some weird combination selectors and extra elements, or require a JavaScript dependency. Not anymore because :has() allows us to change the background and text colour of the component (if required) based on its child :checked state. Handy!

We also use that pattern to change the position of the thumb. It’s a calculation that similar to the one we added earlier to set the size of the overall component. This time, it’s pushing the thumb to the end when the switch is “on”. This is why the --switch-input-gutter is doubled, to account for the start space and also the middle space.

Wrapping up

After all that, we’ve got ourselves a lovely little component:

See the Pen Our final switch component by Andy Bell (@piccalilli) on CodePen.

Would I use this in production? Probably, yeh. There has to be a damn good reason for a switch in the first place though.

Regardless, this is a handy little context to teach you about some of the super powers CSS gives us now.

Build a fancy hover animation

Andy Bell — Fri, 09 Apr 2021 00:00:00 GMT

If you’ve got a collection of images, each with different colour profiles, it’s hard to make them look cohesive—especially when they’re in a tight grid.

We could edit and grade them all in Photoshop, but what happens when a new image is added? With CSS, we can use filters, pseudo-elements and transitions to create not only a cohesive look and feel, but also a fancy interactive element—all while maintaining semantic HTML and accessibility.

What we’re building

We’re building a team page that features 6 team members, in a responsive grid. By default, all you can see is their name and a black and white picture. When you hover or focus, their picture goes full-colour, their job title slides in and we introduce some nice filter effects.

See the Pen Build a fancy hover animation - complete by Andy Bell (@piccalilli) on CodePen.

Pretty sweet right? Let’s dig in.

Getting started

For this tutorial you only need two files. A HTML file and a CSS file:

index.html
global.css

HTML

The first thing we’ll do is add the shell of our HTML document. Open up index.html and add the following to it:



  
    
    
    
    Fancy hover card

All we have here are the basics of a HTML document. We’re pulling in a CSS reset and some fonts from Google Fonts. We’re also linking up to our global.css file.

Let’s add the main

. Inside the element, add the following HTML:


	Our Team
	
		Hover or focus over each card to see the person’s job title slide in and the
		colour treatment change.

This is pretty straightforward, too. The

element creates a semantic grouping of the team section for us and in that group, we’re using a heading and paragraph to describe the content.

Next, let’s add the list of team members. Inside the

element, add the following:


	
		
			Anita Simmons
			Founder
			
		
	
	
		
			Celina Harris
			Creative Director
			
		
	
	
		
			Ruby Morris
			Technical Lead
			
		
	
	
		
			Nicholas Castro
			Designer
			
		
	
	
		
			Marc Dixon
			Developer
			
		
	
	
		
			Chad Chadson
			Intern

There’s a couple of things to cover here. The first thing is that you might be confused why we’ve got role="list" on a list. The reason for this is VoiceOver on iOS and Mac can remove list semantics when list styles are removed. It still annoys me now, but here we are.

Inside this list is each profile. These are elements with, wait, headings as child elements?! Yep, you can add all sorts of flow content inside an element and it makes life much easier with this sort of context. Just be wary that selecting text can get a bit trickier for users when you use this sort of markup.

That’s the HTML sorted, so let’s make it look good!

CSS

We’re going to partially lean into the CUBE CSS methodology for this project. If you haven’t already read up on it, no worries: we’re not getting hugely into it, but knowing what it’s all about will probably benefit you.

The first thing we’re doing is setting some global styles. I try to style as much as I can as high up as I can and let the cascade do as much as possible. This results in some very light CSS, even in extremely large projects.

In this particular context, there’s not a huge amount of global CSS to write, but there’s still some! Open up global.css and add the following to it:

/* Globals */
body {
  font-family: 'Inter', sans-serif;
  max-width: 55rem;
  padding: 2rem 1.5rem;
  margin: 0 auto;
  color: #241623;
  background: #eef2f4;
}

h1 {
  font-weight: 900;
  font-size: 2.7rem;
  max-width: 20ch;
}

p {
  max-width: 60ch;
}

a {
  color: currentColor;
}

The only thing to highlight here is that we’re limiting the line-lengths of the

and

elements to improve readability. You can read about that here.

Let’s add some utilities now. There’s two to add: a grid layout and a flow utility. I’ve written explainers for them both so check those out if you want to learn more, but for now, we’re just going to pop them into our CSS file.

Open up global.css and add the following:

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size, 14rem), 1fr));
  grid-gap: var(--auto-grid-gap, 0);
  padding: 0;
}

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

With those in, let’s add a tiny composition style too. The flow utility adds space to adjacent sibling elements and uses a custom property which allows us to override it. I’m happy with the default 1em space for the heading and paragraph, but the grid of team members needs a touch more space. Add the following to your CSS:

.team {
  --flow-space: 2em;
}

Because the .team element is a

, it inherits the base font-size, which because we’ve not changed it, is around 16px. This means 1em will be equal to that amount, which is a touch too tight, so we instead, set it to 2em. The handy thing about using em units is that if the font-size changes, that spacing will be relative, too.

Creating the profile block

Time to get stuck into the main course of this tutorial. All the shell is built and really, it doesn’t look too bad.

See the Pen Build a fancy hover animation - pre-profile by Andy Bell (@piccalilli) on CodePen.

Those profile cards need building, so first of all, let’s add the base block CSS. Open up global.css and add the following to it:

.profile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1/1;
  min-height: 150px;
  position: relative;
  padding: 1.5rem;
  backface-visibility: hidden;
  text-decoration: none;
  color: #ffffff;
  overflow: hidden;
}

We’re using flexbox in a column flow, which in this current writing mode, means that the main axis runs top-to-bottom. To push all the content down, we justify the content to flex-end. We’re also using aspect-ratio to make it a square. If that’s not supported, the padding and min-height will take over for us as a suitable fallback; good ol’ progressive enhancement.

Lastly, we add a bit of visual treatment and backface-visibility: hidden; to help smooth out the transitions later on.

We need to add two pseudo-elements now that provide two gradient overlays. One gradient overlay is for making the text readable, regardless of what image is on display, and the other is for creating a nice orange overlay on hover. Add the following CSS:

.profile::before,
.profile::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

We use absolute positioning for this decorative treatment because we want it to sit on top of everything else. We also don’t want it to affect the flow of content inside a profile card.

We need to add the gradients next, so first, add the following CSS:

.profile::before {
  background: linear-gradient(
    to top,
    hsl(0 0% 0% / 0.79) 0%,
    hsl(0 0% 0% / 0.787) 7.8%,
    hsl(0 0% 0% / 0.779) 14.4%,
    hsl(0 0% 0% / 0.765) 20.2%,
    hsl(0 0% 0% / 0.744) 25.3%,
    hsl(0 0% 0% / 0.717) 29.9%,
    hsl(0 0% 0% / 0.683) 34.3%,
    hsl(0 0% 0% / 0.641) 38.7%,
    hsl(0 0% 0% / 0.592) 43.3%,
    hsl(0 0% 0% / 0.534) 48.4%,
    hsl(0 0% 0% / 0.468) 54.1%,
    hsl(0 0% 0% / 0.393) 60.6%,
    hsl(0 0% 0% / 0.31) 68.3%,
    hsl(0 0% 0% / 0.216) 77.3%,
    hsl(0 0% 0% / 0.113) 87.7%,
    hsl(0 0% 0% / 0) 100%
  );
  transition: 300ms opacity linear;
}

.profile::after {
  background: linear-gradient(45deg, hsl(5 97% 63% / 0.7) 0, hsl(5 97% 63% / 0) 100%);
  opacity: 0;
  transition: 300ms opacity linear;
}

You’re probably thinking, “what the hell is that gradient all about?!?” And frankly, I get it. The first thing to explain this is that we need to provide contrast for the white text, so a very dark gradient does this nicely. The problem with gradients at the moment is that they are not as smooth as they could be if we did a simple black to transparent black. The reason we add so many colour stops to the ::before gradient is to create a really smooth finish. I recommend you read this article and this article. I used this editor to create it too.

The second gradient is much simpler. It’s a 45deg angled gradient of a lush orange tone to provide that nice hover treatment.

Gradients are done, so now, let’s make sure that content sits on top of them. Add the following CSS:

.profile > * {
  z-index: 1;
}

This selects all direct child elements of the .profile element and sets their z-index to 1. We don’t need to add position: relative to do this because we are in a flex context. The same would be the case if we were in a grid context too.

Let’s deal with the image next. Add the following CSS:

.profile img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  z-index: -1;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 200ms ease, transform 250ms linear;
}

There’s loads going on here, so let’s break it down:

We make it absolutely positioned so it effectively acts as a background image, not affecting the content within the profile block
Using object-fit: cover means that if we use an image that isn’t square, it won’t look squished when it’s set to fill it’s parent with width: 100%; and height: 100%;
We make it grayscale by using the grayscale filter
Finally, we set z-index: -1 to send it to the back of it’s stacking context, which is the .profile element it lives in

Lots covered there, but we’ve still got more things to add. Let’s concentrate on the text content. Add the following CSS:

.profile h2 {
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.03ch;
  transition: 300ms transform ease;
}

.profile p {
  font-size: 1.2rem;
  font-weight: 500;
}

.profile p {
  opacity: 0;
  transition: 300ms opacity linear, 300ms transform ease-in-out;
}

.profile h2,
.profile p {
  transform: translateY(2ex);
}

We start with some typesetting and then the attention quickly turns to how this content will interact. By default, we set the

to have 0 opacity. This combined with both the

and

being pushed down with transform makes the p “disappear” because it has the job title in it.

See the Pen Build a fancy hover animation - visible p element by Andy Bell (@piccalilli) on CodePen.

FYI

In that the above demo, I’ve made the

visible so you can see how it works with the

. Go ahead and interact with it too!

One thing to touch on before we move on to interactions is that we are using ex units to push the text down. An ex unit is the x-height—the height of the “x” character in the chosen font and size. It’s a good idea to use type units to deal with type because they scale with the type itself, giving you a solid and flexible front-end.

Right, let’s add the last bit, the interactive state. Add this CSS to the end of your global.css file:

.profile:focus {
  outline: 0.5rem solid white;
  outline-offset: -0.5rem;
}

.profile:hover :is(h2, p),
.profile:focus :is(h2, p) {
  transform: none;
}

.profile:hover p,
.profile:focus p {
  opacity: 1;
  transition-delay: 200ms;
}

.profile:hover::after,
.profile:focus::after,
.profile:hover::before,
.profile:focus::before {
  opacity: 0.7;
}

.profile:hover img,
.profile:focus img {
  filter: grayscale(0);
  transform: scale(1.05) rotate(1deg);
}

For this section, when I say “shared interactive state”, I mean where both :hover and :focus share the same styles. Let’s break this down into pieces:

We create a distinct :focus state on .profile so when a keyboard user focuses with their tab key, it’s very clear which one is in focus
The first thing we change with the shared interactive state is the transform of the
and
, bringing them back to their natural flow
The
gets shown next in the shared interactive state by setting opacity to 1. We also use a little transition-delay to allow other animations to happen prior to it being shown.
Lastly, we show the second gradient and set it to have the same opacity as the existing gradient. This happens along with the image getting the grayscale effect removed and a very subtle zoom and skew

With that, we are done!

See the Pen Build a fancy hover animation - complete by Andy Bell (@piccalilli) on CodePen.

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

Piccalilli - Tutorial topic archive

A highly configurable switch component using modern CSS techniques

FYI

What we’re building

HTML first, always

FYI

Configuration settings

Visually hidden utility

The .switch-input root

The decorative text elements

FYI

FYI

Future stuff: align-content

The thumb element

Focus states

The on/off states

Wrapping up

Build a fancy hover animation

What we’re building

Getting started

HTML

Our Team

Anita Simmons

Celina Harris

Ruby Morris

Nicholas Castro

Marc Dixon

Chad Chadson

CSS

Creating the profile block

FYI

. Go ahead and interact with it too!

and , bringing them back to their natural flow

Fluid typography with CSS clamp

Getting started

Fusce dapibus, tellus ac cursus commodo

Donec ullamcorper nulla non

Morbi leo risus, porta ac consectetur

Digging in to the CSS

FYI

Implementing our system

FYI

Wrapping up

Build a responsive media browser with CSS

Getting started

FYI

A quick look at the markup

Build a dashboard with CUBE CSS

Starter files

Setting up Sass

FYI

Global styles

Utilities and tokens

The `.switch-input` root

and
, bringing them back to their natural flow