Skip to main content

Floats, Inline Block or Display Table? Or Flexbox?

April 13, 2014

Most grids and front-end frameworks insist on floats for layouting. You're occasionally better off with inline-block, rarely display-table, and if your browser support is ideal, flexbox. This article discusses the advantages and disadvantages of various layouting methods.

Continue reading...

Ryan Fait's Sticky Footer (but Responsive)

January 14, 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?

Continue reading...

Why is Calc At-risk?

December 10, 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.

Continue reading...

Equal Heights with Flexbox

October 15, 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.

Continue reading...

The Inline-Block Conundrum – Part 2

August 30, 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.

Continue reading...

All Things are Not Created Equal

August 9, 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.

Continue reading...

Beautiful Icon Font Thumbnails

June 23, 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.

Continue reading...

The Inline-Block Conundrum – Part 1

June 16, 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…

Continue reading...

Linebreaks via CSS Generated Content

June 10, 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.

Continue reading...

Pure CSS Icons for App Views

May 1, 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.

Continue reading...

The Story of a Walk

January 31, 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.

Continue reading...

City Farming Gurus in Mumbai

January 28, 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?”

Continue reading...

Dropping Support for Vendor Prefixes

January 14, 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.

Continue reading...

Code Resolutions for the New Year

January 1, 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.

Continue reading...

Be Kind to Front-end Web Developers Day

December 22, 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.

Continue reading...

Box-shadow v/s Drop-shadow

November 26, 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?

Continue reading...

An Introduction to CSS Filters

November 24, 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.

Continue reading...

Thumbnail Captions on Hover: Pure CSS Transitions

September 12, 2012

Captions on hover are smoother and cooler with a touch of animation. With the power of CSS3, we can create transitions that are hardware accelerated and therefore performance-optimised (or way faster!) than anything you can cook up with JavaScript.

Continue reading...

Embossing that Code

September 5, 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.

Continue reading...

Building a Blog in Two Days

August 15, 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…)

Continue reading...