Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

32 comments

Introducing Scut, a new Sass utility library

The following is a guest post by David Clark. I think David's new Sass library "Scut" is pretty interesting. It's like a design utility library, which is distinct from a design pattern library in that it enforces no particular structure or particular visual design. I've always found this kind of thing fascinating, largely because I've never been able to pull it off in a way that feels good to me. I always end up leaning too far into visual

50 comments

Why Responsive Images Is So Hard

Perhaps you've been keeping up on the responsive images #hotdrama? If you have no idea what "responsive images" means, it means serving different images under different circumstances. How to do that and what those circumstances are vary widely.…

18 comments

Namespaced Events in jQuery

It's really easy to add an event listener in jQuery. It's equally easy to remove an event listener. You might want to remove a listener because you don't care to perform any actions on that event anymore, to reduce memory usage, or both. But let's say you've attached several listeners to the same event. How do you remove just one of them? Namespacing can help.…

Caption Everything

Help Dave Rupert build a thing:

I started a repository called WordCast under the Accessibility Project with the goal of converting that CodePen into a Node/Express/Socket.IO app that can brodcast subtitles. I’ve never built anything on any of these buzzwords I just typed, so I could definitely use some help.…

CSS Stats

Some heuristics on CSS that you can run on any site. Started with the sharing of that data from several popular sites. It's open source and I would think the most valuable feedback to give would be "what data would be useful to know about your CSS?"

10 comments

The CSS Standards Process

The following is a guest post by Sebastian Ekström (@seb_ekstrom) a web developer from Sweden. I was interested in it because we talk a lot about CSS around here but have never talked about how CSS comes to be. CSS is just a syntax invented by people like you and me to try and solve problems. It's an extremely complicated thing involving: ease of use, backwards compatibility, browsers ability to implement with satisfactory speed, coverage of use cases,

Sass for Web Designers

Speaking of books, Dan Cederholm's new book on Sass is out. Forwarded by yours truly (!).…

Grade components, not browsers

Scott Jehl (who is writing a book on the subject) on why you might want to progressively enhance on a component-by-component basis based on what that component needs, rather than a sweeping capability judgement based on the browser.…

pattern lab

Make your own "tiny bootstraps, for every client."…

CSSOff 2013

It's live!

If this is the first you've heard of it, it's a contest where you get a Photoshop document and have two weeks to convert it into HTML and CSS. You're judged on an established set of criteria.

The design this year is by Daniel Mall.

You have to submit your design through CodePen. As you'll need to host files (like images) to make it happen, and you'll want to be working privately, you'll need a …

HTML Imports

Essentially a way to import a block of dependancies (scripts and styles) into an HTML document.

<link rel="import" href="imports.html">

It doesn't actually just plop the content from the referenced file where you call it though, like an @import does in CSS or and include does in a server side language. HTML could very much use that.…

-moz-gone

Mozilla says they "will no longer ship new 'moz'-prefixed APIs" as part of an overall philosophy of: "Is this good for the Web?"

Blink has also said this. Word has it WebKit still plans to use them as they deem necessary.…

23 comments

Multi-Line Padded Text

This is one of those tricky CSS things that I see come up every few months. I guess what better place to address it than CSS-Tricks eh?…

54 comments

A Guide to Web Components

The following is a guest post by Rob Dodson (@rob_dodson). Rob and I were going back and forth in CodePen support getting Polymer (a web components polyfill, kinda) working on a demo of his. We did get it working, and things kind of evolved into this article. Take it away Rob.

Update: Rob updated this article on March 5, 2014, getting everything up to date, as this is a rather fast-moving technology at the moment.

Update: Updating …

29 comments

Transformer Tabs

Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown. There are loads of variations of course, but it's one of the most ubiquitous navigation design patterns out there. When arranged in a horizontal row, it is also one of the least small-screen-friendly design patterns out there.

We can make it work though.…

Which CSS Measurements To Use When

I agree with these general guidelines from Dudley Storey. Funny how these general-purpose length measurements have fallen into to some pretty specific niches.…

62 comments

Tinted Images with Multiple Backgrounds

The background property in CSS can accept comma separated values. "Multiple" backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can "tint" that image. But it's not quite as obvious as you might suspect.…

13 comments

Bookmarklet to Colorize Text Between 45 and 75 Characters (for line-length testing)

Recently at the CSS Dev Talk, I attended Clarissa Peterson's talk on responsive web typography. One part of it was about line length and readability. Of course, there are exceptions to every rule and your mileage may vary, but the traditional thinking is that body copy (long text, multiple paragraphs, takes more than a glance to read...) should be between 45 and 75 characters per line to be comfortable. Shorter is awkward, longer makes it easy to lose your place …

32 comments

Email Domain Datalist Helper

What if someone signs up for your web app and they type in their email address as susan_smith@gmaoil.com? They don't notice, they never get their confirmation email, they never can log in again, the "forgot password" feature doesn't work, and there is a lot of frustration and finger pointing.

Can't we help with that?…

33 comments

Conditional Media Query Mixins

Using a @mixin in Sass for your media queries is useful for a variety of reasons. The most important of which is probably the cognitive ease of having the properties and values you are changing right next to the originals. But another reason is that you then gain the ability to "shut off" those media queries if you need to, and there are some perfectly valid reasons to want to do that.

Animating DOM transitions

