A Front-end design workflow (Jul 2016)
It’s been quite a while since I started coding HTML+CSS designs from PSD/Ai/Sketch files. I started using plain CSS files, then Less, started using the awesome CodeKit, then Bash scripts, then Sass, tried Bourbon, tried Neat, learnt Gulp, npm, etc.
I wanted to share what works for me today. I mean, CodeKit still works great and I love it, just like Less or plain old CSS. But this config is what really helps me be more productive.
Sass
The first thing that works great for me is Sass. I certainly don’t use -know even- know half of its features, but just being able to import, use variables, nesting, mixins, etc. makes me more productive than plain CSS.
On a sidenote, I moved from Less to Sass basically because of the command line utility to watch changes and compile automatically, using sass --watch. That also changed a bit afterwards.
HTML5 Boilerplate
This is pretty standard nowadays. I almost always steal the basic HTML from the HTML5 Boilerplate.
npm
I started using Bower, I love it and it works great. However, now I use some tools to compile Sass, prefix or concat that are stored in npm. So, I don’t want to be using two package managers if I can use just one.
Autoprefixer
This one is pretty straightforward. As per their docs: “just forget about vendor prefixes and write normal CSS according to the latest W3C specs”.
Browsersync
This has been the latest tech I’ve incorporated into the workflow and now I love it. It lets you reload multiple browsers when it detects a file change, remote debug, among many things.
Gulp – Putting it all together
At this time you may wonder how to put this all together. The answer is Gulp. In this setup, Gulp compiles Sass files, autoprefixes them, outputs them in a separate folder. On the fly, as you change Sass files. Also, it provides a small server, watches for changes in other files, and reloads the browser on all connected devices.
Here’s how a Gulpfile looks like:
To start the server, you have to run $ gulp and a browser window pops up pointing to localhost:3000 or similar.
Extras
SVG Injector
This little tool lets you inline SVG automatically on the HTML when an image tag src attribute points to an SVG file.