Front-end toolkit
Front-end – the tools of my trade
Ben, our front-end designer and (very thorough) quality analyst & tester, has put together a little list of the tools that he regularly uses. As there are so many tools available there’s not enough time to try all of them out, it’s always handy to have a little insight to the tools that others are using and their thoughts on the matter! So here is his front-end toolkit:
Grunt
Why should I refresh the page myself when I’ve got an angry boar that will do it for me?!
After getting used to Grunt working on projects without it seems like a chore, it seems like there’s nothing it can’t help me with. A few examples of what I use it for:
- Linting my SCSS and JS
- Watching for changes and running tasks
- Compiling SCSS
- Minifying CSS and JS
- Refreshing my browser after a compile
- Optimising images
- Clearing my build directories, ensuring a clean build
Sass / libSass
Surely I don’t need to explain why I use Sass, it’s CSS with everything improved. Mixins and functions are a lifesaver. Just be careful with the nesting!
I tend to use LibSass on most of my projects due to its lightening speed, it is usually slightly behind Sass with the odd feature so you do need to keep an eye on that. For example it took a while for Maps to be implemented in libSass.
Bourbon
Bourbon is my answer to Compass, it saves me so much time with it’s mixins but has an extremely small performance hit. ‘gem install bourbon’ followed by @import ‚’bourbon/bourbon’ and you’re done.
Jeet – grid system
I use Jeet on most my projects, I’ve tried many grid systems and Jeet ticks all my boxes. It’s semantic, easy to customise and very powerful.
GitHub
Managing code/websites without GitHub would be a pain, being able to see previous changes and create feature branches is so useful. There are alternatives such as BitBucket but GitHub is near perfect for me so I’ve had no reason to try something else.
So this is my front-end toolkit, I hope it helps to see what I regularly work with. I have tried many others but this is what I find works well for me daily. It would be great to hear if you use something that hasn’t yet made it to my kit.
