Your SlideShare is downloading. ×
0
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?

1,187

Published on

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. …

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

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,187
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Open the Bootstrap website
  • Transcript

    • 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
    • 4. Twitter Bootstrap
    • 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>
    • 6. Parts • Scaffolding • Base CSS • Components • JavaScript Plugins
    • 7. Scaffolding • Basic typography and styles • Includes most of normalize.css – allows browsers to act the same.. For the most part • Grid system • Responsive
    • 8. Style
    • 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
    • 12. Responsive (Cont)
    • 13. Responsive (Cont)
    • 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)
    • 15. Prototyping https://mockupstogo.mybalsamiq.com/projects/web/Bootstrap
    • 16. Balsamiq
    • 17. Jetstrap Jetstrap Demo
    • 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>
    • 20. Snippets Demo
    • 21. Templating - Custom Controls Demo
    • 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
    • 23. Bonus Content • WrapBootStrap.com • Font Awesome • Select 2

    ×