TAG: tutorials

Learning by doing one (mini) project at a time

Navigation

Create an off canvas navigation menu with CSS

Popularized by apps like Facebook on mobile, the off canvas menu allows to save valuable real screen estate by toggling the navigation into view only when needed. We will dive and explore one way of achieving the effect using some overlooked CSS properties. View Demo Download Source View On Github Click on the starter.html file and save it on your computer. The finish.html is also there for your reference. If you are more the…

Designing Your Own Masonry Grid Layout From Scratch

I was fascinated by the masonry layout made popular by Desandro famous jQuery plugin the moment I saw it. Beyond the fascination I was intrigued at how was it done, what was going on under the hood? It's no hazard that the first official post of this hacker blog takes a deep dive in creating our very own version of it. View Demo Download Source Code View On Github Goals and Challenges First let's outline some…