cube_min

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. I thought I should do something to fix this problem, so this article was born. It’s going to show you the most efficient path towards building a CSS cube that’s possible today, while also explaining what common, but less than ideal cube coding patterns you should steer clear of. So let’s get started! HTML structure The HTML structure is the following: a .cube element with .cube__face children (6 of them). We’re… Read More

Continue Reading

The Issue with Preprocessing CSS Custom Properties

CSS has Custom Properties now. We’ve written about them a bunch lately. Browser support is good, but of course, old non-evergreen browsers like Internet Explorer don’t have them and never will. I can see the appeal of authoring with “future CSS”, and letting a preprocessor backport it to CSS that is compatible with older browsers. Babel for CSS! Why not?! It makes me nervous though – because it’s only some use cases of Custom Properties that you can preprocess. There are plenty of situations where what you are doing with a Custom Property just isn’t possible to preprocesses. So if you do, you’re putting yourself in a pretty weird situation.… Read More

Continue Reading