Z-Scale controller part X: Bootstrap and UI design

Bootstrap logo

Twitter Bootstrap

See this big “B” on the left? B is for Bootstrap, a “Sleek, intuitive, and powerful front-end framework for faster and easier web development”. Or at least that’s what the project page says.

In practice, Bootstrap is a set of stylesheets and javascript code that define an extensive and coherent set of widgets that can be used on HTML pages, along with “Scaffolding” elements. This scaffolding is also mainly a set of styles that, when used as intended, make it very simple to organise assets on a page – including ‘responsive’ elements.

Browser support

This is purely arbitrary, but I decided that I would only test my app against webkit and Gecko – or Chrome/Safari and Firefox if you prefer -. I never owned a Windows computer anyway, and I honestly cannot see a valid reason for using IE on Windows where there are perfectly good alternatives. But who knows, this app might actually work fine on IE, if that’s the case let me know! I did not have to do any special effort to have it work fine on all the browsers I tested it against…


Making our design responsive

The preview article on what the UI looks like already gave away part of the good stuff: I used CSS selectors and some of bootstrap’s ready-made responsive styles to change the behaviour of accessory controls on the home view:

Train Controller home screen
Train controller home screen medium
Train controller home screen phone

Looking at a simplified html rendering for accessories, here is how I manage this behaviour:

<div class="thumbnail glowthumbnail accessoryitem" draggable="true">
            <div class="visible-desktop">
                <button class="btn btn-mini btn-danger buttonA" type="button">A</button>
                <button class="btn btn-mini btn-success buttonB" type="button">B</button>
            <div class="hidden-desktop">
                <button class="btn btn-danger buttonA" type="button">A</button>
                <button class="btn btn-success buttonB" type="button">B</button>

As shown, I leverage the “visible-desktop” and “hidden-desktop” classes in order to change the size of the buttons, it is a quick and easy way of handling this aspect, as the cost of a bit of HTML code overhead.

The real change in behaviour of the “accessoryitem” class depending on screen size comes from its style definition:

 * The little accessory items on the layout view
.accessoryitem {
    padding: 1px;
    position: absolute;
    max-width: 50px;
    max-height: 50px;
    left: 10px;
    text-align: center;
    opacity: 0.6;

/* On smaller screens, just display the accessories
    as a grid under the layout and discard location */
@media only screen and ( max-width : 1250px ) {
    .accessoryitem {
        -webkit-user-drag: none;
        position: relative;
        left: 10px !important;
        top: 20px !important;
        float: left;
        max-height: 80px;
        max-width: 80px;
        margin-bottom: 20px;
        opacity: 1.0;

A few notes on this part: as you can see, only webkit supports enabling/disabling drag and drop from within a CSS. But this is not a major issue, because on a mobile the drag events won’t happen anyway.

What next ?

In Part XI, the conclusion of this long series of article will go over the final result: a complete integration on a dedicated Beaglebone shield !

Leave a Reply

Your email address will not be published. Required fields are marked *