Baking Bootstrap Snippets with Jade



Arguably the greatest strength of Twitter’s ever popular Bootstrap framework is that it gives you a complete set of fully functional CSS and JavaScript out of the box.
This pre-done code provides just about everything you could want in a site, from typography to layout control to dozens of “components” such as navbars, buttons, panels, alert boxes and more.
Because you’ll spend little to no time writing CSS and JavaScript for a Bootstrap site, development becomes almost entirely about producing HTML. As such, if you can find ways to make your HTML production as fast and smooth as possible, your entire Bootstrap workflow can become incredibly efficient.
Making HTML Even More Powerful
One of the most effective tools you can use to power up your HTML production is Jade, an open source templating language that is totally free to use.
Jade may go under the banner of “templating language” but don’t let that make you think you need to be working with “templates” to tap into its benefits. It also works in two additional ways that can be extremely useful for all kinds of HTML production:
- As an HTML shorthand tool that will allow you to dramatically reduce the amount of code you need to write.
- As a “preprocessor” for HTML that works much like CSS preprocessors, adding the ability to use logic and create “mixins”: reusable blocks of code that keep your workflow DRY.
If you use HTML at all, and especially if you are heavily focused on HTML as you are when using Bootstrap, you might find that once you try Jade you’ll never build another project without it.
Jade Powered Bootstrap Snippets
In this tutorial we’re going to use Jade to generate some of the most prominent components of the Bootstrap framework.
Raw HTML to Jade
For each component we’ll first look at the raw HTML required and then boil it down into Jade code. You’ll get to directly compare the two, see the reduction in the required amount of code, and the new compact and clean formatting style of Jade.
Please note we’ll be focusing on the Jade snippets themselves, rather than going through how Jade itself works. That said, the main thing to be aware of in the code examples you’ll see below is that every level of tab indentation in Jade creates a level of element nesting in the resulting HTML.
For example the following indentation in Jade:
main div p
would compile to give the following nesting in HTML:
<main> <div> <p></p> </div> </main>
To learn more about how Jade works check out the free introductory lessons of my recent course Top-Speed HTML Development With Jade.
Jade Mixins
Jade mixins are reusable blocks of code. If you have some code you know you’ll need to place repeatedly you can define it under a mixin. Then every time you use that mixin it will output the code for you automatically.
For example, the following mixin named “article”:
mixin article(title) .article .article-wrapper h1= title block
could be used repeatedly in a document like this:
+article('Hello world') p This is my p Amazing article +article('Another article') p I just used a mixin p instead of retyping code
and would compile into this HTML:
<div class="article"> <div class="article-wrapper"> <h1>Hello world</h1> <p>This is my</p> <p>Amazing article</p> </div> </div> <div class="article"> <div class="article-wrapper"> <h1>Another article</h1> <p>I just used a mixin</p> <p>instead of retyping code</p> </div> </div>
After converting our Bootstrap components from raw HTML into Jade we’ll boil them down even further into Jade mixins. We won’t use mixins for absolutely everything, just wherever using them will save a significant amount of time, effort and code duplication.
Additionally, even when we do use mixins we’ll still include examples of the straight Jade code for the component in question. This way you'll see how the process of going from HTML to Jade to a mixin unfolds.
Getting Setup to Use Jade
The first thing you’ll need to do is get yourself setup to work with Jade. You’ll want a coding environment to work in plus automated compilation of your Jade code into HTML.
Head over to the “Top Speed HTML Development with Jade” course and watch the second lesson in the course, Quick and Easy Setup. It’s free, and will take you through everything you need to know to get setup and ready to use Jade.
For this tutorial, I recommend choosing the method in the video that covers using Sublime Text 3 and Prepros.
Once you’ve finished watching that video and following the steps it lays out you’re ready to begin your Bootstrap project.
Basic Document Creation
You should at this point have a file named “index.jade” ready to be worked with. If there is any code in the file at the moment, please delete it so it’s completely blank.
We’re going to start by creating the basics of your Bootstrap project’s main HTML document, adding the essential tags and loading in the required Bootstrap CSS & JavaScript files plus jQuery.
We’ll be taking advantage of the Bootstrap CDN and Google APIs to load in each of these required files to save you having to download them:
As mentioned above, the HTML for each element we create will be shown, but it’s there purely for demonstration purposes, so you can compare it to its Jade counterpart.
You don’t need to use any of the raw HTML code you see in any way. Rather, you can focus on the Jade sections marked Convert to Jade and Add _____ Mixins.
The Raw HTML
The following code sets up the page’s basic doctype
, html
, head
, title
, meta
and body
elements. Additionally, it loads in Bootstrap’s CSS & JavaScript files plus jQuery, and creates a div
element with the class .container
applied to it that all the components we create will be placed inside.
<!DOCTYPE html> <html lang="en"> <head> <title>Baking Bootstrap Snippets with Jade</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Baking Bootstrap Snippets with Jade"> <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css" rel="stylesheet"> </head> <body style="padding-bottom:10rem;"> <div class="container"></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> </body> </html>
Convert to Jade
Below, we have the Jade equivalent of the raw HTML you saw in the above section. Copy and paste this code into your “index.jade” file and save it.
doctype html( lang="en" ) head title Baking Bootstrap Snippets with Jade meta( charset='utf-8' ) meta( http-equiv='X-UA-Compatible', content='IE=edge' ) meta( name='viewport', content='width=device-width, initial-scale=1.0' ) meta( name='description', content='Baking Bootstrap Snippets with Jade' ) //- Bootswatch Theme link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") body(style="padding-bottom:10rem;") .container script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' ) script( src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js' )
After compilation has completed (automatically via Prepros), open up the “index.html” file that has been generated. Inside, you should see an exact match to the raw HTML above.
Though we’re not creating any mixins as part of this stage, what we will do is lay some groundwork for the mixins that will be created later on.
Prepare to Add Mixins
Create a file named “mixins.jade” in the same folder your existing Jade files are housed. All the mixins we create later will be written into this file.
At the top of your “index.jade” file add this line:
include mixins
This line will import your mixins file, making the mixins that will be written within it available to your “index.jade” file.
We’re now ready to move onto adding in Bootstrap components.
Note: All the code for the subsequent Bootstrap components should be added inside the .container
class div.
Navbar Component
The first Bootstrap component we’ll covert to Jade is the navbar component, including its branding section (first item on the bar), top level menu items, a dropdown menu containing a divider and dropdown header, as well as a toggle switch to expand the menu when it’s in collapsed format at smaller width displays.



