on 1 August, 2016
The Input Icon component is greatly simplified by using background images. In this case, multiple background images, including an SVG and a linear gradient, have been used to achieve the left border on the icon.
on 16 January, 2016
When a developer takes over another’s preprocessor code, the first thing they are likely to look at is the variables file. Well-commented and well-defined variables set a great foundation for a project of any size.
Published in Smashing Magazine, Jan, 2016.
on 16 January, 2016
I've got a course up on Pluralsight, on Responsive Web Design, directly in the browser. It's meant for those who wish to bypass the Photoshop/Sketch layer, and get some CSS chops without relying on frameworks like Bootstrap and Foundation.
on 20 July, 2015
CSS' clip-path property is your ticket to shape-shifting the monotonous, boxy layouts traditionally associated with flat, responsive design. Once you get your hands dirty with clip-path, there’s no end to the shapes you can generate, simply by tweaking a few values.
Published in Smashing Magazine, May 2015.
on 24 March, 2015
You know the trade-off. Use the img tag to display an SVG, and you get clean markup — at the cost of styling the SVG using its properties like fill, stroke, SVG filters and more.
on 6 March, 2015
I’m using flexbox in a big way for a web app that I’m currently working on, and I am very pleased with how it handles layout and box calculations intelligently. Small modules work very well with flexbox, and you can use floats and other tools for broader sections of the layout.
Published in Smashing Magazine, March 2015.
on 26 December, 2014
If you ask me, the worst kind of bugs are for modules or properties that a browser claims to support, but not entirely so. IE has supported CSS keyframe animations since IE 10. However, I recently discovered a bug in the latest version.
on 1 November, 2014
So here we go again. Three demos of pure CSS checkboxes and radio buttons. I generally keep my demos raster free and bereft of extra styling. The reason is so you can add your own styles and not have to override the demo styles.
on 13 October, 2014
Woff was specifically created for using custom fonts via the @font-face rule. Every single modern browser has adopted it. So why not skip the other formats and use it exclusively?
on 18 June, 2014
Two weeks ago, a designer sent in an app landing-page mockup with slanted buttons. I attempted to do this the most natural way, i.e. using CSS transforms via skew. I skewed the button selector and it worked beautifully, except that it skewed the text as well.
on 17 May, 2014
I was ruminating on Sass’ lighten and darken functions today morning and wondered whether there was a way to do this via native CSS. I also remembered that I haven’t ever used HSL to define colors in my stylesheets and wondered whether this was the solution.
on 13 April, 2014
Most grids and front-end frameworks I've seen insist on floats for all layouting. But sometimes, you don't want floats... You may occasionally be better off with inline-block, rarely display-table, and if your browser support is ideal, flexbox. Let's look at some advantages and disadvantages of popular layouting methods for responsive sites.
on 14 January, 2014
A few days ago, an eureka moment occurred: why not take Ryan Fait’s solution (which is quite elegant, by the way), and add a teeny weeny bit of JS, to get a footer that works for a responsive layout?
on 10 December, 2013
Calc makes CSS very, very pretty. It does the heavy lifting for you. You can mix percentages with pixels or ems, and add, subtract, multiply and divide. So why is calc an at-risk feature? Let's take a look at some real-world use cases for calc.
on 15 October, 2013
I’ve been playing with flexbox for a while. I love it. It’s going to save so many kittens. This is going to be the first of a series of demos of what flexbox is capable of.
on 30 August, 2013
This articles covers 3 use cases where inline-block layouting forms a good solution. Fluid image grids, horizontally centered menus and borders on elements are discussed.
on 9 August, 2013
on 23 June, 2013
When a client calls up and asks to increase the icon size by 20% or tweak colour values and shadows, it’s a breeze to make changes in the stylesheet directly. I've made a demo with 16 different ways you can creatively use font icons in your next project.
on 16 June, 2013
It’s somewhere in-between inline and block. And it’s often precisely what you need.
When nothing else can cut it, display: inline-block does the job.
Of course, it doesn’t come without its share of quirks. Let’s tackle the eccentricities a little down the road…
on 10 June, 2013
This is about a situation where you need to insert a linebreak between successive inline elements. A bit of white-space manipulation and generated content saves the day via pure CSS.
on 1 May, 2013
Multiple views are a useful UI feature to allow users to choose how they wish to browse content on a web application. The most common views are thumbnail, detail and list views. The icons for the same are pretty straightforward. Of course, in the spirit of resolution independence, I was dead against using raster graphics, so PNG and JPG file formats went out of the window.
on 14 January, 2013
If you’re using CSS3 properties for graceful degradation, it’s probably fine to drop vendor-prefix support for certain properties. It’s best to educate clients about future maintenance woes and why it’s absolutely fine if Firefox 3.6 users will see square corners and no shadows, as long as you’re not breaking the site's layout.
on 1 January, 2013
Clean up your CSS at the source. Write appropriate classes and group selectors well. Let go of unnecessary vendor prefixes for certain properties. It's ok to use IDs when they're needed for the sweet specificity they proffer. Utilise the power of CSS selectors like nth-of-type, nth-child, siblings and attribute selectors.
on 22 December, 2012
Yesterday, the world did not end. So, today is "Be kind to front-end web developers day". Today, we pretend that Bugs, Internet Explorer 8 and below, Retina Devices and low bandwidth DO NOT EXIST. We pretend that older browsers look like shit on your Web 3.0 site.
on 26 November, 2012
There's a new wave of CSS madness, ushered in by the recent additions to the W3 Filters Specification. An important issue that keeps coming up is the new drop-shadow filter and whether it serves a purpose. We already have the wonderful box-shadow property that allows one to specify a horizontal offset, vertical offset, optional blur radius and optional spread radius. So why another drop-shadow option?
on 24 November, 2012
With CSS filters, you can manipulate your images within your code itself, which makes for interesting possibilities, especially while using transitions or animations. You can blur images, convert them to black-n-white, boost saturation or brightness and more, with just a line of CSS.
on 12 September, 2012
on 5 September, 2012
Here's a simple CSS solution to create those lovely embossed effects on lines and text in your content. I've cooked up a quick demo on a subtle grey background image.
on 15 August, 2012
I needed a blog. I needed it bad. This was my way of giving back to the incredible online web development community and its benevolence. (I still owe a few coders some beers…)
…to write delightful CSS tutorials and invest in the pool of great CSS snippets online.
…to document my forays into all things ecological, spectacular and green.
…share a few recipes with greedy little muffins like me.
…amongst other things…