Jim Driscoll's Blog

Notes on Technology and the Web

Archive for the ‘Bootstrap’ Category

Bootstrap for Responsive Design

leave a comment »

This post is part of a series examining the Modern Web. Currently, I’m trying to assess pain points in creating a Single Page application, and to do that, I’ve created a simple application which does inventory management. You can find the (somewhat sloppy) code on Github, if you want to follow along.

After my previous post looking at the Model layer, today we’ll examine how to handle responsive design using Bootstrap. (Please forgive the hokey formatting in this post, WordPress Markdown support is still pretty badly broken.)

I just need to say it: using Bootstrap is a treat, and I’m utterly in love. Can you love a UI framework? Apparently so.

Consider the process of making a menu that will appear at the top of your page. You want it to look nice, both on mobile devices as well as the desktop. Let’s also make it “stick” to the top of the page, even when you scroll.

To do that, you take a nav tag, and decorate it with a few CSS classes:

<nav class="navbar navbar-default navbar-static-top" role="navigation">

The part that you want to display when collapsed goes into a separate header:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" 
      data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#home">JQ Product</a>
</div>

The three spans with class="icon-bar" are there to show a classic “three lines” icon when the menu is collapsed. Now, when the navigation menu is too small horizontally to display everything, only the three lines icon and your branding link are displayed.

After that, just list all the links you want to see in the navbar, as a list:

<div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="#products&page=1">Product</a>
        </li>
        <li>
            <a href="#categories&page=1">Category</a>
        </li>
    </ul>

(Note that since this div collapses, I’ve added the appropriate CSS classes. Uncollapsed, this will all appear horizontally, collapsed, this all appears vertically. It’s a nice effect on a phone.)

There’s even facilities to to add search forms, as well as to right justify elements of your menu:

        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input id="searchinput" type="text" 
                    class="form-control" placeholder="Search">
            </div>
            <span id="search-nav-btn-holder">
                <div id="search-nav-btn" class="btn-group">
                    <button type="button" 
                       class="btn btn-default dropdown-toggle" 
                       data-toggle="dropdown">
                        Search
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a class="search-btn" 
                              href="#products&search=">
                                Search Products
                              </a>
                        </li>
                        <li>
                            <a class="search-btn" 
                              href="#categories&search=">
                                Search Categories
                              </a>
                        </li>
                    </ul>
                </div>
            </span>
        </form>
    </div>
</nav>

This last bit of code you see above sets up a form in the menu bar for search, pulls it all the way to the right, and adds a drop down selection button, using the dropdown-menu on a ul tag. All declaratively. Annotating an a tag with class="search-btn" even gives a nice rounded button which distinguishes search buttons from other types of buttons on the page.

As I said in the intro, I’m quite smitten with Bootstrap, and I could probably go on and on about what it does, but if this example looks interesting to you, check out their documentation on what components it offers, it’s quite good. Their whole website is a nice example of use as well, and view source is very instructive.

Next up, we’ll deal with some of the harder parts of creating your own Thin Server app – specifically, view management.

Advertisements

Written by jamesgdriscoll

January 25, 2014 at 12:05 PM

Posted in Bootstrap, HTML5

Thin Server the Hard Way (Getting Set Up)

leave a comment »

After the diversion I just had with Java 8, time to get back to describing some features of the Modern Web.

There are any number of MV* client side frameworks out there. I’ve already mentioned TodoMVC, where you can find an extensive list, as well as sample code for each.

But before you evaluate tools, it always pays to know what pain points you’re trying to solve. So, with that in mind, I decided my first task would be to do a Thin Server application the hard way, using only jQuery to manipulate the DOM and handle the data.

Now, I didn’t want to not learn anything new during this exercise, so to keep in interesting, I added in one new dependency, Bootstrap.

So, here’s the recipe list I started with to develop the application:

Tools in Use

  • Brackets, which I wanted to evaluate as an IDE
  • QEDServer, which provides default REST endpoints, as well as a public directory to serve files
  • jQuery, because why on earth would you use the built in DOM APIs if you didn’t have to?
  • Bootstrap, to make the site look pretty

So, not quite starting at the bare metal, but close enough.

jQuery

I’m not going to go over jQuery at all in describing my solution. Even though it was the first time I used it for writing anything more than a few lines, I think it’s pretty likely that anyone reading this will almost certainly know it. And if you don’t… There are any number of books out there on it, but before you invest in a book, just check out the API Documentation. It’s a small API, and quite restrained in what it’s trying to accomplish. Essentially, it’s for DOM manipulation, AJAX requests, and handful of utility functions to make those two functions easier. If you already know much about the browser DOM, it’ll take you a weekend to get up to speed. If you don’t know the browser DOM… then that’s the problem you need to solve, not learning jQuery.

Bootstrap

There are a number of “website boilerplate” projects out there. Besides Bootstrap, Foundation and HTML5 Boilerplate seem to be the most popular – but here’s a list of 10, if you’re interested.

I picked Bootstrap simply because it’s the most popular one right now, and they handle a bunch of things out of the box that I thought would be quite tricky for me to do on my own.

Bootstrap provides you with a set of CSS and JavaScript libraries that you can use as a starting point for your pages, and by default, their look and feel is both clean and modern. Additionally, adding simple effects (like collapsing navigation bars, popups, and closable alert boxes), can be done almost entirely declaratively. Like jQuery, I found it to be incredibly simple to use, and rock solid – I only found one bug during the process, and that was certainly because I was doing something that was an unexpected use of the product.

Also, because it’s the most popular framework, I was able to find lots of information on the web about various setup questions, including the fix for the bug I found.

Bootstrap’s only requirement was that jQuery be included in the same page, so that also worked out pretty well for me.

Conclusions

I’d certainly recommend both libraries as something that a beginner should start out with – they’re both self contained and easy to learn.

Next up, I’ll out line the architecture that I used to create my first Thin Server application

Written by jamesgdriscoll

January 20, 2014 at 3:02 PM