Pluralsight Course: Creating a Living Style Guide with Sass and Vanilla JavaScript
on 7 January, 2020
I've published a new course on Pluralsight titled Creating a Living Style Guide with Sass and Vanilla JavaScript. Using a real-world example, the course will guide you on thinking modularly about design and development by creating globals and components that are flexible and extensible.
Replicating preprocessor color functions with plain old CSS
on 17 July, 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.
Front-end setup with Ubuntu 18
on 12 May, 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.
Text inputs with icon and decorative line
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.
Variables: The Backbone Of CSS Architecture
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.
Pluralsight Course: Responsive web design in the browser
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.
Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box
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.
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.
Published in Smashing Magazine, March 2015.
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.
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.
