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:
would compile to give the following nesting in HTML:
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”:
could be used repeatedly in a document like this:
and would compile into this HTML:
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:
http://www.bootstrapcdn.com/
https://developers.google.com/speed/libraries/devguide#jquery
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.
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.
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:
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:
Convert to Jade
Crunched down into Jade format our navbar component looks like this:
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:
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:
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:
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:
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:
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:
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:
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:
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:
Convert to Jade
Converting it to Jade makes it a little lighter again:
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:
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:
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:
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
Convert to Jade
Add Button Mixin
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:
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:
The size of the button can also be changed by passing either “large”, “small”, or “mini” as the third argument:
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
Convert to Jade
Add Alert Mixin
Add the following code to your “mixins.jade” file:
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:
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
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:
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
Type: Links
Type: Default
Convert to Jade
Converted to straight Jade, each of the list group types are as follows:
Type: List
Type: Links
Type: Default
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:
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:
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:
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:
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:
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:
Use Bootswatch Mixin
In your main document, replace the line that links in the Bootswatch stylesheet with this:
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:
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