I took a slight break from regular programming to work on updating a theme I wrote for the Hugo Static Site Generator a few years back. In the process, upgraded some of my skill sets and knowledge surrounding front-end web development. I had initially used Sass, Compass, and Susy to help with a bit of the responsive design and speeding up the development process. As I was looking to initially use the same things, discovered Compass had been more or less abandoned. This pushed me to look into what people use these days for web development.
Soon enough I ran across PostCSS and had to wrap my head around that. Found a really great tutorial on that and using Gulp from LevelUp Tutorials. I had avoided a lot of the workflow tools for a long time, but now I just don’t know how I can do a lot of things without Gulp’s help. Makes automating watching source code files and compiling them into css or other formats so much easier. It’s also a big way in how you get all the many plugins the PostCSS has to offer to run. I can easily switch off plugins like a CSS minifier so I can check against the CSS to verify things changed correctly or if I think a plugin is breaking something.
Some of the cool PostCSS plugins I ended up using were Font Magician, Rucksack, and Lost Grid. So I just have to reference the font and it will pull it from google fonts or elsewhere and fill in all the needed stuff in the CSS. I also now have responsive font sizes using Rucksack, along with a pretty decent grid system using Lost Grid.
If you want to check out my theme on github, it is here: Dark Simplicity. The theme gallery for Hugo also has it, but it’s not always up to date from my repo. You can see the overview and preview, here.