Simple Introduction to JADE
Posted By : Saloni Arora | 25-Sep-2018
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.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Saloni Arora
Saloni Arora is a very positive person she always likes to take things positively. she has a desire of being a talented Front end developer . and she is seeking to grab more opportunities in future