Did you know that Twitter Bootstrap is the most popular GitHub project? It's more popular than even rails and jQuery. If you don't know what it can do then you probably should and here is your chance. In this session I will discuss: - Building sexy web applications by leveraging the Twitter Bootstrap community - Why Twitter Bootstrap might be a better choice then IBM's OneUI - Rapid prototyping with Twitter Bootstrap - XPages specific resources to get you rolling - XPages time savers to generating valid Twitter Bootstrap markup
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
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">