Avoid Careless Production Mistakes with Custom Scripts

In the wise words of @stahnma, “Everybody has a testing environment. Some people are lucky enough to have a totally separate environment to run production in.” Thankfully, the project I’m working on has multiple environments: production (the most recently-released version), staging (for pre-release testing), dev (for dev team use and testing), and multiple review apps […]

Practices for Harnessing SCSS with React

We have been hard at work on a client project using React. We haven’t made our way to implementing CSS Modules yet, but we’ve established a set of rules to help us keep the CSS in order.

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 […]

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!

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.

How to Create a Responsive Square with CSS

During a recent project I came upon an interesting CSS problem. I needed to create a square element that would maintain its square shape as it responsively resized to a changing window size. The Problem It is easy to create a square when we can explicitly declare its 'width' and 'height': .square { width: 100px; […]

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 […]

What “Semantic” Markup Really Means

I’ve found that trying to write semantic markup has helped me write cleaner HTML. It’s been a useful guideline, but it hasn’t been perfect, and I’ve sometimes struggled with how to model things well. Recently at the March SoftwareGR event, I heard Jonathan Snook relay an example that I found very insightful.

CSS is a Mess – Applying the SRP and the Law of Demeter

At the last SoftwareGR event, Jonathan Snook gave a great talk titled “CSS is a Mess.” I was particularly interested because, while I’ve always tried to organize my CSS thoughtfully, I’ve often found that the end result isn’t as clean as I’d hoped. Jonathan’s talk is full of great tips to help organize and clean […]

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 […]

Atomic Spin

Atomic Object’s blog on everything we find fascinating.

css