A Departure to the View

Up until now, we have been working on the data (aka. model) in the SPA and now we are going to focus on the view.  The terms model, view, and controller (later) are general terms to describe kinds of code that follow the Model View Controller (MVC) pattern.

Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user.

Model-view-controller - Wikipedia, the free encyclopedia

<http://en.wikipedia.org/wiki/Model-view-controller>

There are a myriad of ways to provide for an aesthetically pleasing responsive web design app, but I am only going to focus on one; Bootstrap <http://getbootstrap.com>.  Not going to explain this choice other than, I have barked up many wrong trees before I settled on this solution.

Rather than pointing to a tutorial on Bootstrap (not sure I have found a good one), just going to jump into using it as it is fairly easy.

Screen Layout

With mobile applications on my mind, the first step is create a screen layout that has a header (for things like titles and buttons), a body (for content), and a footer (for more buttons).  The Bootstrap component that we will be using is the panel <http://getbootstrap.com/components/#panels>.

In JSFIDDLE select jQuery 2.1.0 (or greater) in the Frameworks & Extensions and then select Bootstrap 3.2.0.

HTML

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel body
  </div>
  <div class="panel-footer">
    Panel footer
  </div>
</div>

Another thing to consider for mobile devices is to setup the viewport <https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag>.  In this particular example, I want the app to fill the screen and prevent the user from zooming in.

In order to setup a tag in the header in JSFIDDLE, the trick is to jam it at the end of the CSS as follows:

HTML (in the CSS Section)

</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>

Result