The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Article Archives


David Walsh on Redesigning with Sass

A guest post by David Walsh who writes about his experience as a first time Sass user redesigning his own website with it.

Smashing Mag CSS Q&A 4

The fourth installment of my Q&A series on Smashing Magazine features questions about SVG fallbacks, vertical rhythm, retina media queries, and several more.…


Dale Sande and I chat about Sass on his new podcast.…


Compass Compiling and WordPress Themes

If you're a WordPress theme builder and a Sass/Compass user, first, yay you are awesome! Second, there is this little issue that will probably crop up for you regarding compile locations, so let's solve it now.…


Eventually, we'll all be writing code in the browser. It just makes too much sense. What will get us there is projects like this which make the experience better instead of the same.…

Aims to be the canonical non-vendor-specific documentation of web features. The major browser vendors are on board. It's in "alpha" so things are a little rough.

A noble goal, to be sure, but it feels strange to me. If Mozilla is on board, why aren't the MDN docs moved over into it? Is MDN going to shut down and point everything to this? If not (likely), which are we supposed to be contribute directly to and do new contributions get …

box-shadow vs filter: drop-shadow

Lennart Schoors shares that filter: drop-shadow(); isn't just box-shadow in disguise, it's way more useful. Essentially, it follows the rendered shape of any element (including pseudos). This makes shapes like these even more compelling than they already were, eh?…

Responsive Web Design Weekly

This email newsletter by Justin Avery is a good way to keep up with all the latest news, implementations, techniques, and what-have-you with the biggest web sea change since CSS.…


Web Developer Economics: Monthly Service Costs

Dave Rupert once asked people on Twitter about all the web services they paid for and it looked like he received a lot of interesting replies. I thought I'd blog mine and get the ball rolling on sharing lists of these services. It's interesting to consider the apps that have managed to cross our magical barrier to our pocketbooks. Perhaps looking at them as a whole we can see a pattern or at least have better mental grasp on our …


CSS-Tricks Chronicle VI

In forthwith I expound upon the events of the day and lay jolly hyperlinked words of great relevance.

Digging Into WordPress v3.4

Jeff Starr has updated our co-authored book to cover the new things in WordPress 3.4, update various content, and update the ALL AJAX theme that comes with it.

This is the 10th update to the book. Pretty cool that there are people that bought they book nearly 3 years ago now who are still getting free updates.…


Custom User @mixins

Mixins are one of the most useful and compelling reasons to use a CSS preprocessor. CSS3 is a classic example but we already have those available in any project through Compass. In this post I share some examples of custom user-authored mixins that are useful to specific projects.

CanIUse on GitHub has the most comprehensive browser support charts for web features. Now we can help Alexis Deveria keep it that way by contributing on GitHub.…


Live Weather Display Using CSS, jQuery and PHP

In which Darren Jamieson of Engage Web explains how he visually emulates the weather on the top header of using all sorts of fun technology.

Notes from my BD Conf Workshop

Notes from a workshop I recently did. More useful if you were actually at the workshop, but there might be some useful stuff in here even if you weren't.

Receding Background Modal Boxes

In which we reverse engineer the really cool effect of Hakim El Hattab's Avgrund demo. Visually pleasing, but also an effective and clear design pattern for modal/dialog boxes.

ShopTalk Episode 36

A RAPIDFIRE episode of ShopTalk where Dave and I answer questions with no guest, no news, no drama. Well maybe some drama. Big thanks to ConvergeFL (coming up next week in Tallahassee, Florida!) and CSS Dev Conf for sponsoring. …

Mo’ Pixels Mo’ Problems

Repeat after Dave Rupert:

Use CSS and web type whenever possible. Use SVG and icon fonts whenever applicable. Picturefill raster graphics.…


Paul Irish:

The past few years’ browser focus on speed has been great for us and our users. We’ve seen a huge and dramatic performance boost on benchmarks like Sunspider, Kraken, and Octane. But, these benchmarks, often crafted by JavaScript VM engineers, test raw JavaScript performance, which is rarely the bottleneck we have in our apps.

There is a new kid on the block for testing browser performance that testing things that developers actually care about.…

CSS FilterLab

Little one page tool from Adobe for playing with filters (blur, grayscale, brightness, etc). Filters are working in stable Chrome and Safari 6 now. I predict filters to be a huge trend in 2013 as browser support grows and designers start figuring out what kinds of interesting/effective things they can be used for.…


