Weitere ähnliche Inhalte Ähnlich wie Ready? Bootstrap! Go! (SOTR 2013) copy (20) Ready? Bootstrap! Go! (SOTR 2013) copy1. ©
2010-‐2013
Prisma
IT
®
Ready?
Bootstrap!
Go!
Guust
Nieuwenhuis
Scotch
on
the
Rocks
2013
Edinburgh,
Scotland
6. ©
2010-‐2013
Prisma
IT
®
What?
• Web
UI
Framework
– CSS,
images,
icons,
JavaScript
• Started
at
TwiRer
– By
nerds
(@mod
and
@fat)
• Open
Source
(Apache
License
v2.0)
– For
nerds
(you
and
me!)
• Some
GitHub
stats...
– Forked:
15.985
(#1)
– Starred:
50.819
(#1)
– Pull
request:
8067
– Closed
Issues:
7.829
on
May
29th
2013
7. ©
2010-‐2013
Prisma
IT
®
Why?
• Documentadon
• Cross
Browser
support
• Components
• Custom
jQuery
plugins
• Responsive
• LESS
• Open
Source
9. ©
2010-‐2013
Prisma
IT
®
GeCng
Started
• Download
– Compiled
– Source
– Customize
• File
Structure
• HTML
Template
• Examples
10. ©
2010-‐2013
Prisma
IT
®
Scaffolding
• Grid
system
– Fixed
– Fluid
• Layout
– Fixed
– Fluid
• Responsive
design
11. ©
2010-‐2013
Prisma
IT
®
Base
CSS
• Typography
• Code
• Tables
• Forms
• BuRons
• Images
• Icons
12. ©
2010-‐2013
Prisma
IT
®
Components
• Dropdowns
• BuRon
groups
• BuRon
dropdowns
• Navigadonal
tabs,
pills,
and
lists
• Navbar
• Breadcrumbs
• Paginadon
• Labels
&
Badges
• Page
headers
and
hero
unit
• Thumbnails
• Alerts
• Progress
bars
13. ©
2010-‐2013
Prisma
IT
®
jQuery
Plugins
• Transidons
• Modals
• Dropdowns
• ScrollSpy
• Togglable
tabs
• Tooldps
• Popovers
• Alert
messages
• BuRons
• Collapse
• Carousel
• Typeahead
• Affix
16. ©
2010-‐2013
Prisma
IT
®
Bootstrap
v3
• Almost
there!
• Switch
to
the
MIT
license
• Components
– List
groups
(new)
– Panels
(new
– Carousel
(redesign)
– Modals
(redesign
for
mobile
first)
17. ©
2010-‐2013
Prisma
IT
®
Bootstrap
v3
• Drop
legacy
code
– Drop
IE7/FF3x
support
endrely
• Improve
responsive
CSS
– Mobile
first,
all
CSS
in
one
file
– Use
the
@font-‐face
version
of
Glyphicons
18. ©
2010-‐2013
Prisma
IT
®
Bootstrap
v3
• Centralize
community
efforts
– New
GitHub
organizadon
– Strengthening
the
community
– Growing
the
team
• New
URLs
• And
more!
github.com/twiRer/bootstrap/pull/6342
19. ©
2010-‐2013
Prisma
IT
®
THE
BOOTSTRAP
ECOSYSTEM
Themes
Theme
Builders
Components
Tools
Even
more...
20. ©
2010-‐2013
Prisma
IT
®
Themes
• Bootswatch
bootswatch.com
• {wrap}bootstrap
wrapbootstrap.com
• Flat
UI
designmodo.github.io/Flat-‐UI/
• BootMetro
aozora.github.io/bootmetro/
• Geo
for
Bootstrap
divshot.github.io/geo-‐bootstrap/
21. ©
2010-‐2013
Prisma
IT
®
Themes
Builders
• Bootstrap
Customize
twiRer.github.io/bootstrap/customize.html
• StyleBootstrap.info
stylebootstrap.info
• Boostrap
Magic
pikock.github.io/bootstrap-‐magic/
• PaintStrap
paintstrap.com
22. ©
2010-‐2013
Prisma
IT
®
Components
• jQuery
UI
Bootstrap
addyosmani.github.io/jquery-‐ui-‐bootstrap/
• Datepicker
github.com/eternicode/bootstrap-‐datepicker
• Select2
ivaynberg.github.io/select2/
• X-‐editable
vitalets.github.io/x-‐editable/
23. ©
2010-‐2013
Prisma
IT
®
Components
• Bootstrap
Switch
larends.eu/switch/
• File
Uploader
blueimp.github.io/jQuery-‐File-‐Upload/
• Bootstro.js
clu3.github.io/bootstro.js/
24. ©
2010-‐2013
Prisma
IT
®
Tools
• Design
– Bootstrap
PSD
gui.repixdesign.com/#bootstrap
– Bootstrap
Fireworks
toolkit
fireworkstoolkits.com/toolkits/bootstrap-‐2/
• Content
Delivery
Network
– BootstrapCDN
bootstrapcdn.com
25. ©
2010-‐2013
Prisma
IT
®
Tools
• Snippets
– Bootsnipp
bootsnipp.com
• Prototyping
– Jetstrap
jetstrap.com
– Divshot
divshot.com
– Pingendo
pingendo.com
– Layoudt!
layoudt.com/
26. ©
2010-‐2013
Prisma
IT
®
Even
more...
• Bootsnipp
resources
list
bootsnipp.com/resources
• Bootstrap
Hero
resources
list
bootstraphero.com/the-‐big-‐badass-‐list-‐of-‐twiRer-‐bootstrap-‐resources
• TwiRer
Bootstrap
Web
Development
How-‐To
packtpub.com/twiRer-‐bootstrap-‐web-‐development/book
28. ©
2010-‐2013
Prisma
IT
®
Ready?
Bootstrap!
Go!
Guust
Nieuwenhuis
Scotch
on
the
Rocks
2013
Edinburgh,
Scotland