corenominal

Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: web design

Practical CSS Grid: Adding Grid to an Existing Design image/svg+xml

Understanding and using Grid is easier than you might expect. The day Grid support shipped in Firefox 52, I decided on the spur of the moment to convert the basic layout of my personal site to use Grid. And it was a fairly simple process—five minutes to write the grid styles, then 15-20 spent troubleshooting.

It’s good to read a practical guide where CSS Grid has been applied to a real-world site. I hope we get to read more of these in the future.

Stack Motion Hover Effects image/svg+xml

The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion. We are using the JavaScript library anime.js for the animations.

I really like these effects, I think they look proper classy.

No Share Buttons on Mobile Sites (Except This One Weird Case) image/svg+xml

Only 2 out of every 1000 mobile web users ever tap a custom share button. Don’t even bother including them in mobile sites except when users are coming from a social network.

I can’t think that I’ve ever clicked on a website’s social media share button, mobile or not, but I normally include them for my client’s sites as standard. To be honest, I’ll probably continue to do so as it’s something that client’s expect and I’ve got better things to do than debate their effectiveness. That said, it’s always good to have some statistics to refer back to.

Using CSS Transitions on Auto Dimensions image/svg+xml

We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set transition: height 0.2s ease-out. You’ve created a collapsed CSS class that applies height: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if transition had never been set.

This helpful post came too late for me, I was there yesterday and I wasted a good few minutes trying to get my head around this frustrating feature. Just think, I could have used that wasted time to do something proper useful, like making another cup of coffee.