Category: CSS

Although we’ve had a smattering of snow here in the Rhineland—where I’m basing myself for a couple of months—at home, an “arctic blast” means snow is threatening. Last week, I added a snow mode to my websites, but my pioneer characters still looked toasty and warm, and unaffected by the wintery conditions. So, it was time for them to get chilly.

Winter’s definitely arrived, and there’s a chill wind blowing. We haven’t had snow in the village yet, but it’s falling on my website, courtesy of a new ‘snow mode.’

I mentioned last week that as well as expanding my Toon Text styles gallery, I’d added a Toon Text generator to help me (and you) create text in the style of those classic cartoon title cards. Now, I’ve launched a major update to both.

Partway through writing an upcoming article for Smashing Magazine, I decided it would be helpful to have a tool to generate text styled like that in my beloved cartoon titles. So I made one.

Last week, I explained my strategy for writing CSS selectors. Today, I’ll explain how I decide on and design layouts. It isn’t really about grids; it’s about a repeatable way to make layout decisions.

Writing good CSS is all about restraint. As an example, I used to over-specify too many things in my stylesheets. It was a bad habit picked up from BEM, OOCSS, and from developers who flattened everything with classes to dodge specificity. Now I think of my CSS selector strategy as a “progressive narrowing of scope.”

When I’ve had a few spare minutes, I’ve been adding to and optimising my Magnificent 7 character animations to improve rendering speed. Then I had the idea to build a silly fairground-style shooting game, and I set myself the challenge of keeping it as small as possible.

It’s incredibly important to respect people’s preferences and to ensure that any movement is turned off when they’ve set “reduced motion” in their OS settings. After adding my Magnificent 7 animations yesterday, I went back to check them with reduced motion enabled. Oh hell, my CSS grid has also stopped working, and it took me all morning to realise the issue wasn’t the grid, but how I’d structured my media queries.

I have to admit that I got a little over-excited when I read that the contrast-color() function is supported in Safari and was keen to try it out. But there’s a problem, the thing with contrast-color is…

Before my workshop last week, I made some changes to my Compound grid generator. After the workshop, I made a new grid generator tool, this time designed to create modular grids.

To get ready for my first practical layout workshop for designers this week, I upgraded my compound grid generator with a new and improved version.

Lately, while I’ve been making my Toon Titles and writing about SVG animations, I’ve been pondering where the sweet spot is between CSS and GSAP for animations. This Toon Title, featuring Hanna Barbera’s Quick Draw McGraw in his alter ego El Kabong, illustrates it nicely.

I’ve always loved it when designers take the time to give their blog posts a little extra polish. Jason Santa Maria did this brilliantly on his old site, and my design hero, Trent Walton, made each post feel like a one-off. With my recent code overhaul, I thought—why not do the same?

Yours truly over at the SQSP Themes blog. “CSS Media Queries already make Squarespace websites responsive, but there will frequently be times when you’ll need to make elements responsive to their containers, not just to the viewport. Thankfully, CSS Container Queries are now widely implemented in browsers, and there are ways to use them on Squarespace websites.”

Kingdom of the Planet of the Apes is out and I’m seeing it this coming Saturday. I’m so excited that I decided to update one of my responsive easter egg headers— Kerfuffle on the Planet of the Apes —with more efficient, modern code. In this final post of the short series, I’ll explain how I added animations and subtle transitions to bring the design to life.

Kingdom of the Planet of the Apes is out, and I’m so excited that I decided to update one of my responsive easter egg headers— Kerfuffle on the Planet of the Apes —with more efficient, modern code. Today, I’ll explain how I made the layout using a combination of container queries, Flexbox, and grid.

Kingdom of the Planet of the Apes is out, and I’m so excited that I decided to celebrate by updating another of my responsive easter egg headers— Kerfuffle on the Planet of the Apes —with more efficient, modern code. I’ll explain how I did it, starting with the new optimised SVG images.

I don’t look at my analytics often, but after last week’s site revamp, I thought I’d check to see which pages were popular. Oddly, a post in my ancient archives about CSS specificity had been getting a fair few Google referrals, so I decided to spend a few hours updating that, too.

This week, I launched Design Chatter. It’s a weekly one-hour Zoom call where like-minded designers can give each other constructive, friendly feedback.

One of my favourite CSS writers Ahmad Shadeed has written about CSS Masking and I thought I could put his techniques to good use on Emma’s website.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll reveal the Easter Egg theme which I hid on Emma’s website.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned a few things while working on it. I’m digging into the details this week, and today I’ll explain the pseudo-3D design I created for Emma’s home page banner.

In a video of one his talks, Andy Bell mentioned CUBE CSS and his approach to using data attributes for variations (exceptions) to design styles. I’m currently working on a grid system for a product project and revamping my Layout ❤︎ templates, so was keen to implement this approach.

Most parts of Apple’s website are fabulously flexible. But today, I was browsing for Black Friday deals and found a fixed-width design element which I was determined to make flexible.

Safari Technology Preview is my every day browser. When the latest version dropped, a feature in the release notes interested me. It was experimental support for three new relative colour CSS values. So, I tried what’s possible now.

There’s been a meta tag for specifying a theme-color for UI elements on websites for a while. If you’ve used it, now’s time to change that element along with the upcoming version of Safari.

