MicroConf 2015 was about a month ago and it was a fantastic conference (as always). As part of getting the most out of the conference, Rob and Mike encourage attendees to really come away with 3 takeaways and 3 relationships. Over the last month, I’ve been communicating with various people I met or re-met at […]
Read More »Configurable Star Rating Without JS Redux
The other day, I saw an interesting Sass example of a configurable star rating without JavaScript by Roy Tomeij. I was drawn to several aspects of the approach but noticed that you couldn’t click to “select” a star rating – so I decided to fork his example and update it with that behavior. Click “Result” […]
Read More »Transform Order Matters
I was recently working on a project that involved a fair bit of CSS animation and I discovered that the order in which the transform functions are ordered in your markup can affect the display. Specifically putting scale(1.2) before translateX(-50%) shifts the element off center. But if the translate is first, then the scale everything […]
Read More »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 […]
Read More »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 […]
Read More »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 […]
Read More »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 […]
Read More »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 […]
Read More »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 […]
Read More »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 […]
Read More »