My Fascination with Codepen.


When I find myself with some down time browsing I often find myself on big builds which use Jade HTML, which fascinate me, now, I’ve never used Jade html, so I was very curious to see what it was good for, and whether I could apply to my work, I spent time researching how Jade is built and the best methods for approaching Jade. The next challenge for me was come up with a small-ish project to attune myself with it.

I took a long hard look at myself as to what I could take on as my first Jade build, and then it hit me, I’ll do myself!

So I set out on Codepen, made a new pen, changed the HTML Preprocessor to Jade and the CSS to SCSS and made a start…





Starting off the HTML like this to work my way down was just awesome, Jade sped up the process of HTML and it flows nicely with the nesting of child classes. Coupled with SASS very early on I could see that the 2 work very well together, you could just copy the html into your SASS file and integrate SASS so easily, if that’s how you would like to approach Jade and SASS/










Where I was doing the facial features, Jade also really came through for me because I could type .left-eye and it’ll print the left eye on the face, the tidiness of Jade never seemed to amaze me, it just seemed so easy to write the class in html like you would with CSS.

Please do checkout my Codepen linked below, it is a simple build with Jade but it was a good way to start to get my head around it…

(Still a working progress – Thinking of some animations potentially)

After this I was curious to go deeper into what Jade does with the more standard common HTML mark-up, I was wandering what it did with data attributes more specifically…

So I did some research and this is what I found...



<a href=”/about-us/” class=”btn round blue-BG white”>About Us</a>

<a href=”/sign-out/” data-method=”signout” class=”btn round blue-BG white btn-xs”>Sign out</a>


Jade equivalent:’about-us’) About Us’sign-out’ data-method=‘signout’) Sign out


This I like, providing a list of classes, then the data attributes you want applied to it and finally the text you want displaying is so clean, but you can draw up your own opinion on Jade when/if you decide to use it.

After doing some research into other people’s opinions on Jade the most common issue I find is that there is performance overhang, and generally people complaining that there’s another thing to try and wrap your head around...

For me so far, I like Jade but I will try and get my teeth stuck in to bigger projects with Jade to see the capabilities of this Preprocessor one day… Another blog on the cards perhaps…

We Shall See, but for Now…






Ben Davies Thumbnail
Ben Davies
front end Developer
Ben started his career in 2013 as a full stack developer but has since specialised in client-side development.
Ben Davies Thumbnail

Ben Davies

07 Dec 2016 - 5 minute read
share this

stay in the know, stay ahead.

Get the latest from the agency, including news, events and expert content.
explore services in the article
find out what we can do for you
read some of our case studies