The Raw HTML
The raw HTML you’d normally have to use for the navbar component pictured above is:
<nav role="navigation" class="navbar navbar-default"> <div class="navbar-header"> <button type="button" data-toggle="collapse" data-target="#navbar-inverse" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Project name</a> </div> <div id="navbar-inverse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="dropdown-toggle">Dropdown <span class="caret"></span></a> <ul role="menu" class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </nav>
Convert to Jade
Crunched down into Jade format our navbar component looks like this:
nav.navbar.navbar-default( role="navigation" ) .navbar-header button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#navbar-inverse", aria-expanded="false", aria-controls="navbar") span.sr-only Toggle navigation span.icon-bar span.icon-bar span.icon-bar a.navbar-brand(href="#") Project name #navbar-inverse.collapse.navbar-collapse ul.nav.navbar-nav li.active: a( href="#") Home li: a( href="#about" ) About li: a( href="#contact" ) Contact li.dropdown a.dropdown-toggle( href="#", data-toggle="dropdown", role="button", aria-expanded="false" ) Dropdown span.caret ul.dropdown-menu( role="menu" ) li: a( href="#" ) Action li: a( href="#" ) Another action li: a( href="#" ) Something else here li.divider li.dropdown-header Nav header li: a( href="#" ) Separated link li: a( href="#" ) One more separated link
Add Navbar Mixins
Though the Jade version of the navbar component is more concise and easier to look at than raw HTML, we can still make an even bigger improvement by externalizing most of the code into mixins.
Add the following code to your “mixins.jade” file:
//- Navbar mixins mixin nav(name, id, style) - var style = (typeof style === 'undefined') ? "default" : style nav( role="navigation", class=["navbar", "navbar-" + style] ) .navbar-header button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#" + id, aria-expanded="false", aria-controls="navbar") span.sr-only Toggle navigation span.icon-bar span.icon-bar span.icon-bar a.navbar-brand(href="#")= name .collapse.navbar-collapse( id=id ) ul.nav.navbar-nav block mixin nav_item(href, active) li(class=active): a( href=href ) block mixin nav_item_dropdown(href, active) li(class=["dropdown", active]) a.dropdown-toggle( href=href, data-toggle="dropdown", role="button", aria-expanded="false" )= attributes.label span.caret ul.dropdown-menu( role="menu" ) block mixin nav_divider li.divider mixin nav_header li.dropdown-header block //- End navbar mixins
In the above Jade code we’ve created five different mixins:
-
nav
- use this mixin to initialize the navbar component and its parent elements, set its visual style to “default” or “inverse”, and set the text that will appear in the branding section.
-
nav_item
- use this to add individual menu items nested under thenav
mixin -
nav_item_dropdown
- use to place a nav item with a dropdown menu nested inside -
nav_divider
- use to place a divider nested under anav_item_dropdown
menu mixin -
nav_header
- use to place a header inside a dropdown menu, after anav_divider
mixin
That might not make sense right away, but read on to see how these mixins are used in action and all should all become clear.
Use Navbar Mixins
With our navbar mixins ready to go, placing navbar components now becomes a lot simpler.
Place the “nav” mixin
Start by placing the nav
mixin to initialize the overall menu like so:
+nav("Project name", "dropdown_menu")
In between the brackets attached to the nav
mixin you are passing two pieces of information, called arguments, each wrapped in quotation marks. The first sets the text which will appear in the branding section on the nav component. The second sets a unique ID for the nav component.
Once compiled, you should see this when viewing your HTML file in a browser:



