Piccalilli - Reality Check topic archive

Reality Check #3: Building out a layered hero grid layout from Dribbble

Andy Bell — Wed, 17 Jan 2024 00:00:00 GMT

First up, you may have noticed that Reality Check now has a new home. I've moved it from Set Studio's blog to here because I think it makes more sense here, based on the technical nature of the content.

This is also my first post since deciding to bring back Piccalilli. I wanted it to be a good'n so here goes.

This edition’s project

I’ve selected Wave Web Site Design: Landing Page / Home Page UI by Halo UI/UX on Dribbble. The low fidelity hero background image with a photographic stripe through the middle really captured my imagination and it gave me an opportunity to use it — along with other elements on the page — as an opportunity to talk about choosing the path of least resistance. Our focus will be on the hero element only.

Wave Web Site Design: Landing Page / Home Page UI by Halo UI/UX from Dribbble" />

I’m not actually going to make any design alterations either. Sure, I'm gonna use a Google Font and tweak some of the elements and copy, but there's been no static comp in Figma this time. We're instead going to explore how you can treat a static composition as a guide, rather than a source of truth because I know a lot of y'all work with designers who don't have much technical knowledge and I want to help you out for the future.

Planning and asset creation

Although I'm not re-working the design, I still wanted to create/treat some assets like the background image(s) and people shots.

It's also a great opportunity to plan before you build. If I were to give one piece of crucial advice to improve your front-end skills, it's before you even think about code, grab a cap of what you're building and draw all over it.

For this project, I knew it was gonna be all about CSS grid, so it was imperative that I sketched out the grid lines. This helped me work out the markup of the page and which elements needed grouping where.

Keeping things simple: background

I'm lucky that I'm a designer by trade so I had the ability to draw out a low-fidelity version of the mountains with the pen tool, knowing I'd mask the photographic version in CSS.

Unsplash by Marin Tulard" />

I could have made this one background asset, but as this Dribbble composition has only considered large viewports (as is tradition), that central stripe would cause problems on smaller viewports. More on this later.

The main point to make is getting all this stuff ready in advance allows me to get everything in order, so my focus is purely on semantic markup and CSS when I come to write code.

With all the planning done and assets exported, converted and optimised, it's time to get stuck in with some code.

HTML first, always

Although the layout is on a pretty interesting grid, the markup actually follows a pretty logical flow.


  
    Wave
    
      Est. 1961
      
        
          We create travels that feel like real adventures — in the most exciting of
          Earth’s corners.
        
        
          Explore
        
      
      
      
        Explore surfer stories
        
          
            
              
              
            
            
            
          
          
            Two images of surfers, one surfing on a wave and the other, standing next to
            their board. A roundel sits next to them with round text, repeated, reading
            'surfer stories'.

FYI

I've made the roundel SVG an image (more on why we're using SVG later). You can grab it here if you want to build along and use an inline SVG for it.

One thing to note is I've added a visually hidden

because there was no heading. There's headings later in the original composition, but you gotta start with at least a

, so the rest of the page follows a logical hierarchy.

I've also used a element for the photographic background image because I wanted to provide modern image formats in a progressively enhanced manner. The SVG mask is a standard element.

Keeping things simple: circular text

The images of the surfers and the the "Surfer Stories" roundel presented a challenge in itself. It's tempting in these situations to flex out some CSS/JS techniques — like Michelle Barker’s smart approach to positioning text on a path — but the repeated text provides no value to people that can't see the roundel itself.

Instead, I opted to treat the images and roundel as presentational(ish) and leverage a

and

to describe the content to people that can't see it. I also added a more appropriate, visually hidden label to make the link make more sense.

The text was achieved with the following Figma plugin. I love how simple and inclusive this plugin is. Positioning text on a path is super fiddly in tools like Adobe Illustrator, so a plugin like this in Figma opens this technique up to more people.

The overall point I'm trying to make here though is keeping things simple where loads of effort would be wasted — for a largely presentational element — frees up your energy to focus on what's really important: making a website that works for everyone.

Global CSS

Ooof, I've just checked the word count and I've gone over a thousand words before I've even got near the CSS. There's lots of important things to get right before you style things up and the CSS is actually quite straightforward from here on in, so consider this as laying the foundation properly, to get things right for everyone.

Before the global CSS gets added, I pulled in this CSS reset to get some sensible defaults going. As always, I'm using the CUBE CSS methodology.

Global CSS-wise, it's pretty slim

:root {
  --font-base: 'DM Sans', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --color-dark: #252525;
  --color-light: #ffffff;
  --color-mid: #555555;
  --gutter: 1.5rem;
}

body {
  background: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-base);
  margin: 0;
}

a:not([class]) {
  color: var(--color-mid);
}

a:not([class]):hover {
  text-decoration: none;
}

abbr {
  text-decoration: none;
  cursor: help;
}

figure {
  margin: 0;
}

:focus {
  outline: 2px solid currentColor;
  outline-offset: 0.25lh;
}

It's light because we're only focusing on the hero layout. Were we to be building the whole site, there'd be a lot more to add, but in the interests of keeping this article as slim as possible, we'll focus only on what appears on the page we have.

