Accessible Form Example

Form accessibility is frequently not even considered by web developers, but it is a fairly easy activity to create a form that is both easy to use and accessible to to people with disabilities. This example is taken from Better HTML Forms which is a book I’m writing to help developers create better forms. Sample […]

HTML vs Body Classes

There was a recent post on CSS-Tricks about HTML vs Body in CSS which was interesting. It made me think about classes that I typically assign to the html tag vs the body tag and I wanted to take the opportunity to codify my process. In a nutshell, the html tag is for classes that […]

A Brief Rant on HTML Form Complexity

It seems that there is a tendency among marketers and other folks capturing information online to want to maximize the “effectiveness” of their form interaction by asking for as much information as possible. I’m sure that the thinking is along the lines of “Why simply ask a visitor for their email address in order to […]

Image Sprites without Compass – Part 1

I’ve been long interested in migrating from Compass to LibSass for Sass compilation – mainly for performance reasons – but a few things have held me back. The main issue is image sprites. These days I use vectors everywhere I can (either in an icon font via IcoMoon or svgs in CSS via Grunticon or […]

Feature Enabled Mixins for Sass

It’s not uncommon to have some CSS that is for certain browser capabilities (JavaScript, animation, etc). By combining a feature detect solution like Modernizr (which sets classes on the html element) with some basic Sass mixins we can make the SCSS more readable. Here is a (contrived) example. See the Pen OPGWdr by Matt Vanderpol […]

Thoughts on Managing Colors in Sass Projects

While working on building out a site from PSD comps, it is common to want to extract colors into a single location and name them to facilitate reuse and bring some consistency to the final pages. However, depending on how many colors are at play in the site, this can be a non-trivial activity. I’m […]

Exploring Tile Layouts with Bourbon Neat

Frequently in projects, I find it necessary to lay out a set of tiles (such as logos) on a “grid” system. Invariably different page designs have different requirements for layout: 6 up 5 up centered 4 up but with space on each side 3 up To date, I haven’t come up with a system that […]

Easier SVG Animation with Sass

I was working on a project recently where I needed to animate an SVG seven segment display. I thought that this would be a great place to use CSS animation and @keyframes but there would be a lot of repetition in the CSS so I scripted it with Sass. I’ve put together a Sassmeister example […]

Better Sass through Susy susy-get Function

Today we are continuing our look at Susy internals to get a better understanding of how Sass can be used in more advanced ways by examining the susy-get function. susy-get Function [gist id=”b36ea4d22606bea80c07″ file=”susy-get.scss”] Comments – Lines 1-5 Every Susy function or mixin that I’ve seen starts with a comment block that explains the purpose […]

Using an Image sprite in a Media Query with Compass

I recently revisited some old Sass code and needed to fix it to compile with the latest version of Compass. After I cleaned out the CSS3Pie bits (yes it was that old) I ran into the dreaded You may not @extend an outer selector from within @media. error message. It took me a bit of […]