Inverse Navbar Color
To change the color of the navbar component from default to inverse add a third argument like so:
+nav("Project name", "dropdown_menu", "inverse")
This will switch out your navbar colors to look like this:



Place Nav Items
Next up, we'll use our nav_item
mixin to add our three top level menu links:
+nav("Project name", "dropdown_menu") +nav_item( "index.html", "active" ) Home +nav_item( "about.html" ) About +nav_item( "contact.html" ) Contact
Note that each instance of nav_item
mixin is tab indented by one more level than the nav
mixin. This sets each nav_item
to be a child of the nav
mixin.
In this case the first argument being passed, e.g. “index.html”, sets the link that will be applied to the menu item. The second (and optional) argument adds an active
class that highlights the menu item.
After compilation your navbar component should now look like this:



Place Nav Item with Dropdown Menu
We can now go ahead and add another menu item with a dropdown menu housed inside, using the nav_item_dropdown
mixin:
+nav("Project name", "dropdown_menu") +nav_item( "index.html", "active" ) Home +nav_item( "about.html" ) About +nav_item( "contact.html" ) Contact +nav_item_dropdown( "#" )( label="Dropdown" )
This adds a new item with an arrow indicating a child menu exists, and the wrapper for the child menu itself:



Place Dropdown Nav Items
Our new dropdown menu doesn’t have any items inside it yet, so here we can again use our nav_item
mixin to add some in.
While we’re at it, we’ll use our nav_divider
mixin to add a dividing line inside the dropdown, and our nav_header
to add some header text right below it.
These additions will complete our navbar component code:
+nav("Project name", "dropdown_menu") +nav_item( "index.html", "active" ) Home +nav_item( "about.html" ) About +nav_item( "contact.html" ) Contact +nav_item_dropdown( "#" )( label="Dropdown") +nav_item( "#" ) Action +nav_item( "#" ) Another action +nav_item( "#" ) Something else here +nav_divider +nav_header Nav header +nav_item( "#" ) Separated link +nav_item( "#" ) One more separated link
This code compiles into a fully functional navbar component in HTML, and looks like this:
Take a quick look back at the original 30 lines of raw HTML for the navbar component and consider how much faster menu building can become (after infinitely reusable mixins are created) when crunched down to 12 short lines of Jade instead.
Grid: Three Column Example
Bootstrap comes with a twelve column grid system built in and a set of associated classes that allow you to determine how many columns wide an element should be at various screen sizes such as medium (md), small (sm), and extra small (xs).
You can read in full detail how this grid system works at http://getbootstrap.com/css/#grid
Pictured below are three panels inside divs that start out 4 columns wide each at “medium” size or larger, collapsing down to six columns each at “small” size, and 12 columns each at “extra small” size.