Let’s face it, unless you develop a complex product—and even if you do—you probably don’t need half the humungous hunk of CSS you bung at a browser. In fact, it’s possible you only need one default and one alternative style for every element.

Sam Sycamore tweeted a utility class for breaking an element out of its container to fill the full width of a page. It prompted me to think about how and when to use utility classes.

I’ve said over and over again that a well-chosen grid can do much, much more than align content. The choice of grid can influence how we approach a design, it can change how we think.

For as long as I can remember, I’ve been specifying different colours for hyperlinks and their:hover pseudo-classes. Recently, I’ve been experimenting with CSS filters and found they make development much easier.

I know some people swear by frameworks and I do understand why, although my work rarely needs them. I also appreciate why some people find the grids component in frameworks useful. But, to me, including a framework just for its grid has always seemed excessive. Particularly when there are other ways to develop reusable layout components which are far less generic, but no less flexible than a framework.

While developing prototype designs for a French football magazine, I came across a strange bug when Chrome’s translate feature comes into contact with CSS generated content.

While I was researching typefaces for a new project, I came across Dalton Maag’s case study for Universal TV. The type is beautiful, of course, but it was their graphics which got my attention.

It’s 20 years to the day since my wife, and I started Stuff & Nonsense, our little studio and my outlet for creative ideas on the web. Over on 24ways, it’s also my fourteenth article, this time how to Design your site like it’s 1998. It’s a tongue-in-cheek look back at how we developed websites when I started my company, complete with not so old favourites like font elements, frames, layout tables, and spacer gifs.

Working with CSS Grid is a lot of fun, as well as making distinctive and original layouts easier and with less code. However, using Grid does occasionally come at a cost and that is semantic markup. Fortunately, there’s a new CSS display property which—when used thoughtfully—can overcome the problem of ‘flattened HTML.’

If you liked my Specificity Wars, you’re going to love Mandy Michae’s Batificity.

Here’s a quick entry about something I learned just this week about:not() pseudo-class selectors and how to combine them.

It’s been a while since I’ve written seriously, but since I started working on my new ‘ Art directing for the web’book, I’ve got the bug. So when Smashing Magazine asked me to write for them again, I couldn’t resist. My latest article, on ‘Art Directing For The Web With CSS Grid Template Areas’ was published today and I’m very pleased with how it turned out. You can read it here.

Over the next few weeks, I’m going to share some of the things that I’ve learned while designing and developing Inspired Guides, starting today with using HTML entities as separators in breadcrumb navigation.

The Guardian’s Kaelig Deloumeau-Prigent recently wrote about their struggles and strategy for dealing with Internet Explorer 8. People visiting my site using Internet Explorer 8 are few and far between these days, but those that do could be good customers, so with our redesign I wanted to make a real effort to give them a good experience.

Apple doesn’t have what many of us would consider to be a fully responsive website, but that doesn’t mean they don’t sometimes use two of Ethan’s ingredients; flexible media and CSS3 media queries, to improve the placement of some elements on an otherwise fixed page.

Exactly ten years ago today, on October 20th 2003, A List Apart published Doug Bowman’s Sliding Doors of CSS.

I sometimes work with other designers helping them to translate their design atmosphere and wide screen layouts into responsive designs. Breaking down their designs into systems is big part of what I do. In practical terms that means working through what are sometimes dozens of static visuals to identify patterns of typography, use of colour and layouts, both smaller modules and whole page compositions. From these patterns I classify and identify elements and compose stylesheets based on them.

While I was preparing the slides from my full day CSS3 For Responsive Web Design at Smashing Magazine, I got very excited by the new filters in CSS. (313 onwards in my slide deck.) These filters — not to be confused with those legacy, proprietary Microsoft filters — are now well on their way to becoming part of a standard.

I’m struggling to believe it quite frankly, but The CSS Zen Garden was planted ten years ago today. I don’t think we should underestimate the importance of The CSS Zen Garden in the history of the web. Its influence still resonates today. Now it’s back accepting submissions and making some of us feel very old.

My Responsive Web Design workshop at Smashing Magazine is getting closer and some tickets are still available. In the meantime, here are three useful new resources for responsive layout using CSS3:

The Stuff and Nonsense nutty boys header is pretty tall and I decided I wanted to reduce its height for small screens, such as phones, in landscape orientation. When I wrote the CSS to make this happen I made some nutty assumptions. In the spirit of sharing our mistakes:

Microsoft launches Windows 8 in just a few days, so now’s a good time to turn our attention to Internet Explorer 10. Here are two links to help you get prepared:

File this one under gotchas. I’m desktop browser testing a series of layout templates for a current project today. Everything was going really well until I encountered some files where my web fonts stubbornly refused to display in Firefox, but rendered perfectly in every other browser. Luckily I found the reason for the problem and a solution to it.

I’ve been reading Jonathon Snook’s Scalable and Modular Architecture for CSS book this week. (It’s well written, practical and perfectly formatted for Kindle. I learned a lot and I’d highly recommend it.) In SMACSS, Jon recommends breaking down stylesheets into rules for:

As Jeremy mentioned yesterday, just before An Event Apart in Seattle, I spent a few hours on a spot of guerrilla testing at an AT&T store. Specifically, I was looking at how Windows Phone 7’s Internet Explorer browser handles ‘responsive sites’.