User Interface Frameworks:
Twitter Bootstrap 3.0
Philip Johnson
Collaborative Software Development Laboratory
Information and Computer Sciences
University of Hawaii
Honolulu HI 96822
(1)
Objectives
Learn basic concepts of web UI with the Twitter
Bootstrap 3.0 framework
Warning:
• Twitter Bootstrap 2.0 has many web-based
tutorials.
• Twitter Bootstrap 3.09 was just released, and
is significantly changed from 2.0.
Be careful when googling about Twitter
Bootstrap: most results (outside of official
documentation) do not refer to Version 3.0!
(2)
What is a (web) UI Framework?
A (web) UI framework provides a set of CSS
classes and/or Javascript functions that:
• Simplify the development of layout
• Provide an attractive look-and-feel
• Provide consistent results across browsers.
In contrast, a "web development framework"
provides support for interaction.
(3)
Example UI Frameworks
(4)
Why choose Bootstrap?
It's a very popular, well designed, open source UI
framework
CSS wrappers for many Javascript components
• modal windows, typeahead, tooltips, etc.
Mobile-first design
• Bootstrap 3.0 is in the vanguard of responsive,
mobile-first UI design frameworks
(5)
Why "responsive" UI design?
There are currently three types of "hosts" for modern
Internet applications:
• Laptops
-operating system irrelevant (use browser)
-normal size screens (~1280 pixels wide)
-large screens (~2500+ pixels wide)
• Tablets
-Two operating systems (iOS, Android)
-typical size screens (~768 pixels wide)
• Phones
-Three operating systems (iOS, Android, Windows)
-small screen sizes (480 – 640 pixels wide)
(6)
Why responsive UI design?
Solution 1: Code four "native" applications:
• HTML, iOS, Android, Windows
• That's a lot of work!
Solution 2: Code one HTML application that
presents different UIs depending upon the
screen size:
• One "look" when in the browser on laptop
• Another "look" when in the browser on tablet
• A third "look" when in the browser on phone
(7)
Example : Disney.com
(8)
Why create a "native" application?
Take advantage of a "native" feature
• Plugin to Siri for voice-controlled interaction
Otherwise, responsive web design is the fastest
path to an application that works well on
laptops, tablets, and phones regardless of OS.
(9)
What is "mobile first"?
Twitter Bootstrap is "mobile first", which means
that no special coding is required to reformat
the UI for mobile screen sizes.
If desired, you can alter Bootstrap's default
approach to mobile display.
This is unlike other frameworks, where mobile
is a "special case" and requires lots of
customization.
(10)
Next steps
Watch the tutorials.
Do the practice WODS.
(11)