bootstrap

1. Twitter Bootstrap

2. Introduction
 Mobile internet use will continue to
surge
 More than half of Facebook users
are using mobile
 Mobile use is increasing at Berkeley

3. How can we better serve our
increasingly mobile users?
 Design: Build responsiveness into your websites and
applications
 Content: Think about content from a mobile first perspective

4. Design: Build responsiveness into your
websites and applications

9. Concepts
Responsive Design
Frameworks
Open Source

10. Design is a process
for developing
solutions that
effectively integrate
task, context of use,
and “user.”

11. An approach to web design that
provides an optimal viewing
experience across a wide range of
devices.
What is Responsive
Web Design?
http://www.alistapart.com/articles/responsive-web-design/

12. http://www.abookapart.com/products/responsive-web-design

13. Elements
•Fluid Grid
•Resizable Images
•Media Queries

14. Grids

16. Grids /

17. ExamplebasedonFoundationZurbFramework(http://foundation.zurb.com).A12columngridsystem
How do grid systems work?

18. Resizable Images
img {
max-width: 100%;height: auto;}

19. Common Breakpoints
Label Layout Width
Smartphones 480px and below
Portrait Tables 480px to 768px
Landscape Tablets 768px to 940px
Default 940px and up
Large Screens 1210px and up

20. Frameworks
 Project requirements determine the framework
 Fluid Grid System
 Responsiveness a plus
 Offer more than just a grid (pre-defined styles for
typography, tables, buttons, navigation, forms
elements, etc.)

21. Frameworks
 Great documentation
 Maintained regularly by the community or creator
 Open Source (free)

23.  A freely available design framework for
websites and web applications
 Based upon HTML5, CSS and
JavaScript
Supports all major browsers (even IE7!)
Released on GitHub in August 2011
Twitter Bootstrap

24. Created By

26. Rich Features

27.  960 Grid System http://960.gs/
 Blue Print CSS http://www.blueprintcss.org/
 Golden Grid System http://goldengridsystem.com/
Grid System

28.  Buttons:
 Tabs:
 Breadcrumb:
 Pagination:
 Alerts:
 Progress bar:
Components

29. Javascript/jQuery

42. Resources
http://bootswatch.com/

50. Latihan