Eiche fam

I’ve been working on JavaScript-less tooltips for a while now. It started as a test, to see if it could be done. This demo was created back in 2012, and it’s actually one of my most popular pens on CodePen.

I ended up rewriting a portion of it as part of a Bootstrap project, where I couldn’t use their included JavaScript tooltip plugin. The rewrite of the pen included broader markup support (it works on anything that has pseudo-elements).

I wrote the first pen in plain ol’ CSS, since that was all I was familiar with. The second was written in Sass (SCSS syntax). Before I started building this project (which takes most of its code from the second pen), I decided to try some new things.

First, I’d use Gulp instead of Grunt as my task runner. I had no particular reason; I’m vastly more familiar with Grunt, and despite Gulp’s speed improvements, I have no real desire to switch. Still, it’s my opinion that as a full stack developer, I should try to be as familiar as possible with as many tools as possible. So Gulp it was.

Second, instead of Sass, I decided to try CSSNext. Again, I’d heard of it but never used it. As far as preprocessors go (or post-processors for that matter, like Autoprefixer), there really wasn’t much I needed to worry about. I wanted the final build of the project to use variables, and that was no problem. CSS variables are coming soon (soonest to Chrome, and hopefully other evergreen browsers will follow suit), and I like the idea of writing future-proof CSS. CSSNext is a plugin for PostCSS, like Autoprefixer (which I’ve been using for some time), so integrating it was pretty easy.

Actually, everything in the project’s build process that interacts with the CSS is a PostCSS plugin. Autoprefixer actually comes bundled with CSSNext, so that’s an additional package I didn’t even need to worry about. Stylelint, the CSS linter, and CSSNano, which compresses the stylesheet, are both PostCSS plugins. I can’t wait to try this build process on a larger project, where I’m sure to see the benefit of PostCSS’s fast parser and Gulp’s speed over Grunt.