Post on 28-Jan-2015
description
MWLUG 2013
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
Andrew BarickmanPractice LeaderPSC Group@ajbarickman
About Andrew
• Practice Leader of the collaboration group at PSC
• 20 years in Lotus/IBM space
• Responsible for technical direction and delivery of all IBM projects
Twitter: @ajbarickman
Twitter Bootstrap History
• Developed by Mark Otto and Jacob Thornton at Twitter
• Released as open source in August, 2011• Apache license 2.0• Minified files < 30K
Twitter Bootstrap
Including
<!DOCTYPE html><html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0”> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen”> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body></html>
Parts
• Scaffolding• Base CSS• Components• JavaScript Plugins
Scaffolding
• Basic typography and styles• Includes most of normalize.css – allows browsers to act
the same.. For the most part• Grid system• Responsive
Style
The Grid
• Default to a 12 column grid• 980 wide container• 16 column and 24 column included as well• Fluid Grid – percent instead of pixels
Grid – Fluid Layout
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div></div>
• Remove “Fluid” to make it fixed widths
Responsive
• Responsive turned off by default• Add the following to turn on<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="assets/css/bootstrap-responsive.css" rel="stylesheet”>
• Can modify width of grid columns• Stacks up instead of float as necessary• Resize heading and text as appropriate
Responsive (Cont)
Responsive (Cont)
TB versus OneUI
Advantages• Does not look like an IBM
product• Responsive• Better UI – More modern• More modern typography• Buying into an amazing Eco-
system of plugins and support• Simpler markup• Easy to templatize for reuse• Easier to engage non-IBM
resources (ie designers)
Disadvantages• Does not look like an IBM
product• Extention library has already
done some of the hard work for you (ie application layout control)
Prototyping
https://mockupstogo.mybalsamiq.com/projects/web/Bootstrap
Balsamiq
Jetstrap
Jetstrap Demo
Adding TB Resources
• Download resources from Jetstrap or…..
• Download from TB website• Import resources into project using
navigator or package explorer view• Set the HTML 5 doc type• Don’t forget to add jQuery • Add responsive capabilities
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Templating
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </div> </div> </form>
Snippets
Demo
Templating - Custom Controls
Demo
Bootstrap XPages Resources
• Bootstrap for XPages– http://www.bootstrap4xpages.com/
• Bootstrap for XPages– www.openntf.org/blogs/openntf.nsf/d6plinks/NHEF-9AQDW3
• Bootstrap UI Template– http://www.openntf.org/blogs/openntf.nsf/d6plinks/NHEF-98JALA
• Getting Started With Bootstrap– https://
www.socialbizug.org/blogs/articles/entry/getting_started_with_twitter_bootstrap_part_1?lang=en_us
Bonus Content
• WrapBootStrap.com• Font Awesome• Select 2