Everything is pretty self-explanatory, but the part I want to shed light on is the styling. I used that for the Est. 1961 section so I could expand "Est." as "Established". I like to add a help cursor to these elements too. Also, check out the outline-offset. Using the new(ish) lh unit is pretty handy to set that.

Lastly, always underline your links. I opted not to remove the link underlines as the original composition suggested.

Utilities

Traditionally, I tackle the C in CUBE CSS first: compositions, but today, it's utilities. Let's start with the 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;
}

Using this quick tip, elements that have this class visually disappear but are still accessible to screen readers etc.

Let's see at how the page currently looks:

To see this demo, head over to the web version.

Compositions

We've got two layouts to tackle. First, there's a negative grid which stacks items on top of each other.

Negative grid

.negative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, clamp(5rem, 33%, 10rem));
  transform: scale(83.333%);
  transform-origin: left;
}

.negative-grid > * {
  transform: scale(120%);
  transform-origin: left;
}

You might have thought some negative margin would power this, but there's a simpler way: using the power of transform.

The trick is to upscale each item — 120%/1.2 in our case — then downscale the parent to 83.333%. You calculate this by dividing 1 by the upscaled ratio (1.2). This means everything is the same size, but the items now stack naturally. Make sure you set a transform-origin though to make it as predictable as possible.

One thing to highlight here is none of the visual styles for the surfer photos or the roundel are being covered in this layout. Compositions are skeletal layouts that focus only on positioning their children.

Wrapper

This one is really straightforward:

.wrapper {
  margin-inline: auto;
  max-width: 1600px;
  padding-inline: var(--gutter);
}

It pushes content into the middle of the viewport. You could use relative units for the max width, or get more creative about the sizing like this article, but in this context, we're keeping it simple.

The page is not looking great yet, but it's worth us checking in to see how things are looking still:

To see this demo, head over to the web version.

Blocks

Let's get stuck into the good stuff now: making stuff look sweet!

Hero

Before we tackle the layout of the hero, I just want to remind you of the planning I did before:

The wrapper (magenta lines) is already accounted for and is already present in our hero markup. All we need to focus on now is:

The grid layout
Layering the backgrounds
Masking the background photo

The other point of focus is what the hell do we do on small viewports? I think slightly modifying the display order (tread carefully with this) and creating a right-hand gutter that reveals the mountains photo is a pretty sensible approach.

Let's tackle that first, building mobile-up.

.hero {
  position: relative;
  padding-block: 2rem;
  text-transform: uppercase;
}

.hero p {
  max-width: 40ch;
}

.hero a {
  text-transform: none;
}

I'm letting inheritance do its job with text-transform because most of the content is uppercase. I then revert that for the links (I'd personally keep it all consistent).

Setting a max-width on the paragraphs is to account for those weird viewport sizes that are not quite narrow. The grid takes care of them in most cases though.

The outer hero block is a relative parent and the grid is on hero__inner, so let's do the smaller viewport version first.

.hero__inner {
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-rows: 1fr auto auto;
  gap: var(--gutter) 0;
  position: relative;
  z-index: 1;
}

.hero__inner > * {
  grid-column: 1;
}

This is still a three row grid, but now I'm setting two columns, split as 80/20. You could make the 20% column a fixed width if you wanted then 1fr on the first column to fill the space.

The reason I've added z-index is because:

I want to create a stacking context to better control the illustrative text later
I want the grid to sit above the soon to be absolutely positioned background elements

All the direct children of the grid are added to the first column here too because as it stands, the second column is a gutter.

Let's map out the rows and other details.

.hero__meta {
  grid-row: 1;
  color: var(--color-mid);
}

.hero__decor-text {
  grid-row: 1;
  grid-column: 1/3;
  margin-top: 3rem;
  z-index: -1;
}

.hero__content {
  grid-row: 2;
}

.hero__action {
  grid-row: 3;
}

The main thing to touch on here is the hero__decor-text element. Everything is in the first column, but I wanted this to "bleed out" into the gutter. The reason it's grid-column: 1/3 and not grid-column: 1/2 is because if you want an item to span over multiple columns, you need to set the end to be the next column's grid line. Column three doesn't exist, but its grid line does.

FYI

You're not alone if you find this confusing by the way. I also find it confusing as hell. I'd recommend reading this lesson of the Learn CSS course.

The negative z-index is to put the decorative text behind proper content. We can do this because we're in a new stacking context, thanks to our .hero__inner grid layout.

That's the small viewport layout done, so let's get the small viewport background done.

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg :is(img, picture) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.hero__bg picture {
  z-index: 1;
  clip-path: inset(0 0 0 80%);
}

The .hero__bg element is a wrapping container for both backgrounds. Because .hero is a relative parent, we can safely set the background to be absolutely positioned and fill the whole parent with inset: 0. Setting z-index: 0 sits the images behind the content.

Next up, we need all the images to fill the .hero__bg, so again, we can use absolute positioning. Setting object-fit: cover prevents them from squishing and crops them out for us, accordingly.

Lastly, the mask that hides most of the photographic mountains. We know we have 20% of the layout as gutter, so the clip-path can take up 80% of the image. Job done!

