Professional Documents
Culture Documents
Todays topics
Whats Bootstrap
And more in general: What is a design framework
Themes
Plugins
Whos that?
Freelance consultant/ developer
IBM Notes/ Domino
XPages, web, Java, client, mobile
IBM Champion
Bootstrap4XPages.com
Were developers
Were creative too, but in a different way
What is Bootstrap
So it looks good on all
kinds of devices
Bootstrap is a responsive
design framework to build
websites and/or web applications
So you can make your
work look good even
as a developer
FREE
Grids
Styles
Icons
using the Glyphicon font
Cross-browser
Responsive
Bootstrap 3
Released mid 2013
Re-built from the ground up
Mobile first
Responsive by default (optional in 2.3)
Changed grid
Icons are now fonts
So they scale
Support for IE 8+
Older browsers dropped
Be creative
Use a theme
Or write your own
Bootstrap files
Only a couple of JavaScript,
functions
Bootstrap in XPages
Two methods:
DIY (Do-it-yourself)
DIY
Download
Bootstrap
jQuery
Add files to
WebContent folder
Via the package explorer
Just drag-n-drop them
DIY
Create a theme
jQuery Javascript
Bootstrap Javascript
Bootstrap CSS
layout
Add an editable control for your content
Demo
Bootstrap4XPages plugin
OpenNTF project
Part of OpenNTF Essentials
http://bootstrap4xpages.openntf.org/
Bootstrap4XPages plugin
Support for Bootstrap 2.3.1, 2.3.2 and 3
Bootstrap 3 support was just released last week
Requires ExtLib
Supported on Domino 9
Bootstrap4XPages plugin
Add to Designer and Server
Demo
Bootstrap4XPages plugin
Community effort
http://www.youtube.com/watch?v=uAff5uNwhn0)
<resource rendered=#{javascript:
context.getProperty('xsp.resources.aggregate').equals('true')}">
<content-type>text/css</content-type>
<href>override.css</href>
</resource>}
form field
Add that to a custom control
For every field on your form: add that custom
control
Add error class for validation errors
Demo
Or create one
http://stylebootstrap.info/
Plugins
Lot of plugins available
Plugins Select2
Turns a boring combobox
Into an advanced search control
With support for:
Typeahead-selection
Static/ dynamic links (using Ajax)
Markup
Events
Demo
Select2 - basics
Download release
results
Select2 plugin deals with creating a list based on
your query
200 Glyphicons
But no rocket
Demo
Support for:
Progress bars
Drag-n-drop
Browsers:
Internet Explorer 10+
Chrome, Firefox
Mobile browsers
Demo
Tablecloth - http://tableclothjs.com/
Jetstrap http://jetstrap.com
Paintstrap http://www.paintstrap.com
Need inspiration? http://builtwithbootstrap.com/
To summarize
Stable framework
Whats next?
Youre up.
http://bootstrap4xpages.openntf.org
http://Bootstrap4XPages.com
Going to Connect? Come to my and Phil Riands Bootstrap
session!
Got questions?
Twitter: @markleusink
Email: m.leusink@linqed.eu
Blog: http://linqed.eu