Using Bootstap to Create a Responsive Application Design - Part 1

My new project involves creating an entirely new Purchase Order database to replace a "traditional" domino application.    We decided to sunset the our old PO database, and start from scratch using xpages and a modern look and feel.   This application will be customer facing, so unlike an internal app, I don't know what user agent the customer will be using.

To make the app friendly to any type of device, I decided to create a responsive design using Bootstrap.   I will create a series of post based on my experience (or lack thereof) using this method.

To start, I decided to use Collaboration Today as a model.   The design is out on openntf for all to use.   Prior to starting this project, I learned as much as I could on Bootstrap and managed Java beans since I will be using both on this project.

Getting started was selectively copying elements from CT.nsf into my design, and removing elements I don't need.   This is the first app that I used a theme, and I finally see the benefits of using them.   Another strange thing that happened is that I found myself (so far) exclusively using the Source pane.  When integrating outside frameworks, the design pane is virtually useless.

My design has far less content that CT, so I so far am using just two custom controls for the layout.   One called "layout" which contains the grid, and one called "header" which contains the menu bar.   All of my xpages will call these two custom controls.

This is all subject to change, but this is how it looks so far.

This is the design when viewed in a normal desktop and a tablet in the horizontal position.

This is the very same design when view on a tablet vertically.  Notice button bar instead of dropdown menu.

Again, the very same design in a mobile device.   Note:  I load a smaller logo for mobile, but otherwise the same a vertical tablet.

Effect of touching menu button.  The main content slides down gracefully.

Notes:

• I am using Google Web Fonts.   I haven't used them before, but now I am a big fan.  I might do a separate post on how easy they are to use.
• In my CSS, I make extensive use of media queries, to setting padding, borders, etc. 
• My main grid at this point is a 1-10-1 layout.   This is subject to change.
• I am really just beginning here, and will document more coding methods as I get further into this project.