Let's now expand the layout for larger viewports.

@media (min-width: 985px) {
  .hero__inner {
    padding-block: 4rem;
    gap: 0 var(--gutter);
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .hero__meta {
    grid-column: 3;
    grid-row: 1;
  }

  .hero__content {
    grid-column: 1;
    grid-row: 1;
  }

  .hero__decor-text {
    grid-column: 1/4;
    grid-row: 4/1;
  }

  .hero__action {
    grid-column: 3;
    grid-row: 3;
  }

  .hero__bg picture {
    clip-path: inset(0 40% 0 40%);
  }
}

I can hear some of you thinking “Andy, using media queries for layout?!?!”. Sometimes you just gotta do it — especially for very specific layouts like this one.

There's a balance with these things. Sure, I could spend hours working out an Every Layout-like layout, but I think this setup is also pretty flexible. If I were having to roll out multiple breakpoints, I'd start to re-work the visual design, but I don't need to here.

I guess the message is even I use media queries and specific layouts sometimes, so if you're dialled in on being the browser's mentor, not it's micromanager: be easy on yourself and choose the path of least resistance where you need to.

In terms of our above code, it's pretty self explanatory based on what we've already covered earlier in the article. All we're doing is expanding and spanning multiple columns/rows and placing items in specific places. Because it was planned out before the build, it was quick and easy with grid.

Avatar

This is pretty cut and dry CSS:

.avatar {
  border-radius: 100%;
  border: 0.25em solid var(--color-light);
  aspect-ratio: 1/1;
  object-fit: cover;
}

We're making them round with a square aspect ratio. The object-fit property is making sure images don't get squished. It's more defensive CSS than anything else because even though our images are square, they might not be in the longer term (were this a real project), so this little rule future proofs things a bit.

Roundel

Right, we're on the last part. Sorry, this has been a real deep dive 😅

Let's first get everything looking nice.

.roundel {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--color-dark);
  color: var(--color-light);
  padding: 0.5em;
  border-radius: 100%;
}

.roundel img {
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: roundel-rotate 5s linear 0s infinite;
  animation-play-state: paused;
}

