How To: A CSS-Only Mobile Off Canvas Navigation

Mobile navigation and the "hamburger nav" pattern aren't going away. In this tutorial, I'll walk you through creating a mobile off-canvas navigation with only CSS and HTML.

How To: Use CSS Grid Layout to Make a Simple, Fluid Card Grid

In this tutorial, I'm going to show you how to take one of the most common tropes of web design -- the card grid -- and make it fluid. 

Make a More Flexible Cover Screen with CSS Grid

Our design trends are about to get a facelift. Grid Layout is coming in the next release of modern browsers. It's important to get a grip on its utility. Let's take a common trend in editorial and marketing design - the "cover page" banner area.

Start Exploring the Magic of CSS Grid Layout

Grid is an amazing new CSS Specification coming to major browsers in 2017. When it’s ready for use in production, it’s going to drastically change the way we do layout on the web. Currently, there’s no real browser support. Edge and IE10/11 "support" grid, but they implemented an early version of the specification and it’s significantly broken.

I Converted My Blog to CSS Grid Layout and Regret Nothing

With the death of Lella Vignelli last week (Dec. 21, 2016), I read for the first time The Vignelli Canon. The layout of the pages inspired me. I knew that I wanted to give a quick update to some of my blog posts to mirror some of the design from that book -- a book that talks about grids, as well.

Feature Queries are on the Rise

Since the Web became a more beautiful place with the advent of CSS, there’s always been a struggle in the use of more modern features of CSS with browsers who are either slower to adopt or more cautious in the way the implement features. There have been many potential solutions for this issue.

CSS Shapes — Let the Text Flow Around You

There’s magic in the air around CSS right now. There’s so much new to be excited about. One simple thing that you should get excited about is the CSS Shapes Module. These are not CSS shapes like building triangles out of border property hacks. This is taking your content and shaping it around shapes and images.

Memorializing Prince and Print vs. The Web

A giant of the music industry passed on April 21. While I wasn’t a zealous follower of his music, I can tell you the world is a sadder place without Prince in it. But that’s not what I’m writing about. In the social media memorializing of this titan, I came across this

I went to Italy and noticed UX fails

Ciao friends! I’m just arriving back in the States from a trip to Italy. I’m not exactly much of a world traveller, but a good time was had. While I enjoyed the majority of what I saw, I also observed a few major usability fails that I wanted to bring up. Give the blog a little international flair.

How to Get Designers to Contribute in Open Source

I’ve been thinking a decent bit this year about how to get designers involved in Open Source projects. There’s more and more being talked about in this vein, and I don’t plan on rehashing what they talked about (The Intimidation Barrier and Open Source Design by Una Cravats and one of the first guiding documents -- The Open Source Design Manifesto by Garth Braithwaite to name but a couple).

temporary

I'm beginning my new journey as an independent creator. I've left the comfortable confines of agency life to see what I can do creating resources for designers and developers. I'll be writing, recording, speaking and consulting. Much of this will be under the heading of my new company Code Contemporary

Top 3 uses for the ::before and ::after CSS pseudo elements

It’s no secret that I'm a fan of ::before and ::after pseudo-elements. I use them to great effect for creating darkened overlays in this previous post. They have so many uses beyond that, though. Here are my top 3 uses for them in my every-day development process.

How To: Use CSS Grid to Mix and Match Design Patterns

In a previous tutorial, I described how to create a simple fluid card grid with CSS Grid. In this tutorial, we'll take it a step farther and create promotional spaces that morph in interesting ways.

Use CSS ::before and ::after for simple, spicy image overlays

Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-modes!

Modern CSS: Four Things Every Developer and Designer Should Know About CSS

Contrary to popular belief, CSS is an absolute delight. Many developers I talk to think the phrase "Modern CSS" is an oxymoron. If you haven’t been watching the growth and maturity of CSS in the past 5 years, you’re doing yourself a disservice. 

3 Strategies for Getting Started with CSS Grid

If you're wondering how to start working with CSS Grid, here are three strategies for adopting it into your workflow.