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
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
1 2 3 4 5 6 7 8 9 10 11 | <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)
1 2 3 | </style><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><style> |
Result
No comments:
Post a Comment