home file-empty pencil screen user heart reply share social loading

Keith J. Grant

Photo of Keith

Atlanta, GA
United States

Twitter
@keithjgrant
Github
keithjgrant
Author
CSS in Depth

Posts

Transitioning Gradients

In, CSS, you can’t transition a background gradient. It sure would be nice if you could: .gradient { background-image: linear-gradient( to right, hsl(211, 100%, 50%), hsl(179, 100%, 30%) ); transition: background-image 0.5s linear; } .gradient:hover { background-image: linear-gradient( to bottom, hsl(344, 100%, 50%), hsl(31, 100%, 40%) ); } But, no. It jumps from one gradient to the other immediately, with no smooth transition between the two. So let’s hack it! Continue reading...

Thoughts on Self-Documenting CSS

One of the best programming books I’ve ever read is Clean Code by Robert C. Martin. If you have never read it, add it to your list. Every comment represents a failure to make the code self explanatory. Robert C. Martin In one section, Martin discusses code comments, and makes a strong argument against them. I won’t repeat all his arguments, but in short he maintains they have a tendency to fall out of date. Continue reading...

Memorizing Alignment Properties

Do you often find yourself looking up a Flexbox cheat sheet? Wish you could just commit all those properties to memory and be done with it? Here’s how I memorized them. Learn “flex” If you’ve worked with flexbox much, you might already have this one committed to memory. The flex property is itself shorthand for three other properties: flex-grow, flex-shrink, and flex-basis. But most of the time, the shorthand is all you need (and is even preferable). Continue reading...

What Grid Can Do That Tables Can’t

There’s a kind of narrative out there that’s basically, “Silly CSS wonks: first they tell us tables are bad, now they give us grid.” Nevermind that this is completely ignorant of the original argument against tables for layout (tables were never bad for layout because of the way they looked on screen; they were bad because of what they did to your markup). It’s true that grid looks a lot like tables at first glance. Continue reading...

Don’t QWOP Your Way Through CSS

QWOP, if you haven’t played it, is a ridiculous running game. Instead of pressing, say, the right arrow key to run, you must control each of the runner’s muscles independently. Pressing the keys Q, W, O, and P will each extend one leg or bend one knee. Coordinating them all is incredibly difficult, and you are usually lucky if you can make a full stride before falling on your head. Continue reading...

CSS is Not Broken

Coding in any language is hard before you spend time mastering it. Imagine what your JavaScript would look like if you never took the time to learn about OOP or functional programming principles? Just because you expect CSS to be easy, doesn’t mean the language is broken when you find it is not. A lot of people have gone on about how horrible JavaScript is. JavaScript is not horrible. It is an incredible language. Continue reading...

More thoughts on CSS in JS

At a previous job, I was brought in to a team of Java devs to provide a little JS support. They had been using something called PrimeFaces, basically a bunch of front-end components you drop into JSF pages. Working with it was horrid. In short, these devs knew nothing about JavaScript or the front-end, but this tool let them sort of hack a UI together. It abstracted away all the tools needed for really working in the front end. Continue reading...

A better approach to CSS aspect ratios

There’s an old hack for creating elements with a fixed aspect ratio that involves using a percentage-based padding. You may be familiar with it. It looks something like this: .tile { height: 0; overflow: hidden; padding-bottom: 25%; background-color: bisque; } The element is forced to have no height, then its bottom padding is set to the actual desired height. This produces an element something like this: 4:1 aspect ratio This works because of a peculiar quirk of padding: Any padding specified in percent computes to a percentage of the element’s width—even if it is a top or bottom padding. Continue reading...

It’s Both

I’m a JavaScript developer. I have experience working in large web applications and dealing with the problems that come from scaling up. I studied Computer Science in college and love solving problems of software architecture. I’m also (in case you somehow missed it) a “CSS Guy”. I learned CSS during its infancy in the mid-nineties and have worked to stay up to speed ever since. When I look out at the industry today, it kind of feels like watching parents fight. Continue reading...

Hello, World Wide IndieWeb!