The Raw HTML
The raw HTML required for these three columns is as follows:
<div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> </div> <div class="col-md-4 col-sm-6 col-xs-12"> </div> <div class="col-md-4 col-sm-6 col-xs-12"> </div> </div>
We start by creating a div with the class row
, then nested inside it are three layout divs that will hold the panels illustrated above.
Each div has the class col-md-4
setting it to be four columns wide at medium size or higher. Next is the class col-sm-6
setting it to be six columns wide at small size, and finally the class col-xs-12
setting it to twelve columns wide at extra small size.
Convert to Jade
In Jade code we can skip all the opening and closing divs and simply directly type out the required classes like so:
.row .col-md-4.col-sm-6.col-xs-12 .col-md-4.col-sm-6.col-xs-12 .col-md-4.col-sm-6.col-xs-12
Panel Component
Now let’s create the panel components you saw pictured in the previous section:



The Raw HTML
The raw HTML for the panel component is actually quite light on compared to the navbar component. We have just three div wrappers, with a total of four classes required to add the correct styling:
<div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.</div> </div>
Convert to Jade
Converting it to Jade makes it a little lighter again:
.panel.panel-default .panel-heading Panel Heading .panel-body We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
Add Panel Mixin
The reason we’re creating a mixin for this component is to save you having to remember all four class names or how each of the required divs should be wrapping one another.
Add the following code to your “mixins.jade” file:
//- Panel mixin mixin panel(heading, style) - var style = (typeof style === 'undefined') ? "default" : style div( class=["panel", "panel-" + style] ) .panel-heading= heading .panel-body block
Use Panel Mixin
To place the panel component now just use the panel
mixin, passing the text you want to use in the heading as an argument. Then, type the content of your panel after the mixin is called, following a space:
+panel("Panel Heading") We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
Bootstrap offers several different styles of panels. To change the panel style to any other, pass the style’s name as a second argument like so:
+panel("Panel Heading", "success")



+panel("Panel Heading", "primary")



Buttons
Next we’ll take a look at creating instances of Bootstrap’s buttons.



As with the panel component of the last section, the raw HTML is already fairly light for buttons, however by creating mixins we remove the need to remember any of the syntax required to use them.
The Raw HTML
<a href="#" class="btn btn-default">Default</a> <a href="link.htm" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-success">Success</a> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-warning">Warning</a> <a href="#" class="btn btn-danger">Danger</a>
Convert to Jade
a.btn.btn-default Default a.btn.btn-primary( href="link.htm" ) Primary a.btn.btn-success Success a.btn.btn-info Info a.btn.btn-warning Warning a.btn.btn-danger Danger
Add Button Mixin
//- Button mixin mixin button(style, href, size) - var style = (typeof style === 'undefined') ? "default" : style - var href = (typeof href === 'undefined') ? "#" : href case size when "large" - size = "btn-lg" when "small" - size = "btn-sm" when "mini" - size = "btn-xs" a( class=["btn", "btn-" + style, size], href=href ) block
As well as determining what style a button will have, this mixin also applies a link and allows the size of the button to be changed.
Use Button Mixin
In its simplest form, this button
mixin can be used like so, with the text to appear on the button placed after the mixin, following a space:
+button Default
This will create a button at default size, with default coloring, and with #
set as its link destination.



The button’s style can be set by passing a new style’s name as the first argument, and the link destination can be passed as the second argument:
+button("primary", "link.htm") Primary



The size of the button can also be changed by passing either “large”, “small”, or “mini” as the third argument:
+button("success", "success.html", "large") Success +button("info", "info.html", "small") Info +button("warning", "warning.html", "mini") Warning



Alert Component
Alert components are very similar to Bootstrap’s buttons, but simpler as they don’t need to have link destinations applied to them and they don’t come in different sizes.



