Tag: CSS

Preparing for WordPress 4.4 comment form changes

As detailed on the Make WordPress blog, the order of comment fields will change in WordPress 4.4, scheduled for a December 2015 release. This may affect your theme if the comment form doesn’t use the typical layout of one field above the other. Preparing your theme for the release of WordPress 4.4 will require your CSS […]

Code

Media queries and calc

calc isn’t a new feature, but at the time of writing MDN describes it as experimental: this technology’s specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers […]

Code

Vendor prefixes, polyfills and former clients

Jeremy Keith’s recent post Polyfills and products asked an interesting question about handing polyfilled code to clients: [Short term client projects] makes it very tricky to include a polyfill in our deliverables. We’d need to figure out a way of also including a timeline for revisiting that polyfill and evaluating when it’s time to drop […]

Code

WordCamp Sydney Slides

I presented an expanded version of my CSS Naming Conventions talk at WordCamp Sydney. Thanks to everyone who came along, my slides are below. I’ve put together a quick one page site linking to various resources at cssnamingconventions.com.

Talks

Sass Media Query Mixins

There are a few Sass media query mixins going around for dealing with old versions of IE. Often they include predefined break points, whereas I like the simplicity of passing a numeric value. Capable browsers wrap the content in a media query, incapable browsers get the unwrapped content.

Code

CSS Naming Conventions – Be Responsive

I had the pleasure of speaking at Be Responsive Melbourne last month on the subject of CSS Naming Conventions. Both my slides and the video from the evening are now available.

Talks

Open site redesign using a pattern library

As I’ve mentioned previously, I’m in the process of redesigning this web site. It’s very much a work in progress. Pattern Library As a first step I’m building a pattern library and I’ve decided to open source the repo during the build process. I’m using Pattern Lab for the purpose.

Code

Firefox inputs and line-heights

For years, Firefox has taken the prize for the single most frustrating rule in a UA stylesheet. input { line-height: normal !important }

Code

Why Use a Naming Convention

In my last post, I mentioned I was trialling the SUIT CSS naming convention as I redevelop this site.  More generically, let’s address why a naming convention should be used at all. For the purposes of this post, I’m talking specifically about class naming conventions. (While one may have naming conventions for JavaScript functions, variables, […]

Code

Trying the SUIT CSS Naming Convention

I’m in the process of redeveloping this site. The site will still use WordPress but I’ll be adding a custom skin. I’ve been wanting to try Pattern Lab for a while, so the first step is to create a pattern library. It’s early days, today’s task it to set up a reset and base styles. […]

Code