Part of the job of being a front-end developer is applying different techniques and technologies to pull off the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.
Let’s take a look at what I mean.
Check out this lovely Dribbble shot for a Food Recipe Website from Riko Sapto Dimo.
It’s a very appealing design, and there is loads in there to think about from a front-end web design and development standpoint.
We’re going to mostly be talking about design pattern choices and HTML/CSS tech choices. There is much more to the job of front-end development. Accessibility! Performance! Semantics! Design systems! All important stuff as well.
Multi-line padded text
Ah yes, that look where text has a background that follows the length of the lines of text. We’ve called that Multi-Line Padded Text in the past and looked at a number of ways to do it. The easiest and most modern way to handle it is with box-decoration-break.
See the Pen Multiline Padding with box-decoration-break by Chris Coyier (@chriscoyier) on CodePen.
Flexbox header
That header area is just begging for flexbox. It’s a single-direction layout with elements of different sizes and different space between them. Expressing that in flexbox is going to be easier than any other method and not require any fixed sizing or magic numbers — not to mention flexible!
Grid layout
The overall page layout here could be expressed nicely with CSS grid. Remember that flexbox and grid are not at odds. An element placed in a grid cell can be flexbox! Like the header above, that makes perfect sense. The main content area and footer, as grid cells, could probably go either way.
Vertical writing
Not the most obvious thing to pull off! Your best bet is using writing modes. Jen Simmons has written about this, and here’s a demo:
See the Pen Writing Mode Demo — Headline by Jen Simmons (@jensimmons) on CodePen.
Line clamping
Looks like we have some truncation going on here. General performance-wise, we’d probably be wanting the data being sent only be a few lines long. But the front end can help with this too, if it has to. Three lines of text are shown here with ellipsis at the end. Perhaps the design really needs the copy to always be a maximum of three lines. That’s called line clamping.
See the Pen Line Clampin’ by Chris Coyier (@chriscoyier) on CodePen.
Custom fonts
Like most sites these days, this design is coated in custom web fonts. With a design this striking, I’d be very careful about my font loading technique. My gut tells me I’d be more into FOIT than FOUT here, and ideally I’d cache that font file as hard as I could so that we’d have neither as often as possible.
Text over images
That text “Dinner Menu” is squarely over some busy photographic imagery below. It’s still readable though, largely because of the bright white of the text over a darkened image. We’ve covered thinking this through in the past in detail. White text over a darkened image is generally the way to go, and darkened enough such that just about any image will be OK. There are other options though, like gradients and blurring (which is also in use here in the footer)
See the Pen ByKwaq by Chris Coyier (@chriscoyier) on CodePen.
SVG icons / Star ratings
There are a number of simple, vector icons scattered around the design. Those are a sure-bet for an SVG icon system. This is my current recommendation for approaching an SVG icon system. Inline the SVG. Simple and powerful.
Those star ratings are probably SVG territory as well. Here’s a good collection of options. Progressively enhancing from radio buttons always seems like a smart way to go:
See the Pen CSS: Radio Input Stars by Jake Albaugh (@jakealbaugh) on CodePen.
Hamburgers
It might seem a little superfluous on a large screen design like this, especially as there is navigation already visible. But hey, it’s hard to avoid these days and there is something to be said about training users where site navigation can happen regardless of where you’re looking at the site.
Here’s a collection of those type of menus.
See the Pen Hamburger menu flip with text change by Eric Grucza (@egrucza) on CodePen.
Anything else in the design I didn’t mention that your mind goes to right away?
Chris there’s a couple of extra things I saw that could be useful:
CSS mask-image is useful if you get a background image that is too light and you want to darken it without having to go back to the designer to darken the image
Components! Just a general thinking (beyond flexbox header and CSS grid) of how to “chunk” things up. Reusable stuff like the round image avatars, the star system, etc.
Color and type systems. Not just how you will load that stuff, but getting shades of the blue, a hierarchy of scaling the fonts, etc, so that we can continue to keep these type systems consistent and useful on other parts of the site
My first thought… where’s the mobile design?
This was my thought too. My brain started to try deconstructing the many ways this could “fold down” to mobile.
Also my first tought. And how I would split/share/load CSS between multiple stylesheets.
A series of articles taking designs from Dribbble (or other) and actually coding them would be really nice. Outlining the tech used under the hood to make this stuff happen is cool, but real code in Flexbox and CSS Grid to actually bring this stuff to life as code would be awesome and could serve as an excellent tutorial. I know I personally don’t do well with theoretical examples, but seeing something applied practically is when it actually clicks for me.
I’m happy to say I just published the first of a series of articles where I explore coding a Dribbble design – https://medium.com/p/dribbble-designs-in-code-part-1-venue-landing-page-bc5b7f22b986
It’s a lot simpler than the one described here, as it’s my first one :) Feedback is most welcome!
What comes to my mind is, “I can’t do some of that stuff – I have to support IE10!” So, I have to look up older ways of doing things.
I can’t use box-decoration-break, but a box-shadow method appears to work.
The image blurring appears to be ugly but possible. https://www.jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
And the rest seems to be compatible. I’m so glad I don’t have to support IE7 anymore.
Great article as usual, Chris! :)
One quick comment on the flexbox header. I would argue that you have the same level of flexibility using css grid, even though it doesn’t require a multi-dimensional layout.
That’s great!
Can you explain what the code does, especially grid: auto / auto-flow auto;
I tried to look up what the combination on grid: means but I’m not sure… so I’d appreciate a hint. =)
@Michael: “grid:” is just a shorthand for the grid layout (i.e., grid-template-rows/columns/area/auto-flow etc.) — here specifically it sets grid-auto-flow to column (the right side of the slash) creating the desired effect of horizontally align the header elements.
For more detail on why you might want to use this shorthand read Rachel Andrews brilliant article here: https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/#the-grid-shorthand-the-explicit-and-implicit-grid
I’d love to see the flex code for that header. How do you do the varying widths and spaces? I still don’t have a firm grip on flex yet…
Tom, The flex box on the top you would use justify-content: space-between and align-items: center. Most items would sit right in the main navigation div as children. However, you can see that the navigation links in particular are grouped. You would want to put these in another div that is either display: inline or use a nested flex box depending. You can set the initial widths a of items using the basis parameter, but I find its best to use the defaults as often as possible and not over complicating. Navigation buttons like this would usually have a default padding assigned to those guys that will give you the correct layout. You want to let the justify-content: space-between do the work for you.
Same goes for the guys on the right. They would be grouped together using a similar method.
I think it would actually be a lot easier with grid.
Yes it’s a single direction layout but flex doesn’t give you the control over spacing that grid can give you.
I’ve used Flex a bit – using in a current project – but the spacing has been even. It’s the different widths of things that is throwing me. During the little bit of time I’ve messed with flex-basis in order to control widths like this, it has literally done nothing. Nothing changed. I’m still ramping up on this and grid.
Grid is an exciting new component, but it is not easier to setup a grid for the header shown in this article. Set three props (display: flex, justify-content: space-between, and align-items: center) and your’re done. Additionally, there is only about 25% support for grid in IE at this point. IE ubiquity is down close to 12%, but thats globally and nationally. If you are targeting enterprise, banking, or fintech you will find a lot higher IE usage stats exist, unfortunately.
Another issue might be how to handle that large background image. Since a large portion appears to be a solid color (or texture) perhaps it’s a good use case for multiple background rules. I’ve also run into situations where the client doesn’t want the main copy block (in this case on the left) to ever layer on top of the background image portion — solving that would be a bit more of a challenge — shape-outside maybe. Good stuff in here (as always). Thanks, Chris!
I’ve found radio’s are a great choice for selecting ratings but not really for displaying ratings when you’re dealing with partial values. For that I’ve found to be a good replacement.
That’s part of my as well each tome I receive a design I’m starting walking though the techniques moder specifications and browsers are offering us.
What I learned from this article is that in 2018, we are still using a bunch of hacks to make things work.
Those radio buttons for the star rating system aren’t accessible :/
The labels have no text in them. You could add aria-label=”# stars” on the input elements to get around that.
I wonder how they did the blurred background on the footer? That’s one I’ve never seen solved.
backdrop-filter: blur();
-webkit-backdrop-filter: blur();
One of my first thoughts was “what elements I can reuse and how”. I instantly noticed the star ratings, together with the average grade grade and number of reviews; the rounded thumbnails and their placement with a block of textual content (profile in the header, recipes in the footer, “tried to cook this” in the main content). I like to approach any website as a UI and implement it in terms of smaller, reusable, variable elements.