Bootstrap (www.getbootstrap.com) is a sleek, intuitive, and powerful open source front-end framework for faster and easier web development. After it's initial release in August 2011, it quick gained popularity in the web development community and currently it's the most popular project on GitHub. Numerous projects, components and tools are build around it and both small and big companies are using it. Get introduced to Bootstrap and the ecosystem around it. Your front-end development will never be the same again!

1. ©
2010-­‐2013
Prisma
IT
®
Ready?
Bootstrap!
Go!
Guust
Nieuwenhuis
Scotch
on
the
Rocks
2013
Edinburgh,
Scotland

2. ©
2010-­‐2013
Prisma
IT
®
About
me
• Guust
Nieuwenhuis
• MD
at
Prisma
IT
Belgium

3. ©
2010-­‐2013
Prisma
IT
®
I
have
to
confess…

4. ©
2010-­‐2013
Prisma
IT
®
…
I
CAN’T
DESIGN!
I
have
to
confess…

5. ©
2010-­‐2013
Prisma
IT
®
BOOTSTRAP?
What?
Why?

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

8. ©
2010-­‐2013
Prisma
IT
®
FEATURES
Get
Started
Scaffolding
Base
CSS
Components
jQuery
Plugins

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

14. ©
2010-­‐2013
Prisma
IT
®
DEMO’S
Examples
Build
with

15. ©
2010-­‐2013
Prisma
IT
®
THE
FUTURE
OF
BOOTSTRAP
Bootstrap
v3

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

27. ©
2010-­‐2013
Prisma
IT
®
CONTACT
ME
g.nieuwenhuis@prisma-­‐it.com
@lagaffe
www.prisma-­‐it.com

28. ©
2010-­‐2013
Prisma
IT
®
Ready?
Bootstrap!
Go!
Guust
Nieuwenhuis
Scotch
on
the
Rocks
2013
Edinburgh,
Scotland