Today's tutorial is going to be an easy one, but one that might change the way you do loading animations. I have seen many times people use SVG's and icon fonts to create an animated loading icon. This is all fine and good, but there is an easier way. A way with pure css.
More and more the distinction between native app and web app are blurring. One of the design techniques that came into being from native apps is the off canvas menu. This technique has made its way over to web apps. But for whatever reason, it is somewhat confusing to understand to the front end developer. We are used to seeing and interacting with things that we can see on the screen at that time. In this tutorial I hope to give you a good base on how to create an off canvas menu and how to animated it using CSS and jQuery.
The world of a front end developer is an ever changing one. New tools come out seemingly every day. So when I heard about this tool called Grunt, I went to go check out it's home page to learn what it was and how it could help me out. As soon as I saw that it used the commandline, it scared me away. With a background in design, the commandline was foreign to me. And quite frankly I didn't like it. Little bit later I bit the bullet and learned Grunt. And boy is it awesome. In this multi-part tutorial I hope to explain what Grunt is, why to use it, and how to install it and set it up in the most painless way possible.