September 5, 2022
Almost four decades of work have been condensed and archived online in Kiyomi Talaulicar's site. Her body of art is layered, evocative and rich in silence. Paradoxically, it transcends the mundane through the use of mundane objects against textured backdrops of pattern and shadow.
August 18, 2022
Under1Tree's website takes the user on a journey of beautiful animations that represent a green lifestyle and sustainable living.
The Center for Cultural Power
August 8, 2020
The Center for Cultural Power redesigned their website in 2019, achieving a vibrant, high-contrast look. Bold imagery, gradient blocks of colour, eyecatching artwork and authentic stories provide a compelling narrative of social change through culture.
Inchin Closer Mobile App
June 20, 2020
Inchin Closer's app provides a series of interactive stories, audio-based hints and analytics of progress to help users master the word's hardest language - Mandarin.
June 10, 2020
Line drawings, minimalism and elegance define the Space Archive website, mirroring the nature of the business - curating high-end properties and villas in Goa and the Himalayas.
January 7, 2020
Replicating Preprocessor Color Functions with Plain Old CSS
July 17, 2019
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.
February 23, 2019
With an accent colour of watermelon pink and triangle motifs across the site, Favianna.com is a juicy rainbow of colour that spans themes ranging from social justice to ecology. The site retains a minimal look to highlight her work across decades of diverse disciplines.
Diligent Financial Planning
September 26, 2018
Diligent Financial Planning overhauled their Wordpress site and rebranded it with a clean look, curated content and elegant animations on scroll.
Front-end Setup with Ubuntu 18
May 12, 2018
A hard disk failure forced me to undertake the painful task of re-installing all my projects and underlying softwares on Ubuntu 18.04. I've documented a basic list of packages that a front-end designer or developer requires to be productive nowadays.
April 4, 2018
In 2018, the MHI site was transformed into a crisp, accessible black-and-white interface using illustrations and infographics to condense the organisation's mission and purpose.
February 2, 2018
The Up & Go website reflects the values of its brand - clean living, a worker-owned cooperative and fair work practices.
Text Inputs with Icon and Decorative Line
August 1, 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.
Variables: The Backbone Of CSS Architecture
January 16, 2016
When I'm handed an existing project, the first thing I look at is the variables file for CSS. Well-defined variables set a great foundation for a project of any size.
Published in Smashing Magazine, Jan, 2016.
Pluralsight Course: Responsive Web Design in the Browser
January 16, 2016
My course on Pluralsight focuses on Responsive Web Design 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.
Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box
July 20, 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.
Karnataka Learning Partnership
July 4, 2015
The KLP website had become a nightmare to maintain. A living style guide and rewrite of the existing CSS framework fixed the underlying issues.
Styling SVGs inside Image Tags
March 24, 2015
You know the trade-off. Use the img tag to display an SVG, and you get clean markup but at the cost of styling the SVG.
Harnessing Flexbox for Today’s Web Apps
March 6, 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.
IE Bug: Keyframe Animations Inside a Media Query Block
December 26, 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.
December 18, 2014
The CoLab redesign has immersive, fullscreen backgrounds, lucid content and subtle animations, including smooth image pixelations on scroll.
Another Pure CSS Checkbox Article
November 1, 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
October 13, 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
October 11, 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
June 18, 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.