AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
- 1. MWLUG 2013
AD105 - OneUI.. really? Is that because
you don't know about Twitter
Bootstrap?
Andrew Barickman
Practice Leader
PSC Group
@ajbarickman
- 2. 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
- 3. 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
- 5. 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>
- 7. Scaffolding
• Basic typography and styles
• Includes most of normalize.css – allows browsers to act
the same.. For the most part
• Grid system
• Responsive
- 9. 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
- 10. 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
- 11. 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
- 14. 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)
- 18. 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">
- 19. 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>
- 22. 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_w
ith_twitter_bootstrap_part_1?lang=en_us
Editor's Notes
- Open the Bootstrap website