Flexbox Cheatsheet

While I am no stranger to the magic of Flexbox, I find that I am not using it very often just yet. As a result I end up pausing and referring back to this post at CSS-Tricks whenever an opportunity to utilize its powers presents itself.

I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a cheatsheet…based on cheatsheets.

Anyway, I thought I would share it just in case others may find such a resource beneficial as well. You can also take a look at the demo I used over at CodePen to practice/tinker your flexible heart out.

If you would prefer to have this guy as a PDF you can grab that here.

source

Advanced SVG, CSS, JavaScript Techniques – Smashing Magazine Newsletter

It’s quite remarkable how far we’ve come in front-end over the past few years. What seemed to be quite difficult in the past, can now be solved so easily today (think about responsive image maps, for example). Every other day, there are new techniques that come up — shared and explained publicly — and that is amazing.

Advanced SVG, CSS, JavaScript Techniques

So what about Masking SVG animations using clip-path? Or perhaps using background-clip for transparent borders? Or perhaps cross-browser custom-styled select menuscreating CSS hexagons with transform and calc()using smart radio buttons? Just a few techniques for your toolbox to have nice, scalable, and fast solutions ready for your next project. Handy! (vf)