CSS-Tricks Chronicle V

This week in things that by for which have transpired and thus exude fresh relevancy upon theyself.

ShopTalk Episode 35

This week Dave and I were joined by Brad Frost. The overall theme is responsive design and we end up addressing quite a few nuanced issues and concerns with it. Big thanks to Harvest and Environments for Humans for sponsoring. …


Using LESS as a Live CSS Engine

Andrew Powers of PageLines explain how they use LESS in their product to give it some neat features.


Open-Dyslexic is a new open sourced font created to increase readability for readers with dyslexia.

#Lazyweb: They have an iOS app, but someone should make a bookmarklet to swap out the font on page with this font for desktop browsers. Or browser extension(s). Update: all of which now exist on the downloads page.

via Instapaper Blog

Responsive Measure

A jQuery plugin by Josh Brewer and Mark Christian that adjust the font size based on your ideal line length to keep a consistant typographic measure across all screen sizes. Kinda like FitText.js but for use on body copy. The new vm/vh units may obsolete this, but not with the same simplicity.…


WordPress Plugins I Use

I think this is a fun and useful style of post that any WordPress blogger can do. It's always interesting to hear in what ways people are extending what WordPress can do out of the box. I'll share the ones I'm using here on CSS-Tricks then you can share yours (either in the comments or in a post on your own WordPress site). My list is quite a bit different than the last time I did this in 2008. If …

ShopTalk Episode 34

This week Dave and I were joined by Jeremy Keith, long time super genius. We talk about the lack of a main content element in HTML5, the HTML5 vs Native classic debate, mobile first hindering creativity, and more. Big thanks to Squarespace and Environments for Humans for sponsoring.…


Rundown of Handling Flexible Media

When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article></article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will flow nicely to fill a container. That's not too hard. But media - images, video players, and audio players - demand a bit more attention …

Preprocess THIS!

Allison Wagner shares her thoughts after 10 months of working with a CSS preprocessor. Many of the thoughts resonate with my own. On variables:

What I love most about them is they force consistency across the design system.

Being DRY is cool, but it's more about saving you from yourself. To me, it makes CSS fun again instead of tedious. …


CSS-Tricks Chronicle IV

The week in "sort of interesting things that happened to me" and "stuff I've been working on."

Opt-Out Responsive Design?

Should we allow users to opt out of our responsive designs? Isn't that admitting failure? Or are there reasonable circumstances when it's a good thing? How would we do it?

ShopTalk Episode 33

This week Dave and I were joined by WordPress mastermind Alex King. We mostly talk about WordPress stuff, including some tech stuff but also bigger issues like the business around it and motivation. Big thanks to BD Conf and Environments for Humans for sponsoring. …


Video Source by Screen Size

Right after The Lodge opened up around here, I started getting reports right away about some videos not playing on the iPad. Ugh, crap, these are paying customers and they should be able to watch these things on a modern device.…

“Stacking” Responsive Pattern

Demo by Neil Carpenter in which it looks like a bunch of regular blog posts in a row on large screens and turns into a "stack" of blog posts with navigation on small screens.…


Miller Medeiros:

SOLID is an acronym for five basic principles of object-oriented programming and design that when applied together can make systems easier to maintain and to extend over time.…

jQuery Fundamentals

Rebecca Murphey updates her incredible "guide to the basics of jQuery."…

.htaccess Made Easy

My Digging Into WordPress partner in crime Jeff Starr now has a brand new book!…


Crashing Mobile Webkit

One of the big heart sinking bummers when the new design launched was that the announcement blog post would cause Safari on some mobile devices to crash. It would crash my iPhone 4S, I heard reports of crashing other Android devices, but it wouldn't crash my iPad 2. Debugging on mobile is already kinda hard but debugging a page that crashes the entire application is extra hard. …


Design v10

It's been just about a year since the v9 design. You know what that means! Redesign time! This is, most definitely, the biggest overhaul yet. Not that you won't recognize it. There is a fresh coat of paint, but all the old stuff is there. …


CSS :target for Off-Screen Designs

Matty Collins shows us how using the Checkbox Hack (or even :target in simple situations) we can create navigation heavy mobile UIs without any JavaScript.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed