Styling SVGs inside image tags

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.

Harnessing flexbox for today’s web apps

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.

IE bug: keyframe animations inside a media query block

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.

Another Pure CSS Checkbox Article

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.

Your font has too many faces and woff not

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?

The flyover and the farm

on 11 October, 2014

Once you reach the summit of the aged Mohamedi Manzil building, you spend a few moments trying to make sense of this big, fat terrace farm in the middle of this big, fat street.

Slanted buttons with 3 lines of CSS

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.

Replicating preprocessor color functions with plain old CSS

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.

Floats, Inline Block or Display Table? Or Flexbox?

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.

Ryan Fait's sticky footer, but responsive

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?

Why is calc at-risk?

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.

Equal Heights with Flexbox

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.

The Inline-Block Conundrum – Part 2

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.

All things are not created equal

on 9 August, 2013

The Equal Height Problem never ends! It gets even worse with responsive layouts. After witnessing and attempting the mindboggling solutions out there, I was convinced that Javascript was the saviour... until I revisited the situation recently. Here's a pure CSS solution.

Beautiful Icon Font Thumbnails

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.

The Inline-Block Conundrum – Part 1

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…

Linebreaks via CSS Generated Content

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.

Pure CSS icons for app views

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.

the story of a walk

on 31 January, 2013

at low tide, the rocks create little tide pools in the ocean.. as pretty as the wading pools in the grass today. as you've probably figured, the sitout's a great place for scenic-scapes - tide pools in front of you, wading pools behind! flocks of gulls perch at the line of water unruffled.. to their right is the Afghan church, its steeple like a spinal cord arching for the sun.. there's plenty of pink in the background.. most likely fall colours of the Indian almond tree.

City Farming Gurus in Mumbai

on 28 January, 2013

City farming can greatly reduce the burden of kitchen waste through compost. Greater Mumbai generates about 6000 tonnes of garbage per day, of which only 3-4% is composted. As our landfills choke with filth, one wonders, “Why not compost biodegradable garbage at a local level, rather than burdening the civic system?”