Materialize is a beautiful new CSS framework you might consider as a fresh-looking alternative to Bootstrap. It implements Google’s Material design guidelines.

This tutorial builds up the nabber step by step so you can see what each HTML element and each line of Javascript code des.

The code here is copy and paste. You’re well advised to check for a later version on the CDN.

Here’s how a useless nav bar consisting only of a bar using the default color is coded:

Here it is. Whelming, I know. navbar-part-1a Click here for a live demo of the toolbar in action.

Specify a color

Materialize comes with a rich color palette defined. Background colors are given class names such as red, pink, deep-purple, and so on. We’ll color this one indigo.

It now looks like this.

navbar-part-1b

Click here to see our toolbar, such as it is, colored indigo.

Darken (or lighten) the color

You can append a class modifier to darken or lighten the color. They go from lighten-1 through lighten-5 and darken-1 through darken-5.

Here’s an example.

And now, for something completely different: navbar-part-1c Trust me, they’re different. Maybe I should have chosen another color to demo. Whatever. Click here for a live demo of the indigo darken-5 toolbar.

Add a logo to the navbar

Navbars have two purposes: display a logo/home page gizmo thingie, and navigation. I’m a staunch capitalist so let’s hit the logo first. It’s just a link using the brand-logo class. Here’s the branded link.

Click here to see the lamest logo of all time. or just gaze in wonder at the screen shot below. But hey—it’s now a functioning navbar.

navbar-part-1d

Add a navigation to the navbar

The second purpose of a navbar is, well, navigation. You’ll include an unordered list with a link to each location.

Here’s the toolbar with navigation links added.

That’s what we’re talking about! navbar-part-1e Click here for a live demo of the navbar with links.

Change location of navbar elements

The navbar is now functioning properly, but you may not love the layout at the moment. There are some extra classes that let you move elements of it around. For example, you can pull the navigation links to the right using the right class.

It looks like this.

navbar-part-1f

Click here for a live demo showing navigation links on the right.

Change location of navbar elements redux

You can apply the left class to the nav-wrapper itself. Check it.

It looks like this. Click here for a live demo showing that ever so slight change of code.

Add a “hamburger” version for narrow web pages

Responsive design dictates that when the screen gets narrow, the navigation menu should get out of the way.  We do this by:

      • Creating an identical, second navigation menu of class side-nav.

 

      • Adding an ID to the second navigation menu. For this example we’ll use an ID of "side-menu".

 

      • Adding a link using the icon style called mdi-navigation-menu. That gives it the stacked lines or “hamburger” look. Give that link the button-collapse class, which ensures it appears only when the web page gets narrow enough to make the hamburger appear.

 

      • Adding a line of Javascript code to initialize the button collapse action when the web page is loaded.

 

Here’s what the page will look like when the page gets narrow enough to show the hamburger: navbar-part-1jaAnd here’s what happens when you click the hamburger:

navbar-part-1jb

Create the second navigation menu

Create the duplicate navigation menu, with the ul class changed to side-nav.

Add an ID to the second navigation menu.

You’ll give this duplicate navigation menu of class side-nav a unique ID. Here we call it side-menu but you could call it anything.

Adding an <a> link using mdi-navigation-menu icon and the button-collapse class

The hamburger icon is enclosed in an <a> using the data attribute data-activates="side-menu". The "side-menu" string must match the ID you gave to the second navigation menu:

Add Javascript code to initialize the button collapse action

Finally, at the bottom of the page, before the closing body tag but preferably after the HTML code, include this Javascript code. It initializes the sliding mechanism and runs it when you click the hamburger.

Here’s the complete code.

Click here for a live demo showing that ever so slight change of code.

This is a personal study aid of mine masquerading as a public service, which is a Meteor quiz. I’m using Meteor in an upcoming project and needed some way to quiz myself on the points I might have difficulty remembering.
[qdeck random=”true”]

[q]Files in which directory are loaded first?
[a]/lib

