Scott Kellum

Websites on a 14kb budget

There is plenty of hype now around performance tricks and one of them is inlining critical CSS in the first 14kb of the first request to prevent render blocking. Today that seems like a minuscule amount of space to squeeze into but what if we set 14kb as the bar for our entire site? Is it possible?

No resets, sensible defaults

For the most part people will shop for a reset (I’m considering normalize a reset here), put it on their site without modification, and call it a day. On a budget we can’t afford any excess so the reset is the first thing to go. Instead write your own base styles and...

Accessibility isn’t a buzzword, it’s personal

Accessibility isn’t about screen readers, contrast, or big fonts. Accessibility is about people. When I say people I don’t mean those people over there with a big “disabled” label. In fact, most disabilities that effect users of websites are invisible and you might never know it from seeing someone on the street or having a conversation with them. Even people without a disability may have trouble accessing a website or may need to take advantage of an accessibility feature. Accessibility is about you, me, your family, your friends, everyone. Maybe not now but chances are that at some point in...

UI Kit is dead

NOTE: This has nothing to do with the excellent uikit project. It is unfortunate that I chose such a generic name for my side project.

For a long time I have been thinking about and prototyping various APIs and patterns for a pattern library I was calling UI Kit. Having created a grid system, type system, and numerous other tools with friends at team-sass a UI kit seemed like the missing link to compete with rapid prototyping frameworks like Foundation and Bootstrap. The tools I build do not dictate how HTML or the design of the site should look but they are instead tools to help you reach...

The new Kellum method

It wasn’t that long ago when Jeffrey Zeldman wrote about my image replacement method. While I still occasionally use this method, I try to avoid image replacements altogether, but I have been taking a dramatically different approach recently. So what is the goal of image replacement techniques? The goal is to have text without a font showing up. Now that @font-face is supported just about everywhere we can take advantage of it to load a font with characters that have no width and make no marks. Simply calling a font like this will make the text invisible. Early this year Ken Lunde and Adobe...

Designers, know your medium

Almost every day I hear some debate on whether designers should code or not. There are plenty of stubborn designers out there who think CSS is outside of their job description as well as frustrated developers receiving mocks that are exceedingly difficult or inconsistent to implement.

Design has always had a close symbiotic relationship with technology. Our profession would not exist without the invention of movable type and the printing press which was the technology through which things were published for centuries. Designers then had to understand the constraints of that technology and design...

Distributed knowledge with Compass

People tend to think of Compass as simply a mixin library. And while it’s true that Compass contains a great mixin library of the same name, it also provides tools to compile projects and to create frameworks that expand on its inherent capabilities. These frameworks can be used throughout your projects and distributed as Compass extensions. Although Compass is often compared with Bourbon, the two aren’t synonymous — you can load Bourbon into Compass. In this article, I’m not going to delve into either of these mixin libraries. Instead, I’m going to explore the frameworking capabilities of...

Stop redesigning, keep designing

Designers, myself included, tend to have a Sisyphus complex with our personal websites. We slave away for days, weeks, months, trying to perfect our sites to be the most awesome things ever and once they go live everything short of perfection is a total failure in our minds. Instead of fixing parts, the whole thing usually goes out the window for the next website to take its place. A lot of this is driven by changing design fashion, poor planning, and a lack of persistence to revise the imperfections. This itch to redesign has been featured on The Industry and is an all too common. Jonnie Hallman

Singularity: a modern grid framework

Everybody has a grid system these days. Frankly, I’m not surprised. There are so many different ways to deal with drawing elements across a grid and with CSS grid layout on the horizon the options for creating grids are only going to grow. People also like to use different class structures and naming schemes in their code, or want something different from a static 12 column grid. Handling breakpoints has made things even more complicated. Chris Coyer wrote a post Don’t over think grids that explains how easy it is to roll your own grid but as a project evolves your grid might evolve into something...

Specializing yourself into a corner

I'm a Sass addict. I will be the first to admit it and I can't imagine myself designing anything web related without Sass and Compass. These tools are awesome and make my life easy but they fragment the once blissfully uniform front end development landscape. Before, we had just HTML, CSS, and JavaScript but now those languages are fragmented into Sass, Stylus, LESS, CoffeeScript as well as various code management tools like Compass and Bower.

Diversity is fantastic but in the end, we are all just trying to share HTML, CSS, and JavaScript. It is frustrating writing a Compass plugin to solve...

Design abstractions

In programming abstraction is a core development practice. The purpose is to separate commonly used components from specific use cases allowing the re-use of code. However, I see abstractions as more than this. Great abstractions are the distillation of an ideal and can be formed with just that ideal in mind, devoid of specific use case assumptions. Starting from a use case and abstracting from there is not unlike solving a maze backwards. The best ideas start from a blank slate with lots of research behind it. Starting with an abstraction allows you to research and explore with that abstract...