Good Sites Gone Sans


I viewed reputable websites purely in Comic Sans. The results were striking. A couple of weeks ago, I started setting my browser to display all the text content of reputable websites in Comic Sans MS, the most hated font in the world. The results were striking, like if you could watch C-SPAN with a “dress […]

Why I Wish I’d First Learned Programming in Sass


Sass logo

Sass lets you code CSS stylesheets the way you would write other software. I just got done with a huge client project that relied heavily on Syntactically Awesome Stylesheets (Sass), the CSS preprocessor. Sass, which we’ve written about a few times, lets you code CSS stylesheets the way you would write other software, using functions, variables, inheritance, and […]

Preserving readability with variable text and background colors in Sass


Sass logo

This is a third post exploring applications for Syntactically Awesome Stylesheets (Sass), the CSS preprocessor that can really turbocharge how you create and modify CSS. Today we’ll be exploring a function called ensureTextContrast() that lets you rest assured that, across two arbitrary font and background color combinations, the font will be light or dark enough […]

rUp: A Sass Function That Offers a Powerful Alternative to Ems


Sass logo

This is a second post exploring applications for Syntactically Awesome Stylesheets (Sass), the CSS preprocessor that can really turbocharge how you create and modify CSS. Here we’ll be looking at a very simple Sass functions I’ve written called rUp, which I think is a generally-better alternative to CSS’s default em specification. The code @function rUp($multiple: […]

How to view variable values in Sass


Sass logo

This week’s post is pretty technical—it’s only for users of Syntactically Awesome Stylesheets (Sass). I’m leaving. Before I go, what is Sass? Sass is a CSS preprocessor—a way to write your CSS stylesheets as if you were programming them, with variables, reusable mixins, and a lot else. I can’t recommend Sass highly enough—it literally made […]

Responsive, square elements with JavaScript/jQuery


A simple idea… If you’re a designer, it’s pretty natural to want a bunch of squares to line up next to each other. And if you’re a designer who’s up on responsive design best practices (which we strongly recommend), it’s very natural to want these squares to dynamically resize themselves for different screen widths. In […]