.roundel svg {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The .roundel itself is the black circular element which is also a relative parent. Just like the .avatar, we're using aspect-ratio to make it a square, before using border-radius to make that a circle.

Now that we have a relative parent, we can again, use absolute positioning to position it's children. Just like the .hero images, it's a pretty safe context for that — mainly because in our .roundel context, it's all pretty predictable.

FYI

You might be thinking "where the hell is the sizing for this and the avatar?". We're letting the layout size our blocks rather than specifying a block's size and space specifically.

This results in resilient user interfaces that are less prone to breakages.

Wrapping up

That's it, we are done! Let's check in how it looks.

To see this demo, head over to the web version.

I feel like this one has been considerably simpler than the other two editions, but it has been a great opportunity for me to show you the pre-coding stuff and also — most importantly — the value and trade-offs of simplifying a build as much as you can.

Reality Check #2: Building out a fancy 404 page from Layers

Andy Bell — Wed, 15 Nov 2023 00:00:00 GMT

Ok, I promised a more complex example on the last edition of Reality Check, and here we go. The trick here though is it looks complex, but we’re gonna lean into the power of CSS to make it pretty darn easy.

This edition’s project

I’ve selected 404 Error Page (Mobile) by Davi Pribadi on Layers. You might look at this and think, that it’s tricky. It certainly can be tricky, but we’re gonna make it easy and you’re gonna learn some CSS tricks.

404 Error Page (Mobile) by Davi Pribadi" />

I’m, as usual, going to make some design alterations though. I’m not a huge fan of the colours, the content, or the inner shadow, so I’ve updated those. The overall principle of that bleed-out heading that’s got a gradient, and set behind the curved content container remains though, because this is where the tricks will be learned.

HTML first, always

Here’s everything inside the element. HTML-wise, it’s really straightforward.


  404
  
    
      We’re sorry but the page you’re looking for can’t be found.
      Go back to homepage

You might be wondering why there’s an extra

: the .curved-container__content element. It’ll make sense later, I promise. The takeaway here is we want to keep the HTML as simple and semantic as possible, which is what we’ve got.

Global CSS

Just like the previous edition, we’re going to be building with the CUBE CSS principles. That starts with styling as much as you can, globally.

It makes sense to start with the global variables that give us some nice consistency. The main part of those variables is the fluid type and fluid space scale, using Utopia.

Fluid type and fluid space allow us to create truly responsive designs that respond to the viewport, rather than forcing rigid, catch-all sizes. We’d definitely recommend that you read up on the Utopia site.

:root {
  --font-base: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --font-display: 'Rubik Mono One', monospace;
  --color-dark: #363950;
  --color-light: #ffffff;
  --color-light-shade: #f3f3f3;
  --color-primary: #b25d66;
  --gradient-primary: linear-gradient(111deg, #002846 0%, #ff7373 82.7%, #ffaf7b 97.2%);
  --gradient-secondary: linear-gradient(180deg, #a25863 0%, #373950 100%);
  --size-step-0: clamp(1rem, 0.9592rem + 0.2041vw, 1.125rem);
  --size-step-1: clamp(1.2rem, 1.1022rem + 0.4888vw, 1.4994rem);
  --size-step-2: clamp(1.44rem, 1.2576rem + 0.9122vw, 1.9988rem);
  --size-step-3: clamp(1.7281rem, 1.4224rem + 1.5286vw, 2.6644rem);
  --size-step-4: clamp(2.0738rem, 1.5911rem + 2.4133vw, 3.5519rem);
  --size-step-5: clamp(2.4881rem, 1.7545rem + 3.6684vw, 4.735rem);
  --size-mega: 45vw;
  --space-s: clamp(1rem, 0.9592rem + 0.2041vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4388rem + 0.3061vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9184rem + 0.4082vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8776rem + 0.6122vw, 3.375rem);
  --gutter: var(--space-m);
}

The tricky part of this article though, is although global styles would be extremely useful in the wider context of the website this 404 page lives in, I don’t want to make this article longer than it needs to be. Still, let’s just have a look at the baseline styles, which build on top of this CSS reset.

body {
  font-family: var(--font-base);
  font-size: var(--size-step-0);
  background: var(--color-light-shade);
  color: var(--color-dark);
  overflow-x: hidden;
}

h1 {
  font-size: var(--size-step-5);
}

h2 {
  font-size: var(--size-step-4);
}

h3 {
  font-size: var(--size-step-3);
}

:is(h1, h2, h3) {
  max-width: 30ch;
}

:focus {
  outline-offset: 4px;
  outline-color: var(--focus-color, var(--color-dark));
}

p {
  max-width: 60ch;
}

a {
  color: currentColor;
}

::selection {
  background: var(--color-dark);
  color: var(--color-light);
}

It’s mainly global typography settings to make prose content read nicely. Even though this stuff doesn’t feature much on our build, it’s useful to add in.

The one part I do want to draw your attention to though is the overflow-x: hidden rule on the body. Because our “404” heading bleeds out of the edges of our viewport, we need to conceal that. It won’t affect anything for the user, but if we wanted to use position: sticky, we’ll have problems, so I thought I’d pre-warn you.

Compositions (layout)

We’ve only got one composition in this build, the flow utility, which adds space to the top of sibling elements.

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

You’ll spot that it is already on our .curved-container__content element and if you’re interested in how it works, check out this article.

Let’s check in how it looks:

To see this demo, head over to the web version.

Only global CSS and layouts are in, but it’s taking shape.

Blocks (components)

Let’s start with the most interesting block: that big ol’ “404” heading. We’ve got an accurately named class of mega-heading on it, so let’s apply some styles:

.mega-heading {
  width: calc(100vw + 0.2ch);
  font-family: var(--font-display);
  letter-spacing: -0.1ch;
  font-size: var(--size-mega);
  line-height: 1;
  margin-inline-start: 50%;
  transform: translateX(-50%);
  color: transparent;
  background-color: var(--color-dark);
  background-image: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
}

Big ol’ block of CSS right? Fear not, let’s break it down:

We want the heading to be more than full bleed, so using calc, it’s 100% plus 0.2 the width of a 0 character (a ch unit) in the font’s rendered size. The text is massive, so that equates to a decent bleed out.
Still using a ch unit, we compress the letters a bit with letter-spacing.
Even though we’re using a mono font and therefore can better predict font sizing, I’m sorry to say that 45vw is a magic number (but at least we made it a variable). It’s just one of those things you gotta do by eye I’m afraid. The saving grace is in this instance we know that our heading is going to be “404”, so we have a modicum of control. If this was to be more of a shared component, I’d recommend looking into the “fit text” pattern, along with some white-space treatment.
We completely center align the heading with a combination of 50% margin and -50% transform. This centers the element even when it’s as wide as, or wider than the viewport.

Adding the gradient

The gradient part needs a bit more explanation, so let’s break out of the breakdown.

First up, we’re using --gradient-primary from our global variables, but setting it as the background. This is because we’re going to use the text as a mask with background-clip: text, which uses the shape of the text to clip the background image / colour.

FYI

You’ll also notice we are using background-color too. This is an insurance policy for if the gradient fails on a low powered device or if someone accidentally applies transparency (alpha) to the gradient, being that it’s a global variable. It’s all about defensive CSS!

The only way this gradient or colour is going to show up is if we make the text transparent in colour with color: transparent. Don’t panic though, because it renders all good in high contrast mode.

Adding the curved container block

This is the part of the page that contains the short paragraph and button. There’s a nice curve on the top too.

You’ll also notice that this content appears to sit above the “404” and might rightly be thinking “damn this is gonna be complicated”.

One thing I can’t stress enough is that CSS stuff only gets complicated if you make it complicated. CSS is outrageously powerful if you learn how it works at the core. Let me teach you some of that now.

Firstly, the curve. We could over-complicate this by utilising clip-path, but why bother? Let’s add a nice, simple SVG element to our HTML, which now looks like this.


  404
  
    
    
      We’re sorry but the page you’re looking for can’t be found.
      Go back to homepage

A couple of bits to note about this SVG element:

We’ve got a preserveAspectRatio="none" attribute on there because we want this thing to “squish” into shape later.
We’ve got aria-hidden="true" and focusable="false" on there because it’s purely decorative, so we don’t want assistive tech to accidentally interact with it.

Now, let’s add some CSS:

.curved-container {
  font-family: var(--font-display);
  font-size: var(--size-mega);
  background: var(--color-light);
  position: relative;
  margin-block-start: -0.45ex;
}

Now, you might be thinking “what the hell are you doing setting such massive text?”. It’s a good question! Remember how we want to do things as simple as possible right? The simplest way to position everything is to know exactly how big the text we’re covering up is. Now we’ve got that in place, we can use relative units in a predictable manner, knowing they are explicitly related to the text we’re partially concealing.

In fact, the first place we use that is positioning this container over part of the text. Because the container’s font size is the same as the “404” heading’s, we can use an ex unit — the height of the x character — to add negative margin to our curved container.

.curved-container svg {
  font: inherit;
  fill: var(--color-light);
  display: block;
  width: 100%;
  height: 0.2ex;
  position: absolute;
  bottom: calc(100% - 1px);
  filter: drop-shadow(0px -10px 18px rgb(0 0 0 / 25%));
  z-index: 0;
}

Again, keeping things super simple, we’re using font: inherit here to keep the font trickery going. This time, we’re using an ex unit to set the height of the curve. This will now always be relative to the height of the heading that it partially conceals. Handy, right?

FYI

You might think that using viewport units would be a good idea to set height. You’re right, it would be, but the problem is you don’t know what viewport conditions the site will render in, so viewport units can cause havoc.

In terms of positioning, we’re going all in with position: absolute because we don’t want this curve to be part of the curved container’s rendered size. Using bottom, we’re positioning the bottom edge of the to the top of the curved container, by setting the value to 100%.

Unfortunately, thanks to the new IE — AKA mobile Safari, which is forced on all iOS users — we have to calc a pixel off that value, or a hairline crack will appear…

Another point I want to touch on here is the use of the drop shadow filter. The reason we use that instead of box-shadow is because drop shadow will follow the shape of the , whereas box-shadow does exactly what it says on the tin: applies shadow to the box.

Drop shadow on the left and box shadow on the right

One thing we absolutely do need to consider is high contrast users. Luckily, there’s a media query we can use.

@media (prefers-contrast: more) {
  .curved-container svg {
    display: none;
  }
}

All we’re doing here is determining if a user prefers high contrast and if they do, we hide the curve itself, so it doesn’t interfere with the text. This is because the fill value of the svg will still be honoured, even in high contrast mode, so it’s best to just remove the element, visually.

Right, let’s style up the content in this container.

.curved-container__content {
  font-family: var(--font-base);
  font-size: var(--size-step-1);
  text-align: center;
  padding-block: var(--space-m);
  position: relative;
  z-index: 1;
  background: var(--color-light);
}

Remember how we set the text to be massive to assist with positioning? Well, we need to reset that here to make sure text doesn’t actually render massive.

The background application means we can hide the drop shadow spillage from our curve and setting z-index: 1, we’re making sure our content layer always sits above the actual curve. This is also why we added that extra

earlier.

Let’s add the last couple of bits for our curved container:

.curved-container__content > * {
  max-width: 30ch;
  margin-inline: auto;
}

@media (min-width: 800px) {
  .curved-container__content {
    padding-block-start: 0;
  }
}

The first part reduces the width of the content by its own character width, then pushes it into the center of the container with margin-inline: auto. We already have text-align set on the curved-container__content so don’t need to set that again. Without margin-inline: auto, the text would be center-aligned, but not horizontally centered, thanks to the max width. Now we have both.

The last part is a little visual tweak. This is where I see media queries being the most useful, rather than being used for layout changes (where you can help it of course).

All we’re doing is removing the top padding where space allows. This is because thanks to the massive text, the size of the curve will be big enough to give the illusion of padding. The curve isn’t big enough to do that on smaller viewports.

Making the curved container fill available space

We’ve got a problem. Because our content is short, the background and even part of the “404” heading can show up under our content. Let’s fix it with the power of flexbox.

To see this demo, head over to the web version.

First up, we need to adding the following to our body:

body {
  /* All the other CSS */
  display: flex;
  flex-direction: column;
}

Next, add this rule for the

main {
  display: flex;
  flex-direction: column;
  flex: auto;
}

This makes the

stretch to fill the available space in the body (thanks to flex: auto) and will then allow a child element to do the same.

Lastly, we add this to the curved container:

.curved-container {
  /* The rest of the CSS */
  flex: auto;
}

The curved container will now fill any available space left in the

element. Flexbox is the best.

To see this demo, head over to the web version.

Adding the button component

All the really hairy stuff is done! All we’ve got left to do is make our button look lovely.

.button {
  display: inline-block;
  padding: 0.7em 1.2em 0.85em 1.2em;
  background: var(--color-dark);
  background-image: var(--gradient-secondary);
  color: var(--color-light);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0.5em;
  line-height: 1;
  border: 4px solid var(--color-primary);
}

It’s a bit different to the original on Layers, but I wanted the colours to match the heading better.

Next, some interactive states:

.button:hover {
  background-size: 150% 150%;
}

.button:active {
  transform: scale(99%);
}

Firstly, we’re making the gradient bigger on hover, so it appears to get lighter 😎. You could set a different gradient on hover, but meh, why bother when you can tweak the gradient’s canvas size? Always be keeping things simple, friends.

Lastly, this is one of my favourite tricks in CSS. Ideally, you want a button to interact to being pressed, so one way to do that is make it appear to be squidgy. Using transform: scale(99%) does exactly that!

To see this demo, head over to the web version.

Wrapping up

I think the key takeaway from this edition of Reality Check is even if a design looks like it’s gonna be tricky, spend plenty of time planning and thinking not “how am I going to code this?”, but instead “what is CSS already giving me to make this work?”.

The power CSS gave us in this build is relative units, which when you think slightly out of the box with them, are unbelievably powerful and allow you to truly express yourself in design.

Reality Check #1: Building out a furniture site from Dribbble

Andy Bell — Wed, 18 Oct 2023 00:00:00 GMT

Welcome to Reality Check, a new blog series where I take some work from Dribbble or Layers, then refactor the design into something that will work really well on the web.

After that, I go ahead and build it — breaking down the steps — to show you how to build in an efficient, truly responsive and progressively enhanced manner. It’ll give you a look behind the curtain at how we do things in the studio.

Why am I doing this?

So often, work on Dribbble and Layers is visually stunning, but how it will actually work in the browser hasn’t been considered. This isn’t just exclusive to Dribbble and Layers too because designers handing off static Figma files to developers seems good in theory, but often, developers will be stuffing codebases full of magic numbers and hacks to get a “pixel perfect” output in the browser.

The problem with this approach is you have no idea what context your users will be visiting your site in and being the browser’s mentor, not it’s micromanager is a guaranteed way to build truly responsive front-ends that work for everyone. We’ll show you how to do that in each edition of this series.

This edition’s project

I’ve chosen Furniture e-commerce website by Hrvoje Kraljevic. It’s a fairly straightforward one to start with, but it’s even simpler when you approach it flexibly.

Dribbble shot by Hrvoje Kraljevic" />

As you can see, it’s a 50/50 split layout that also has a vertical split on the right-hand side content section. The problem is, this only has a desktop design. The first thing we’re going to do is mock-up a similar version in Figma, including a minimum width viewport.

This doesn’t look exactly the same — mainly because I don’t know what fonts were used, and I don’t have access to the image asset. I’ve also levelled things out a little bit so we can use fluid type and space and also free Google Fonts, in case you wanted to give this a go yourself. The main change I wanted to make was that the typography should follow a type scale, to improve the overall rhythm.

Still, it’s pretty darn close, so let’s get cracking with the build!

HTML first, always

It’s important to get the foundation of our build in the best place possible with semantic HTML. Using semantic HTML has so many benefits, but some key ones:

If nothing but the HTML arrives, the content will make complete sense to the user because the browser has its own user agent styles
Screen readers and other assistive tech will have a much easier time describing content to users
It benefits SEO
Users who use tools such as Reader Mode on Safari, will have a much better experience

In short: if you mark up the page using only

elements, you might be making your life easier (although I’ve never subscribed to that logic), but you will be making the experience of your users much, much worse.

Here’s all the HTML of the page, within the :


  
    
    
    
  
  
    
      spaziovisia
      Elevate your space
    
    
      A tribute to ancient handicrafts
      
        The materials are simple and completely natural, the internal structure of the
        stem consists of hundreds of cavities, which makes it strong and light.
      
      
        
          Explore Kettal collection

Let’s pick out some key areas.

We’re using
elements, but they are dividing the content to make CSS layout easier.
The semantic
,
and
elements structure the content, along with using a
for the page’s only heading.
The element allows us to render either a shallow image for smaller viewports, or a deeper image for larger viewports. It also allows us to provide low-resolution and higher-resolution versions of the image so lower resolution devices don’t need to waste bandwidth.
The inside of the has an empty alt attribute. This is because the image is decorative, so it can safely be hidden from screen readers. You must provide an empty alt, rather than no alt if you want to do that.
The is also hidden from screen readers with aria-hidden="true". This is again, because it’s decorative and provides no real value unless you can see it.

Styling it up

Before we start, I just want to note that we will be using the CUBE CSS principles to build out this front-end.

The first thing to do is pick out as much of the UI style as we can as global styles. As it says in the CUBE documentation:

With CUBE CSS, we embrace the cascade and inheritance to style as much as possible at a high level. This means that when nothing but your global styles make it to the browser, the page will still look great. It’s progressive enhancement in action and enables us to write as little CSS as possible.

Along with this global CSS, we will create some global variables that give us some nice consistency too. The main part of those variables is the fluid type and fluid space scale, using Utopia.

:root {
  --font-base: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --font-display: 'Azeret Mono', monospace;
  --color-dark: #000000;
  --color-light: #e5e8df;
  --size-step-0: clamp(1rem, 0.9661rem + 0.1695vw, 1.125rem);
  --size-step-1: clamp(1.125rem, 1.0243rem + 0.5034vw, 1.4963rem);
  --size-step-2: clamp(1.2656rem, 1.0692rem + 0.9822vw, 1.99rem);
  --size-step-3: clamp(1.4238rem, 1.0921rem + 1.6585vw, 2.6469rem);
  --size-step-4: clamp(1.6019rem, 1.0817rem + 2.6008vw, 3.52rem);
  --size-step-5: clamp(1.8019rem, 1.0209rem + 3.9051vw, 4.6819rem);
  --space-2xs: clamp(0.5rem, 0.4831rem + 0.0847vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7161rem + 0.1695vw, 0.875rem);
  --space-s: clamp(1rem, 0.9661rem + 0.1695vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4492rem + 0.2542vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9322rem + 0.339vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8983rem + 0.5085vw, 3.375rem);
  --space-m-xl: clamp(1.5rem, 0.9915rem + 2.5424vw, 3.375rem);
  --space-mega: clamp(6rem, 4.5763rem + 7.1186vw, 11.25rem);
  --gutter: var(--space-s);
}

You might be thinking “holy heck, that’s a lot” and yeh, fair point, but fluid type and space scales basically power your entire UI and simplify decision making, so a block of variables seems like a darn good trade-off — especially for a full website project.

These variables are really handy because if you need larger text than what you’ve currently got for an element: go one (or many) up in the size scale and it’ll be perfectly in ratio — maintaining the flow and rhythm of your page. The same applies to spacing too.

With these variables in place, we’re in a position to start writing some global styles.

body {
  font-family: var(--font-base);
  font-size: var(--size-step-0);
  background: var(--color-dark);
  color: var(--color-light);
  padding-block: var(--gutter);
}

:is(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 400;
  word-spacing: -0.3ch;
  max-width: 30ch;
}

h1 {
  font-size: var(--size-step-5);
}

h2 {
  font-size: var(--size-step-4);
}

h3 {
  font-size: var(--size-step-3);
}

p {
  max-width: 60ch;
}

a {
  color: currentColor;
}

svg:not([width]):not([height]) {
  height: 1.5ex;
  width: auto;
}

main {
  --switcher-vertical-alignment: stretch;
}

::selection {
  background: var(--color-light);
  color: var(--color-dark);
}

There’s not a huge amount here because it’s a very simple UI. Also, we only have one section, of one page, so it’s tricky to build out a whole suite of global styles.

Still, it’s important to start global because the aim is to write as little CSS as possible. Even in this part of the build, we’re saving time and bytes by using this reset.

Most of that CSS is pretty self-explanatory, but the key parts are:

Setting the initial step of the type size scale as the body font size means that any em unit will by proxy, be fluid, even if we don’t apply any of the other type size scale steps.
The negative word spacing for headings is because our display font is a monospace font. This means that all characters are the same width, including spaces. This is fine for smaller text, but it gets real grim for larger text.
For elements that don’t have a width and height, we want to prevent blow-outs, so setting a default size, based on the x-height of it’s parent is a great set and forget thing.
The
element is setting a --switcher-vertical-alignment. We’ll come on to that later…
We set the opposite colours for text and background when text is selected, to provide contrast.

Let’s check in how our project looks so far. Activate the preview to scroll.

To see this demo, head over to the web version.

Time to get on some layout

With global CSS in place, the next step is to move on to the C of CUBE CSS: Composition. From the documentation:

The composition layer’s job is to create flexible, component-agnostic layout systems that support as many variants of content as possible.

What this means is that our layout does only layout and nothing else. This prevents the need for authors to add layout that will affect sibling elements in their components, which in turn, results in extremely resilient pages.

The Switcher

This is one of the many layouts on Every Layout and in short, it allows content to sit inline (next to each other) as long as a configurable container width is available.

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

Now what this doesn’t do is make the columns exactly 50% wide: we’re letting the browser take over here to let the content size the elements because we just don’t need that strict control.

The aim of the component and it’s weird looking flex-basis calculation is for a 50/50 split, or more accurately, an equal distribution of space where available. The mathematics is explained in the Every Layout chapter.

That’s our split layout sorted, so let’s move on to the next layout.

Repel

This does exactly what it says on the tin: items repel from each other like polar-opposites, where space allows.

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}

.repel[data-repel-variant='vertical'] {
  --repel-alignment: stretch;
  flex-direction: column;
}

This is what powers the top part of the content panel and the vertical split between header and content, thanks to the [data-repel-variant="vertical"] CUBE CSS Exception.

It doesn’t matter what the content is of Repel child elements, because if their content prevents there being enough room to actually repel: the layout stacks nicely. Proper responsive design!

Flow

This is my favourite 3 lines of CSS.

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

In short, it creates a configurable, but relative space between sibling elements. To keep this article as short as possible, I’ll encourage you to go ahead and read the explainer.

What I definitely will note, though, is we use this in every project.

Wrapper

This one is pretty self-explanatory. It’s a central wrapper with a max-width.

.wrapper {
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

In this case, we’re using pixels, but you could use whatever relative unit is appropriate in your project’s context.

Again, let’s check in to see how things look.

To see this demo, head over to the web version.

Blocks (components)

Now the global CSS and the compositional layouts are done, it’s time to do the colouring in.

In CUBE CSS, a Block is just like a component. Where we didn’t want to apply visuals to layouts, we do in blocks. We’re also going against the grain of the global styles.

At this point, you’ll likely find that blocks are mostly extremely light, because we’ve done so much already.

Content block

This is the right-hand (in left-to-right language) panel of content.

.content {
  --gutter: var(--space-mega) 0;

  background: var(--color-light);
  color: var(--color-dark);
  padding: var(--space-m-xl);
  font-size: var(--size-step-1);
}

.content h1 {
  max-width: 11ch;
}

.content p {
  text-wrap: balance;
}

.content h1 + p {
  --flow-space: var(--space-l);
}

The first bit to cover is --space-mega. This is a custom spacing pair in Utopia, between 3xl and 7xl. This space grows and shrinks based on the viewport, which means we get responsive spacing.

Even though we’re using Repel to vertically split content — which in turn, uses --gutter to control gap — we still want to make sure there’s always space, even when the split layout is stacked.

The main thing I want to highlight here is setting a max width of 11ch on the heading. This is the length of the longest word — “handicrafts”.

Because we’re using a monospace font, every character is the same width, so we can comfortably set that limit to shape our heading nicely. Without a monospace font, your ch unit will be the width of a 0 character.

Lastly, notice how we are setting a ::selection style because the colours are reversed in the panel. We want to make sure that text selection is visible.

Site head

This is the repelled header, at the top of the content panel.

.site-head {
  --repel-alignment: baseline;
  --gutter: var(--space-2xs) var(--space-m);
  font-size: var(--size-step-0);
}

.site-head__name {
  font-size: var(--size-step-2);
  font-family: var(--font-display);
  line-height: 1.1;
}

Notice how we’re configuring the Repel composition here? Because the two element’s text sizes are different, along with different fonts, setting a baseline alignment keeps things looking nice and neat.

Icon link

This is the little link with an icon.

.icon-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0 var(--space-xs);
}

.icon-link svg {
  transform: translateY(0.2ex);
}

.icon-link:hover {
  text-underline-offset: 0.2ex;
}

Using inline-flex allows the element to size itself based on content. Otherwise it would be block-like and try to fill available space.

We’re again, aligning to the baseline instead of center because if this link was multi-line, it would look real weird with a center-aligned icon. The transform: translateY(0.2ex) is an optical adjustment to account for that alignment choice, pulling the icon into the center of the first line of text.

Decorative image

This is our last block! Let’s first see the code:

.decorative-image {
  container-type: inline-size;
}

.decorative-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@container (min-width: 70vw) {
  .decorative-image img {
    max-width: unset;
    width: 100vw;
    height: unset;
    margin-inline-start: 50%;
    transform: translateX(-50%);
    aspect-ratio: 10/5;
  }
}

Oh hello, it’s container query time! What we are doing here is determining if the container — which is our element — is 70vw wide or larger. If that’s the case, our Switcher layout has stacked, which means we can safely presume that our image now occupies 100% of the available width.

When that is the case, we change the aspect ratio to be shallower and make the image “full bleed”, by forcing it to be 100vw wide, then positioning in the center, using this trick.

Instead of using a media query to determine this state, or a px/em/rem value, we are letting the browser do its job, then responding to that state change. Pulling everything together like this is a super resilient way of doing things.

Wrapping up

First of all, let’s take a look at the final result. You can use the resizer to size the frame.

To see this demo, head over to the web version.

I hope this has shown you by simplifying a UI at the core, you can build something that’s visually pleasing, while not negatively affecting the end-user’s experience.

I’ll definitely pick a more complex item from Dribbble or Layers for the next edition of Reality Check too. I just wanted to warm us all up with this first post of the series 😉

Piccalilli - Reality Check topic archive

Reality Check #3: Building out a layered hero grid layout from Dribbble

This edition’s project

Planning and asset creation

Keeping things simple: background

HTML first, always

Wave

FYI

, so the rest of the page follows a logical hierarchy. I've also used a element for the photographic background image because I wanted to provide modern image formats in a progressively enhanced manner. The SVG mask is a standard element.

Keeping things simple: circular text

Global CSS

Utilities

Compositions

Negative grid

Wrapper

Blocks

Hero

FYI

Avatar

Roundel

FYI

Wrapping up

Reality Check #2: Building out a fancy 404 page from Layers

This edition’s project

HTML first, always

404

Global CSS

Compositions (layout)

Blocks (components)

Adding the gradient

FYI

Adding the curved container block

404

FYI

Making the curved container fill available space

Adding the button component

Wrapping up

Reality Check #1: Building out a furniture site from Dribbble

Why am I doing this?

This edition’s project

HTML first, always

A tribute to ancient handicrafts

Styling it up

Time to get on some layout

The Switcher

Repel

Flow

Wrapper

Blocks (components)

Content block

Site head

Icon link

Decorative image

Wrapping up

, so the rest of the page follows a logical hierarchy.

I've also used a element for the photographic background image because I wanted to provide modern image formats in a progressively enhanced manner. The SVG mask is a standard element.