Baking Bootstrap Snippets with Jade

Final product image — What You'll Be Creating

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 the nav 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 a nav_item_dropdown menu mixin
nav_header - use to place a header inside a dropdown menu, after a nav_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.

Baking Bootstrap Snippets with Jade

Making HTML Even More Powerful

Jade Powered Bootstrap Snippets

Raw HTML to Jade

Jade Mixins

Getting Setup to Use Jade

Basic Document Creation

The Raw HTML

Convert to Jade

Prepare to Add Mixins

Navbar Component

The Raw HTML

Convert to Jade

Add Navbar Mixins

Use Navbar Mixins

Place the “nav” mixin

Inverse Navbar Color

Place Nav Items

Place Nav Item with Dropdown Menu

Place Dropdown Nav Items

Grid: Three Column Example

The Raw HTML

Convert to Jade

Panel Component

The Raw HTML

Convert to Jade

Add Panel Mixin

Use Panel Mixin

Buttons

The Raw HTML

Convert to Jade

Add Button Mixin

Use Button Mixin

Alert Component

The Raw HTML

Convert to Jade

Use Alert Mixin

Jumbotron Component

The Raw HTML

Convert to Jade, Incorporating a Button Mixin

List Group Component

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

Type: List

Type: Links

Type: Default

Convert to Jade

Type: List

Type: Links

Type: Default

Add List Group Mixins

Use List Group Mixins

Type: List

Type: Links

Type: Default

Bootswatch Themes

Add Bootswatch Mixin

Use Bootswatch Mixin

Wrapping Up

Further Reading

1. "List" type, producing a `ul` element with child `li` elements