Grow your CSS skills. Land your dream job.

Lobotomized Owls 

I had a post in my drafts for CSS-Tricks recently I called "Removing the Space from the Bottom of Modules". It's all about that tricky situation where you want even padding all the way around some elements to visually separate them. But elements inside will also need bottom margins, and that might lead to extra space along the bottom where that margin hits the padding.

Apparently I'm getting old and losing my mind, because I've already written about it. But I didn't come to any stunning conclusion in that article. The best I came up with was a kinda gross compound selector that I don't even want to talk about.

Heydon Pickering does have a stunning conclusion for this issue:

* + * {
  margin-top: 1.5em;
}

I'd definitely try that in a new project. It does make me think that future CSS could help us here though. Perhaps specifying that a particular edge of padding was allowed to collapse into margin?

Probably Don’t Base64 SVG

Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image/png), semicolon, then the data of that file.…

Read Article →

SVG Artboard Sizing

There are a couple of different (rational) approaches to SVG artboard sizing.

The term "Artboard" here is referring to that concept in Illustrator, basically the white drawing area you have for the document. Ultimately it refers to the viewBox in the actual SVG output. It matters very much for front end developers, because if there is no consistency, the positioning of the SVGs will always be a little one-off battle and really hurt the idea of SVG being a useful …

Read Article →

How To Get Started in Web Design

Here's an answer to how to get started building websites that I fully endorse and isn't vague. This is going to cost a little money, just like learning to play the guitar requires buying a guitar and some accessories. This is also going to require a little time and mostly isn't directly about the coding itself. It's about getting you to a place where you're doing web design for real and you can't help but learn!

I'm going to …

Read Article →

Sponsor: Creative Market – October Big Bundle 

It's always great to have a personal collection of design resources you know that you can use for whatever you like at your fingertips. Vectors flourishes and illustrations, photos, textures, patterns, fonts, layouts, all that good stuff.

No better place to stock up than Creative Market. This week, they have put together a Big Bundle of their best products. From graphics and fonts to photos and Photoshop actions. For only $39, you can fill up your designer's toolkit with 105 resources. This will only be available until October 21st, so be sure to grab it before it's too late.

A Guide to SVG Animations (SMIL)

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide.…

Read Article →

Sponsored: Stack – Task Management for Dev Teams 

Stack is a powerful new task management system for Devs and Designers. A simple and fully customizable tool that fits your workflow. Manage projects and communicate with your team hassle free and in real time.

I really like how Stack approaches this. It's exactly how I would have done it. There are projects - big buckets that tasks go into. Then each project has these columns that you can organize however you want. Each task is actually in a column. Could be different types of tasks or the state the task is in, whatever works. Then each task has it's own little world of people and conversation and todo's and stuff, if needed. So I might have a CSS-Tricks account, with a project for The Lodge, that has a column for Videos To Shoot, and each video is a task, and in the task I leave notes on what the plan is. Beautiful.

Free for 30 days, no credit card required to get started. Super simple pricing model after that ($5/month per user).

Intermediary Pages in a Site Hierarchy

I had a reader write in with an interesting question:

When one has multi-level navigation, do you think it crucial to have an actual page for the top-level item? For instance, About Company, Founder, History.

There isn't really anything worth putting on the About page that wouldn't be on the three sub-pages. In the nav, should About just redirect to Company? Should there not be a Company page and its content be moved to About?

Any best practices you've found …

Read Article →

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More

Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code.


A "build process" is all the stuff that happens between the code you write and code that goes out to a live website. We've talked before about using Grunt for this. Sass is processed, assets are combined, minification and optimization happens, etc. There are endless things that a build process can …

Watch Video →

More Blog Posts →

*May or may not contain any actual "CSS" or "Tricks".