Friday Frontend: Beautiful CSS edition
Happy December! Month of elves, family, presents, nonstop department store music, and seasonal depression. Hopefully more of the first three and less of the last two, but in my experience you tend to get them all.
This week’s Friday Frontend has an extra helping of beautiful CSS. I’ve seen a lot of CSS, so it isn’t often that someone blows me away, but the article on building wireframes on top of existing sites with CSS just knocked me over, and the codepen animation examples is simply gorgeous.
KBall from ZenDev
CSS & SCSS
Simple, to the point, and gets you from nothing about CSS grid to understanding the basics of templated columns and rows. I know I harp on this a lot, but if you’re still struggling with using CSS grid, maybe check this out.
Wow. As someone who frequently advocates using HTML & CSS for wireframing, you wouldn’t think this would impress me as much as it did, but boy did it. This shows how you can take an existing page and add literal wireframe boxes with labels etc on them using CSS. So cool!
This post does something that I don’t see enough of - walk through not only how CSS works, but the thought process involved in translating from a design to the CSS that implements it. Highly highly recommend.
Great walkthrough of how to set up keyframe animations using CSS. As excited as I am about the new web animations API, keyframe animations are still the core of most of the animating I end up doing.
I typically link more to articles than pure examples, but this was too cool not to share. After reading the above article on animation, check out this example of a wicked-cool checkbox animation built with SVG and CSS.
The ability to import modules based on logic at runtime rather than statically is HUGE. It not only lets you defer expensive code loads that are not commonly needed, but has been key for me recently when including some “client side only” code into an app that does both server-side and client-side rendering.
Given all my work on ZURB Foundation, it’s probably not surprising to hear I’m a big advocate of component libraries. Here’s a great list of available component libraries for those of you working in React.
I’m not ashamed to say I might be turning into a Mozilla fanboy. It’s not a secret that tooling for front-end web developers has lagged behind server-side tooling, but the arms race between Chrome and Firefox on developer tools promises to change that. So much good stuff!
I hadn’t seen it broken down this way before, but this definitely matches what I’ve seen. A great breakdown of 2 fundamentally different approaches to technical interviews, and how to go about preparing for them.
A strong argument that with the rise of CSS Grid, we will be able to shed a number of current “defensive” design approaches and bring truly great graphic design to far more of the web.
Data visualization is hard, but the capabilities and tools we have available to us now to create stunningly awesome data visualizations are just mind-blowing. Check out this great talk & related slides on creating some visually stunning data visualizations.
The beautiful and terrifying thing about building an application for the web is that it’s “out there” in the world where anyone can get to it. Terrifying, because that also means anyone can try to hack it. Learning some common ways that applications can be hacked and how to avoid them is therefor KEY. This article does a nice job of letting you know about some of the most common without getting too hairy or overwhelming.