Writing up alerts in raw HTML can be a little tricky as you have to remember all the associated classes together with how to add in the button with the “x” symbol inside it that allows the alert to be closed.
We’ll put together a mixin so you won’t have to remember any of those things. In turn placing alerts becomes easy.
The Raw HTML
<div class="alert alert-dismissable alert-warning"> <button type="button" data-dismiss="alert" class="close">×</button>Warning! Warning! </div> <div class="alert alert-dismissable alert-danger"> <button type="button" data-dismiss="alert" class="close">×</button>Danger Will Robinson! </div> <div class="alert alert-dismissable alert-success"> <button type="button" data-dismiss="alert" class="close">×</button>You succeeded :-) </div> <div class="alert alert-dismissable alert-info"> <button type="button" data-dismiss="alert" class="close">×</button>Some information for you </div>
Convert to Jade
.alert.alert-dismissable.alert-warning button.close( type="button", data-dismiss="alert" ) × | Warning! Warning! .alert.alert-dismissable.alert-danger button.close( type="button", data-dismiss="alert" ) × | Danger Will Robinson! .alert.alert-dismissable.alert-success button.close( type="button", data-dismiss="alert" ) × | You succeeded :-) .alert.alert-dismissable.alert-info button.close( type="button", data-dismiss="alert" ) × | Some information for you
Add Alert Mixin
Add the following code to your “mixins.jade” file:
//- Alert mixin mixin alert(style) div( class=["alert", "alert-dismissable", "alert-" + style] ) button.close( type="button", data-dismiss="alert" ) × block
Use Alert Mixin
To place an alert you can now just use the alert
mixin, passing the alert style as an argument, then typing out the text content of the alert immediately after a space:
+alert("warning") Warning! Warning! +alert("danger") Danger Will Robinson! +alert("success") You succeeded :-) +alert("info") Some information for you
Jumbotron Component
The Jumbotron is one of Bootstrap’s most recognizable components.
In this case we won’t be creating a mixin for it, as placing a Jumbotron component is just as fast using straight Jade code. This serves as a good example to show that despite mixins being fantastic, you don't always need them if they aren't going to save you significant time.



The Raw HTML
<div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg">Learn more</a></p> </div>
Convert to Jade, Incorporating a Button Mixin
Placing a Jumbotron in Jade is really just a matter of typing out .jumbotron
on one line then nesting your content inside on the subsequent lines.
In the code below, check out how we have also used the button
mixin we created earlier, showing how you can start to mix and match these elements together:
.jumbotron h1 Hello, world! p This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. p: +button("primary", "more.htm", "large") Learn more
List Group Component
Bootstrap provides several different types of list group components. We’ll be generating three of those list group types, as follows.
1. "List" type, producing a ul
element with child li
elements



2. "Links" type, producing a series of linked text items



3. "Default" type, producing unlinked text items



