Tags: css

Grid Garden [↗]

A game for learning CSS grid layout.

As games go, it’s no Minecraft, but as a tool for learning CSS Grid, it’s pretty good.

8 CSS gotchas to start your morning off right [↗]

As every seasoned web developer knows, CSS isn’t implemented according to a specification of rigid, predictable rules. If it were, we would all just learn the rules and go on to lead happy and successful lives.

A comical look at some CSS gotchas.

How You Can Use HTML5 Custom Data Attributes and Why [↗]

In this article, I am going to show you how you can use HTML5 custom data attributes. I’m also going to present you with some use cases that you can find helpful in your work as a developer.

I can’t remember when I started using custom data attributes, it has to be five years ago at least, it’s certainly been long enough to wonder what I ever did without them. Anyhow, if you’ve yet to learn about custom data attributes, this article seems as good as any.

Practical CSS Grid: Adding Grid to an Existing Design [↗]

Understanding and using Grid is easier than you might expect. The day Grid support shipped in Firefox 52, I decided on the spur of the moment to convert the basic layout of my personal site to use Grid. And it was a fairly simple process—five minutes to write the grid styles, then 15-20 spent troubleshooting.

It’s good to read a practical guide where CSS Grid has been applied to a real-world site. I hope we get to read more of these in the future.

Getting to know CSS Grid Layout [↗]

At first it might seem like Grid has a lot of new syntax to learn, but you only need a fraction to get started. This article will use examples to introduce you to the various concepts important to getting started to build with CSS Grid.

Another good guide to using CSS Grid.

Golden Guidelines for Writing Clean CSS [↗]

Four simple rules for writing clean CSS.

  • Avoid global and element selectors
  • Omit overly specific selectors
  • Use semantic class names
  • Don’t tie CSS too closely to markup structure

Seems like good advice.

Getting Started with CSS Grid [↗]

Another CSS Grid article to get you started with this newly supported feature.

A Complete Guide to CSS Grid [↗]

Learn everything about the CSS Grid Module in this illustrated guide with practical examples and demos.

CSS Grid is a hot topic at the moment and this guide looks pretty good.

Using CSS Transitions on Auto Dimensions [↗]

We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set transition: height 0.2s ease-out. You’ve created a collapsed CSS class that applies height: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if transition had never been set.

This helpful post came too late for me, I was there yesterday and I wasted a good few minutes trying to get my head around this frustrating feature. Just think, I could have used that wasted time to do something proper useful, like making another cup of coffee.

The benefits of learning how to code layouts with CSS [↗]

I’m tired of every website looking the same. I believe in the power of graphic design to elevate a project. To make it stand out. To give it a unique voice, to help its readers / users / viewers understand what is happening. I don’t want to paint-by-numbers, I want to paint.

Amen.

◀ Older