It’s a new year, so it’s time for a new design! Only this time, the update is more than just a CSS revamp. This year, I join the “IndieWeb”. If you don’t know what that is, read on. Let me introduce you to the newest social network: it’s called the World Wide Web and it’s more than 25 years old. The decentralized social web Social networks bother me. I don’t mean the privacy issues or mysterious sorting algorithms. Continue reading...

Let’s Talk About Separation of Concerns

There’s been a lot of talk lately about good old Separation of Concerns — primarily in the context of React and the use of inline styles or CSS-in-JS. Advocates of these approaches argue that the language we use (be it JS, HTML, or CSS) is an arbitrary line to draw. And I would say: Yes, language is, for the most part, an arbitrary line. But that’s beside the point. So let’s get one thing straight. Continue reading...

Your Team Needs a UX Engineer

Recently, after I mentioned that I was the only one on my team that writes the CSS, someone replied, “You’re lucky”. It stuck with me, and I’ve been thinking about it since. The thing is, it’s not luck. It was a deliberate decision made early when the team was first put together. And I think the rest of the developers on my team would think themselves lucky for not having to touch the CSS. Continue reading...

CSS in Depth

My book is finally for sale! The MEAP is available on Manning’s website. The first three chapters are available now, and others will be rolling out steadily (I’ve actually already completed drafts of six chapters at this point). Until the end of August, you can use my code mlgrant2 for 50% off. Follow @CSSinDepth on Twitter for updates. Continue reading...

Save Scoped CSS

Update June 23, 2016: The editor’s draft has been updated again. It looks like @scope is gone for good, so this post is now a moot point. The way forward now lies in the Shadow DOM. About a year ago, I wrote about a promising feature of CSS, scoping. I love the idea of this feature, and I think it could be one of the most important changes in the near future of CSS. Continue reading...

A Quest for Interchangeable Parts

This is a bolt. You may not realize it, but it is a modern marvel. It is a 150mm bolt with an M20 threading. It works in any piece of hardware that is cut with the same size and threading. It can be turned with any 30mm hex wrench. You can reach into a pile of M20-2.50 nuts, made by any manufacturer, pull any one out, and it will fit this bolt. Continue reading...

Width and Absolute Positioning

I recently came across this question on Twitter: What's the diff on a position:absolute el btw {top:0;right:0;bottom:0;left:0;} and {top:0;left:0;height:100%;width:100%;} ? — Karl Swedberg (@kswedberg) January 28, 2016 “That’s easy”, I thought. “They often seem the same in practice, but width and height are based on the parent (or nearest block-level ancestor). Top, right, bottom, and left are based on the nearest positioned ancestor. Those aren’t necessarily the same element. Continue reading...

Simply White

Benjamin Moore has declared the Color of the Year for 2016 to be “simply white”. We have reached peak minimalism, y’all. So I’m steering into the skid. Here’s my new design. Continue reading...

CSS First

In 2003, the CSS Zen Garden went live, and it spearheaded a revolution. At the time, many web designers were still using tables for layouts, and the battle for semantic markup was underway. The Zen Garden showed the world, in beautiful color, what CSS could do. By changing the CSS, you could make the website retro, postmodern, abstract, or elegant. You could move the sidebar to the left, the right, the top, or the bottom of the page. Continue reading...

Into the future of CSS

In my last post, I laid out why I think moving our CSS into JavaScript is not a good idea. If am totally honest, however, I have to admit I brushed off the concerns Christopher Chedeaux raises in his slidedeck. The seven problems he named can be mitigated by best practices, and most of us can do just fine, because we do not often work in apps of the same scale as Facebook or Google. Continue reading...

Against CSS in JS

Some folks want a unified language of the web instead of CSS, HTML, and JS. It's increasingly looking like JS will just eat the other two. — Henrik Joreteg (@HenrikJoreteg) May 28, 2015 I have long believed that pieces of our JavaScript are intimately coupled with the DOM, especially in the context of web apps. For far too long, we waved our hands and pretended we have a separation of concerns simply because our HTML is in one file and our JavaScript is in another. Continue reading...