Say you add some new element to the page and it pushes things around. That can happen instantly, but it helps your brain understand what just happened if the elements that were pushed away animate to their new position. Enter Alex MacCaw and his new magicMove jQuery plugin:

The library works by appending a separate and hidden clone of the element you’re transitioning to the page. Any DOM manipulation you do is actually manipulating that clone. Then, when you’re finished, …

13 comments

Well Rounded: Compound Shapes in CSS

The following is a guest post by Parker Bennett. Parker is a bit of a regular around here, known for tackling common problems with unique solutions. This time he's back at it creating complex shapes that have image backgrounds, shadows, and curves, yet are flexible.

39 comments

Cross Browser CSS Injection

The following is a guest post by Shane Osbourne (@shaneOsbourne) from England. Besides being a musician, Shane is also an open source developer. Shane has developed a tool called Browser-sync for making CSS injection work across a wider swath of browsers than you might assume possible. And it does more than that, I'll let Shane tell you about it.

Objects in Space

I'm a big fan of the front end architecture thinking here by Andrew Colclough.

I want my approach to solving this user problem to be re-usable, independent, and adaptable to different use cases.…

Flat UI and Forms

Jessica Enders:

The problem is that in the push for simplicity, flat UIs may have gone too far.

Important stuff about the actual usability of forms while the "flat design" trend is perhaps at its peak. I highly suspect that as time goes on we'll start seeing traditional affordances seep back into designs, like buttons that look like buttons and form fields that look (as Jessica aptly puts it) "hollow".…

13 comments

New T-Shirts! New Store!

Hey hey everybody, I made some new shirts! I wanted some T-Shirts that were more of just the straight CSS-Tricks logo type. So I had some made up. While I was at it, I moved the entire store system (as you do).…

148 comments

Thoughts on GoDaddy buying MediaTemple

Today it was announced that GoDaddy purchased MediaTemple. I've been a long time user of both of them. I thought I'd share my thoughts. Full disclosure: this site is on a free server they give me. I pay for other MediaTemple services. I also use their affiliate program but there are no affiliate links in this article.…

83 comments

Interview Questions and Exercises About CSS

If you're in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of things to ask on-the-fly. I thought I'd think up and round up some ideas for reference.…

Cargo cult analytics

There is a lot to quote in this great article by Stijn Debrouwere:

There’s nothing like a dashboard full of data and graphs and trend lines to make us feel like grown ups.

... metrics only make sense when you’re going to do something with them.

I’ve never seen a news organization that has a workflow that would allow them to routinely respond to their readers’ behavior right now.

1) Have an idea where, depending on data, you’ll do A, …

Introversion and UX

Angela Craven and SuAnne Hall with thoughts, interviews, and research into introversion can be an asset to the UX field. Like the majority of folks in the world of computers, I am introverted and a fairly full-tilt one at that. My own thoughts. And a funny reminder not to be too obnoxious about it.…

28 comments

Animated Media Queries

If you apply a transition on an element for a particular supported property, and that property ever changes, it will use that transition. If a class name on that element changes and the new class changes that property, it will transition (assuming what that class does isn't remove the transition). If JavaScript literally changes the that style property, it will transition.

Likewise, if a new media query takes affect, and that media query has something in it that changes that …

115 comments

Creating a “Meet The Team” Page in WordPress

The following is a guest post by Kevin Leary. I was pretty stoked to get this guest post submission from Kevin because it's my favorite kind of tutorial: practical and detailed.

Almost every custom theme I develop with WordPress requires a Management Team or Meet the Team page. If I had to guess, I'd say that I've built just around 50 different setups. It occurred to me that their must be many other WordPress developers out there creating similar …

27 comments

Conical Gradients in CSS

The following is a guest post by Shankar Cabus. Shankar made a really rad color wheel on CodePen and showed it to me. I thought it was an image underneath, because gradients like this aren't something CSS can natively do. Or so I thought. Shankar found a way to do it with newfangled tech.

When I create filters, shadows, transformations or gradient backgrounds in CSS, it feels amazing. Who would have thought CSS would come this far. No need …

93 comments

Just Use [insert CMS here]! Or, Why I Still Love WordPress

I somewhat regularly ask questions about WordPress stuff on Twitter. Usually when I don't know how to do something or I'm seeing behavior that I didn't expect. I did write a book about WordPress at one time, but even when I was immersed in that, I wasn't an expert on every aspect of WordPress. Especially the deep developer-y stuff. When I ask a question, I'll always get at least a few responses like:…

24 comments

Blurry Transparent Header Effect from iOS7 in CSS

The following is a guest post by Fabrice Weinberg. Fabrice is a regular contributor around here. He's always looking forward to the latest technologies and possibilities. Here on the outset of iOS7, he looks into recreating a particular effect that you might not guess is even possible on the web. It's tricky, uses bleeding edge features, but doable!

Solved by Flexbox

Philip Walton looks at common CSS layout issues that were a pain in the butt before Flexbox.…

Line Mode Browser

Revisiting the first universally accessible web browser…

Focus transition

More cleverness by Nikita Vasilyev. The blue glow outline that surrounds focusable elements when they are in their :focus state "flies" (you have to see it) to the next focusable element. So when you tab around, it is very clear where the focus has moved to.

I think it's a light enough effect that the cognitive gains are worth the animation. No feedback yet from anyone visually impaired. It would be great to know if this is helpful to them.…