Blog

  • Simple Introduction to JADE

    Posted by Saloni Arora | Last Updated: 15-Jan-19

    An introduction to jade CSS
     
     
    Jade is basically meant for Sever side templating in NodeJs. It helps in writing markup language in a very different way and also it has a lot of new features as compared to HTML.
     
    Some point of difference in the jade are:
     
    1) In normal HTML we used to write like this.
    eg:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    <div>
    <h1> Welcome to our page. </h1>
    
    <p>Now we will see the latest technologies.</p>
    
    <ul>
    <li> Html </li>
    <li> Html </li>
    </ul>
    </div>
    
     
     
    In jade we write the same content like this:
    eg:

    1
    2
    3
    4
    5
    6
    7
    8
    div
    h1 Welcome to our page. 
    
    p Now we will see the latest technologies.
    
    ul
                li  Html 
    li      Html 
    
     
     
    The major features of Jade are:
     
    a)Simple Tags.
     
    b)Adding attributes to the tags.
     
    c)Blocks of text.
     
     SIMPLE TAGS:     As we already noticed that there are no closing tags in jade. It simply uses indentation and it observes on the basis of the nested way of the tags. 
     
    How the tags are nested is the only way of knowing which tag comes inside which tag.
    eg:

    1
    2
    3
    4
    5
    div
    
    h1 Welcome!
    
    h2 To this Blog
    
     
    So the indentation of this above text tells us that the h1 and h2 are inside this div. Jade treats the first word of the line as a tag. While the words written next to it will be treated as the text inside the tag.
     
    ATTRIBUTES:
     
    Now it is the major concern that how can we add attributes to the tags.
     

    1
    2
    3
    4
    5
    6
    7
    div(class="background-class", id="welcome 11")
      h1(class="heading") welcome's 11
      img(src="/img/welcomes-11.png", class="img-class")
      ul(class="courses-list")
        li HTML
    
         li CSS
    
     
    jade also provides the shorthand for classes and ids.
     
    div.background-class
     
    h1.heading
     
    We can easily spot the classes as jade provides to write them in normal CSS selector form.
     
    BLOCK OF TEXT :  In Jade, we can write Various blocks. 
     

    1
    2
    3
    div 
          p Welcome.
    this is a new plan.and we are working on it.
    
     
     
    In the above example, we can see That the (full stop) ends. It does not see the first word of the line is not a tag. It will print it as a block of text.
     
    Hope it helps in understanding the jade.
     
     
     
     

Tags: html5

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com