-
Book Overview & Buying
-
Table Of Contents
HTML5 Data and Services Cookbook
Similar to partial templates in other template languages, Jade mixins are smaller template pieces that can accept parameters. Mixins are useful when generating common HTML chunks such as alert boxes, dialogs, and menus.
In this recipe we're going to compare Jade's mixins with the partial templates found in the other template languages by reimplementing the threaded conversation template. This is a recursive template that renders a threaded conversation tree.
We need to download jade.min.js in our recipe folder, available at https://github.com/visionmedia/jade.
Let's get started.
Create index.html which will contain the conversation placeholder, the main conversation template, and the recursive partial thread template:
<!DOCTYPE HTML> <html> <head> <title>Mixins in Jade</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="list" class="conversation"> </div...
Change the font size
Change margin width
Change background colour