[q]Where do static assets go?
[a]/public directory

[q]Are files starting with main.* loaded first?
[a]No, they’re loaded after everything else.

[q]Using Spacebars, what helper returns the URL path component of a route?
[a]{{pathFor}} returns the URL path component of a route.

[q]How would you obtain the URL path component of a the latestReviews collection?
[a]”{{pathFor ‘latestReviews’}}”

[q]What purpose does the Iron Router waitOn() function serve?
[a]Provides a notification that data has finished loading, which is important because it means the template won’t be rendered before all the data has been loaded.
[q]What does {{> postItem}} do when found in an HTML file and where will postItem be found?
[a]Renders the template postItem. t will be found in an HTML file with a <template> tag like this: <template name=”postItem”>

[q]What is a data context?
[a]A data context sets Javascript’s this inside a template helper.

[q]What is the more common equivalent of the following and what does it do?
{{#with myWidget}}
{{> widgetPage}}
{{/with}}
[a]{{> widgetPage myWidget}} A template call (widgetPage) with an argument.

[q]What is a computation?
[a]Code that runs any time there is a change to the reactive data source it depends on.

[/qdeck]

This wast built using the invaluable Qwiz plugin, detailed here.

Curran Kelleher has a couple of videos and and excellent little website called 50 AngularJS examples, with tiny but complete HTML code illustrating each example. The first few are pure HTML and jQuery-less DOM manipulation, then the rest to go into AngularJS with a little Backbone for comparison. You can even navigate through examples using arrow keys. An excellent means of presenting information I’m thinking about stealing!

The two videos don’t have any table of contents, so I created one:

Part 1

Example 1

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=691

 

Example 2

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=725

 

Example 3

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=790

 

Example 4

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=812

 

Example 5

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=852

 

Example 6

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=890

 

Example 7 (First AngularJS example) Introduces angular, discusses cdnjs.com

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1032

 

Example 8

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1256

 

Example 9

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1291

 

Example 10

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1317

 

Example 11

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1457

 

Example 12: Fascinating discussion of how AngularJS propagates values

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1548

 

Example 13

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1642

 

Example 14

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1725

 

Example 15

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1822

 

Example 16

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2004

 

Example 17

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2030

 

Example 18

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2266

 

Example 19

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2345

 

Example 20

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2402

 

Example 21

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2547

 

Example 22

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2722

 

Example 23

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2831

 

Example 24

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2872

 

Example 25

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2932

 

Example 26

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3052

 

Example 27

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3161

 

Example 28

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3290

 

Example 29

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3331

 

Example  30

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3345

 

Example 31

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3380

 

Example 32

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3453

 

Example 33, Routing (says Example 32)

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3469

 

Example 34

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3489

 

Example 35

https://www.youtube.com/watch?feature=player_detailpage&v=TRrL5j3MIvo#t=3771

 

Part 2

Example 36

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=467

 

Example 37

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=555

 

Example 38

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=712

 

Example 39

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=821

 

Example 40

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=1069

 

Example 41

https://www.youtube.com/watch?v=6J08m1H2BME#t=1224

 

Example 42

https://www.youtube.com/watch?v=6J08m1H2BME#t=1319

 

Example 43

https://www.youtube.com/watch?v=6J08m1H2BME#t=1468

 

Example 44

https://www.youtube.com/watch?v=6J08m1H2BME#t=1666

 

Example 45

https://www.youtube.com/watch?v=6J08m1H2BME#t=1810

 

Example 46

https://www.youtube.com/watch?v=6J08m1H2BME#t=2137

 

Example 47 (introduced while on Example 46)

https://www.youtube.com/watch?v=6J08m1H2BME#t=2731

 

Example 48

https://www.youtube.com/watch?v=6J08m1H2BME#t=2821

 

Example 49

https://www.youtube.com/watch?v=6J08m1H2BME#t=3110

 

Example 50

https://www.youtube.com/watch?v=6J08m1H2BME#t=3186

The only thing better than a Bootstrap-styled user interface is a wizard written using Bootstrap.js, and Vincent Gabriel’s oh-so-capable Twitter Bootstrap Wizard Plugin lets create one quickly and easily. What I wanted was a step-by-step wizard with a lot of features:

  • Customizable Previous and Next buttons
  • A Customizable Finish button
  • Support for an arbitrary number of steps
  • A progress bar

Here’s what the sequence should look like visually:

Twitter Bootstrap Wizard Example Step 1.

Twitter Bootstrap Tutorial Screen Shot 1

 

Note how in Step 1 the First and Previous buttons are disabled, as they should be. You can use class and style  attributes to modify default behavior.

Twitter Bootstrap Wizard Example Step 2.

Twitter Bootstrap Tutorial Screen Shot 2

In Step 2 the First and Previous buttons have automatically become active.

Twitter Bootstrap Wizard Example Step 3.

Twitter Bootstrap Tutorial Screen Shot 3

In Step 3 the Finish button has automatically been replaced with a Done button. The default behavior for the Done button is to appear as disabled, but that behavior is easily modified using a bit of jQuery.

I think Bootstrap has changed in such a way that Vince’s code no longer works as written with the current version. At least I couldn’t get it to work, but I’m pretty sure that’s more a reflection on me than Vince. Not being a Bootstrap expert I had to go back to first principles and understand their tab markup, then add Vince’s good work on top of that.

By the way, I try to include running code here through the use of CDNs, but the Twitter Bootstrap Wizard Plugin isn’t available on cdnjs, even though it appears to be.

Here’s the complete running program.

Assumptions for the Twitter Bootstrap Wizard tutorial:

Since I don’t have a demo, here’s the complete code listing before I get into the explanation.

 

Step by step Markup Tutorial for a Bootstrap Wizard With Progress Bar

 

0. Create a surrounding div

The whole thing must be surrounded by a simple div with an ID you assign the name of the wizard, rootwizard in this example:

 

1. Tab markup: Unordered list

      • The markup for the tabs themselves is an unordered list with class="nav nav-tabs" role="tablist" in the ul
      • Each tab is in an li tag with a unique named anchor on the same page, for example, a href="#step2"
      • The li tag must use data-toggle="tab" attributes. FWIW I was able to omit the role="tab" but that seems like a bad thing for forward compatibility.

2. Progress bar markup: div of class “progress” and nested div of class “progress-bar”

  • Create a div of class “progress”. It doesn’t need an ID
  • Inside it nest a div of class “progress-bar”. It requires an ID, in this case, I used progressBar. jQuery will be used to update the div dynamically as the user clicks Previous and Next buttons and it needs the ID to know which div to work on.

The “progress-bar-striped” attribute is optional. It looks more dynamic and gives the user a feeling of real progress while filling out a form.

I put the progress bar just below the tabs but it can go anywhere. For example, it looks just as good if you switch steps 2 and 3.

3. Tab pane markup: div of class “tab-content” with nested divs of class “tab-pane”

The tab panes are where content goes. You can only see one at a time, even though they’re all in a single piece of markup.

      • Create a div of class “tab-content” to enclose all tab pane divs. It doesn’t need an ID.
      • The tab panes are separate divs of class “tab-pane” nested inside the class “tab-content” div. Each tab pane has a separate ID, which must match the named anchors in the li declarations in Step 1.
      • The first tab tab pane has “active” in its class attribute. That selects the tab on page load.

4. Previous/Next Buttons: Unordered list of class “page wizard”

The First, Next, Previous, and Done buttons make clever use of the unordered list markup.

  • The ul must include the attribute class="pager wizard"

They do not need to be named First, Next, Previous, and Done because their function and position are both determined by a class attribute:

  • Each li tag contains an a link as the target.

As a bonus I’ve included access key attributes on the a links, which have nothing to do with the wizard. I just like keyboard shortcuts. Access keys let you use a letter key in conjunction with a system-defined key or key set to activate a control. For example, the Next button uses a href="#" accesskey="n". On a PC you’d press Alt+N key as the equivalent of the Next button, and on a Mac it would be Control+Option+N

5. Load the jquery.bootstrap.wizard.min.js in a script tag

The jquery.bootstrap.wizard.min.js file should be included as far down in the body as as possible, because sometimes Javascript files can page rendering.

6. Add Javascript code in a script tag

The magic in Vince’s progress bar code is in using jQuery to redraw the Bootstrap-provided progress bar div according to which tab is selected:

I added a few lines of optional code. For example, this section makes sure the Done button appears only when at the last tab, and that it’s active:

In Vince’s code, the Next button appears on the last tab, although it’s disabled. In my version, it’s removed on the last tab only:

Here’s what all the Javascript looks like.

Here’s a step by step recipe with all the code you need to see how to create a tabbed interface in Twitter Bootstrap in a single HTML file.

The result will look something like this:

Bootstrap.js tab tutorial

Try it out and grab the source for yourself here

Markup for the tabs

Bootstrap Tabs use an unordered list in conjunction with tab-content divs that contain a nested tab-pane for each div‘s content.

In this example the tab’s text is Sell. It could be any text but the most important attribute is the #sell attribute. It must match a div ID in the upcoming tab-pane div:

One of the tabs should appear as selected. Use the active attribute:

Here’s the full declaration for the tabs.

Next are the tab panes. The ID of each pane must match the href attribute but without the pound sign:

Here’s all the code in context. Save this as an HTML file and it will create the same kind of interface shown in the screen shot

This minimal HTML5 app template shows Bootstrap and JQuery working together. It’s big enough to show off features of both Bootstrap and JQuery but small enough to hollow out and use for your own purposes.

A lot of the Bootstrap examples I’ve seen are far more complicated than they need to be. Copy and paste this code to knock together an attractive, feature-packed website as prototypes or as a starting point for production apps.

It has a little behavior built in:

Your Copy-and-paste Bootstrap HTML app using JQuery to toggle a div

A preformatted area called a “well” in bootstrap terminology is hidden using a standard CSS

display: none;attribute until you click the Show button.

bootstrap-starter-cdn-2-second

At the same time the well is displayed (using JQuery’s toggle() feature, the button’s text gets changed to Hide:

Here’s what it looks like after you click.

bootstrap-starter-cdn-2-second

Try it live here.

The full, commented copy-and-paste code is here:

Here is a copy-and-paste HTML5 app template that will no doubt evolve. Because it uses CDNs to load jQuery and Bootstrap you can copy and paste it as is. You don’t need to create local directories with them. (Updated to include charset declaraction May 3, 2015)

Copy and paste this HTML5 app template using Bootstrap and jQuery

If you want to bang out a quick HTML5 app that uses Bootstrap and/or jQuery
just copy and paste this code. Normally you’d have to copy several files
to local directories, but that problem is eliminated through the use of
CDNS (cloud services) to fetch the files.

Features

  • Uses Bootstrap for clean styling across browsers
  • Uses jQuery for consistent behavior across browsers
  • Automatically finds latest version of jQuery
  • Robust: Includes checks to ensure jQuery and Bootstrap are present

What to be careful of

  • Because only the latest jQuery is specified, behavior could change subtly
  • Watch for newer versions of Bootstrap and change source accordingly
  • It is possible that either CDN could go out of business, in which case
    you’d have to store jQuery or Bootstrap locally
  • It’s probably better to use local versions of both libraries in production
    so that test results remain consistent

 

 
Download source to HTML5 App Template with Bootstrap and jQuery loaded from CDNs v1.01

 

This Program Clones Itself

 

Here’s a page using Bootstrap and JQuery that clones its own source code, starting with the <head> tag

It uses Bootstrap for cosmetic purposes. Obviously the core code is here:

$('#sourceListing').text( $("html").clone().html() ) ;

Screen shot of the program in action:

This Program Clones Itself