The Raw HTML
As with some of the components we covered above, the HTML for list groups isn’t overwhelmingly complex. However, we can still make their production more efficient by creating a series of mixins that reduce the amount of code you need to write.
The raw HTML for each list group type is as follows:
Type: List
<ul class="list-group"> <li class="list-group-item active">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Dapibus ac facilisis in</li> </ul>
Type: Links
<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> </div>
Type: Default
<div class="list-group"> <div href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </div> <div href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </div> <div href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </div> </div>
Convert to Jade
Converted to straight Jade, each of the list group types are as follows:
Type: List
ul.list-group li.list-group-item.active Cras justo odio li.list-group-item Dapibus ac facilisis in li.list-group-item Morbi leo risus li.list-group-item Dapibus ac facilisis in li.list-group-item Morbi leo risus li.list-group-item Dapibus ac facilisis in
Type: Links
.list-group a.list-group-item.active( href="#" ) h4.list-group-item-heading List group item heading p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. a.list-group-item( href="#" ) h4.list-group-item-heading List group item heading p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. a.list-group-item( href="#" ) h4.list-group-item-heading List group item heading p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Type: Default
.list-group .list-group-item( href="#" ) h4.list-group-item-heading List group item heading p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. .list-group-item( href="#" ) h4.list-group-item-heading List group item heading p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. .list-group-item( href="#" ) h4.list-group-item-heading List group item heading p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Add List Group Mixins
As we did with the nav component mixins, we’re going to create multiple list group mixins that can be nested to create our various list group types.
Add the following to your “mixins.jade” file:
//- List group mixins - var groupType mixin listGroup(type) - groupType = type case groupType when 'list' ul.list-group block default .list-group block mixin listItem(arg1, arg2) case groupType when 'list' li( class=["list-group-item", arg1] ) block when 'links' a( href=arg1, class=["list-group-item", arg2] ) block default .list-group-item( class=["list-group-item", arg1] ) block mixin listHeading h4.list-group-item-heading block mixin listText .list-group-item-text block
The first mixin, listGroup
, intializes any of our three list group types and can accept an argument determining the type of list group to produce. It will output a ul
element only if the list type is specified when it’s called.
The second mixin, listItem
, outputs the individual list items. If the type list is specified it will output each item inside li
tags, and if the type links is specified it will output each item as a link.
The third mixin, listHeading
, outputs a h4 level heading when nested inside a list item, and is meant for use with the links and default list group types.
And finally the fourth mixin, listText
, outputs the text to be included inside a list item, and is also meant for use with the links and default list group types.
Use List Group Mixins
Type: List
To create a list type list group use the listGroup
mixin with list
passed as an argument, and listItem
mixins as seen in the following code:
+listGroup("list") +listItem("active") Cras justo odio +listItem Dapibus ac facilisis in +listItem Morbi leo risus +listItem Dapibus ac facilisis in +listItem Morbi leo risus +listItem Dapibus ac facilisis in
To set one of the list items to have an active style pass the word active as an argument, as per the second line in the above code example.
Type: Links
To create a links type list group again use the listGroup
mixin, but this time pass the word links
as an argument.
You’ll also still use the listItem
mixin, however this will now be outputting links so you should include an argument each time that sets a destination for the link to go to. If you’re setting a linked list item to have active
style, this time pass the word “active” as your second argument.
Nested inside each listItem
mixin you can use the listHeading
and listText
mixins to set the heading and regular text for each item:
+listGroup("links") +listItem("link1.html", "active") +listHeading List group item heading +listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. +listItem("link2.html") +listHeading List group item heading +listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. +listItem("link3.html") +listHeading List group item heading +listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Type: Default
The default type list group is what you get when you pass no argument at all through the listGroup
mixin. It’s used in almost the same way as the links type list group, with the difference that you don’t need to pass any link destinations when using the listItem
mixin:
+listGroup +listItem +listHeading List group item heading +listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. +listItem +listHeading List group item heading +listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. +listItem +listHeading List group item heading +listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Bootswatch Themes
In all the examples you’ve seen so far we’ve been using Flatly theme from Bootswatch, loaded in via the Bootstrap CDN with this code in the head section:
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet")



The last mixin we’re going to add into our project is a “Bootswatch” mixin.
This mixin will make it really easy to switch themes, and also to update the URL of your stylesheet later should you need to. This is particularly useful if you need to update multiple HTML files at once.
Add Bootswatch Mixin
Add the following code to your “mixins.jade” file:
mixin bootswatch(theme) link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/" + theme + "/bootstrap.min.css", rel="stylesheet")
Use Bootswatch Mixin
In your main document, replace the line that links in the Bootswatch stylesheet with this:
+bootswatch("flatly")
Now to switch in any other theme just replace the word flatly
with the title of the new theme. For example, to switch to the Superhero theme use:
+bootswatch("superhero")
This will instantly re-theme your site into this:



Wrapping Up
I hope you have fun putting all these Jade snippets to work in your Bootstrap projects, and that it saves you a great deal of time in the process.
If there’s anything you'd like to do differently in your own Bootstrap projects, the beauty of Jade mixins is you can write them and customize them in any way you choose.
Jade is an incredibly powerful language, yet it’s an intuitive language that you can pick up and start using to practical effect quite quickly.
Further Reading
- I invite you to take a look at my course Top Speed HTML Development With Jade, where I walk you through everything you need to get the fundamentals and some of the most useful elements of Jade under your belt in just a little over two hours.
- For more on Jade check out the official site at http://jade-lang.com
- And for more on Bootstrap visit http://getbootstrap.com
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weekly