Sunday, December 30, 2012

TypeScript Node.js Development Part 3 - Twitter Bootstrap

This is going to be a quick post since I only want to cover how to get a jade layout working with Twitter Bootstrap. Bootstrap is a front-end framework that includes a nice standard UI, an easy way to make a neat layout that updates depending on the size of the window, and a bunch of neat Javascript features like popups, dropdowns, and alerts. It's a great way to start off a site, especially for people like me who are horrible at graphic design.

To get this started, first I'm going to get rid of the original CSS code, but leave the file there in case I want to add anything else later. Getting the site "bootstrap enabled" is a simple matter of referencing the bootstrap CSS and JS files, and I'm also going to include jQuery since the Bootstrap Javascript code requires it, and also because it's something that is pretty useful on its own. With these changes, the layout.jade file now looks like:
!!!
html
  head
    title Page Title
    link(rel='stylesheet', href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css')
    link(rel='stylesheet', href='/css/style.css')

  body
    #header
      script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js')
      script(src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js')

    #container!= body

The basic way to layout a Bootstrap page is to use row divs to separate vertical parts of the page and column spans with optional offsets to separate horizontal parts of rows. The Bootstrap docs explain this in more detail, but for my simple index page, I'm going to enclose all my content in one row which is 4 columns wide and offsetted 2 columns from the left, and in jade that looks like this:
.row
  .offset2.span4
    [content goes here]

My content is going to be the title and test array from part 2, then some code which tests that jQuery and Bootstrap are both hooked up correctly and working. The jQuery test is a simple accessor that modifies some HTML. The Bootstrap test is a bit more involved - it's a button that when clicked will open up a modal dialog. Translating some jQuery code and sample Bootstrap code to Jade, we get this:
    h1= title
    p Welcome to #{title}

    ul
    - each test in testArray
      li
        a(href= "/user/"+test)
          b= test

    #jquery-test

    script(type='text/javascript')
      $("div#jquery-test").html("jQuery works!")

    a#bootstrap-test.btn(href="#",role="button") 
      i.icon-thumbs-up
      | Bootstrap Modal

    #myModal.modal.hide.fade(role="dialog")
      .modal-header
        button.close(type="button", data-dismiss="modal") x
        h3 Modal Test

    script(type='text/javascript')
      $('#bootstrap-test').click(function() { $('#myModal').modal() });

Load that up, and we see the reassuring "jQuery works!" and a button which, as expected, opens up a modal dialog.

The final step I wanted to include was to add some Google Analytics tracking code, since that is something that I want in all of my sites. This gets added to the layout file, and in Jade it looks like:
    script(type='text/javascript')
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'ANALYTICS-ID']);
      _gaq.push(['_trackPageview']);
      (function () {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

And that's all I wanted to cover in this post. As with part 2, I've made a Visual Studio template which includes these changes.

Previously: TypeScript Node.js Development Part 2 - Standard Packages and Azure Deployment, next: TypeScript Node.js Development Part 4 - More Packages.

No comments:

Post a Comment