Localhost template is based on Bootstrap Framework, It is the most popular HTML,
CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap
A template is a common layout that every page in your design shares. It's possible to have multiple templates, but generally you'll only need one, and a page can only use one template. In the prototyping template, the default layout is found under src/layouts/default.html .
Here's what a basic template might look like:
In the middle of the HTML is a bit of Nunjucks code: { % block content % }{ % endblock % } . This is where the pages you write are injected when Nunjucks runs, giving you a series of complete HTML files at the end.
The pages make up the guts of your layouts. These files will just have the middle section of the design, since the layout already covers the top and bottom. The prototyping template includes one blank page to get you started, under src/pages/index.html .
A basic page might look like this:
Note that there's no or
tags, and no header or footer.
This code will be injected into the
{ % block content % }{ % endblock % }
declaration when Nunjucks assembles your pages.
In the prototyping template, these finished files are compiled into a standalone
folder called
Partials are a feature of Handlebars which allow you to inject HTML anywhere in a page or layout. They're really useful when you need to repeat certain chunks of code throughout your pages, or to keep individual files from getting too cluttered with HTML.
Here's an example of a layout file that divides its key sections into partials:
The { % include "partials/..." % } syntax tells Nunjucks to look for an HTML file with that name, and inject it at that place. In this example, we have files called preloader.html , header.html , and footer.html . In the prototyping template, these files all exist within src/partials.
A variable looks up a value from the template context. If you wanted to simply display a variable, you would do:
This looks up username from the context and displays it. Variable names can have dots in them which lookup properties, just like javascript. You can also use the square bracket syntax.
These two forms to the exact same thing, just like javascript.
If a value is undefined or null , nothing is displayed. The same behavior occurs when referencing undefined or null objects. The following all output nothing if foo is undefined:
Template inheritance is a way to make it easy to reuse templates. When writing a template, you can define "blocks" that child templates can override. The inheritance chain can be as long as you like.
If we have a template parent.html that looks like this:
And we render this template:
The output would be:
if tests a condition and lets you selectively display content. It behaves exactly as javascript's if behaves.
If variable is defined and evaluates to true, "It is true" will be displayed. Otherwise, nothing will be.
You can specify alternate conditions with elif (or elseif , which is simply an alias of elif ) and else :
You can specify multiple conditions with and and or :
set lets you create/modify a variable.
If username was initially "james', this would print "james joe".
extends is used to specify template inheritance. The specified template is used as a base template
block defines a section on the template and identifies it with a name. This is used by template inheritance. Base templates can specify blocks and child templates can override them with new content
include pulls in other templates in place. It's useful when you need to share smaller chunks across several templates that already inherit other templates.