How I Test CSS

At Atomic, we practice Test-Driven Development for all the code we can, from single functions to entire stacks. But there’s one kind of code we’ve long neglected testing: CSS. We rarely have coverage of it, and we often discover bugs and style regressions long after they were introduced. We’re not alone. Most software developers don’t do CSS testing. It’s tough to assert that a website looks the way you want.

I’ve wrestled with the problem of CSS testing for a long time, and I have two suggestions for catching style problems early. Read more on How I Test CSS…

Creating Vertical Alignment with Susy and CSS Flexbox

In the middle of a responsive page using Susy, I encountered a layout which required vertical alignment across different kinds of elements, ideally without hard-coding a dimension anywhere. I wondered, could Susy and Flexbox play nicely together to create this complex layout? Indeed, they could and they did! Read more on Creating Vertical Alignment with Susy and CSS Flexbox…

Implementing an Offscreen Menu in Ember.js

Offscreen menus have become a standard in mobile apps and web interfaces over the past several years. I was recently given the task of implementing an offscreen menu for the Ember.js app that I have been working on over the past several months, so I figured I would share my solution.
Read more on Implementing an Offscreen Menu in Ember.js…

Getting Around Internet Explorer’s 4,096 CSS Rule Limit… Again

In 2012, I wrote about handling IE8’s limit of 4096 selectors in any single CSS file. It’s been several years since then… and this is still a problem.

Using SCSS and frameworks makes it distressingly easy to hit these limits. In a perfect world, we’d be able to avoid them altogether, as the bloat is not really a positive thing. However, until I’m able to refactor things to fit under such limits (or until such limits are lifted and IE9 is firmly behind us), here’s another solution.

Read more on Getting Around Internet Explorer’s 4,096 CSS Rule Limit… Again…

Adventures with SASS Preprocessors

For design implementation, one critical power tool that I wouldn’t want to be left without is the CSS preprocessor SASS. Generally when I’m working on a project here at Atomic, I’m operating within the context of a larger application, maintained by the developers on my team, that runs Ruby on Rails or a similar tech stack. We install the SASS gem in the application, and we’re good to go.

In the case of our recent website redesign, I found myself in a very different type of application, writing templates for our new Craft CMS install. Read more on Adventures with SASS Preprocessors…

Eliminating Multiple-Style Classes with @extend and SCSS

SCSS has numerous beneficial features, include one that I really came to love during my last project. The @extend feature really took the cake, and I think will help me along my path as a maker! It has a couple downfalls in practice, but it is such a great feature that I want to convince you to give it a try on your next project.

What is @extend?

Extend is a lot like inheritance in programming. It lets you import css styles from a previously defined css rule into another rule.

Let’s say you have three elements on the DOM that you want to style. Each element will look the same except each element’s border color will be different. Using the @extend feature, one approach to solving the styling of the elements is to define one class for the structure of the element. We will call the class .element, and define the height, width, background color, border thickness, etc. Read more on Eliminating Multiple-Style Classes with @extend and SCSS…