Published: 07 December 2016

When I find myself with some down time browsing codepen.io 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…

.personal-space

  .aura

    .body

 

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/

 

.hair

        .fringe

      .head

        .left-brow

        .left-eye

        .right-brow

        .right-eye

 

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…

http://codepen.io/BenSagiStuff/pen/qqdgoj

(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...

 

HTML:

<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:

a.btn.round.blue-BG.white(href=’about-us’) About Us

a.btn.round.blue-BG.white.btn-xs(href=’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…

.peace

       .out

 

 

 

Ben Davies

Client-Side Developer

READ MORE FROM BEN DAVIES

Page Name: {% PageName %}

Page Template: {% PageTemplate %}

CampaignID: {% AgentReferrer.ID %}

CampaignName: {% AgentReferrer.Name %}

CampaignPhone: {% AgentReferrer.Phone %}

Item Location: {% PageLocation %}

Search Session Exists: False