1. ©
2010-­‐2014
Prisma
IT
®
Ready?
Bootstrap.
Go!
Guust
Nieuwenhuis
cf.Objec?ve()
2014
Minneapolis,
MN

2. ©
2010-­‐2014
Prisma
IT
®
About
me
• Guust
Nieuwenhuis
• MD
at
Prisma
IT
Belgium
• CFML
&
Mura
CMS
Expert

3. ©
2010-­‐2014
Prisma
IT
®
BOOTSTRAP?
What?
Why?

4. ©
2010-­‐2014
Prisma
IT
®
What?
• Web
UI
Framework
– CSS,
images,
icons,
JavaScript
• Started
at
TwiZer
– By
nerds
(@mdo
and
@fat)
• Open
Source
– MIT
– For
nerds
(you
and
me!)

5. ©
2010-­‐2014
Prisma
IT
®
Some
stats…

6. ©
2010-­‐2014
Prisma
IT
®
Why?
• Cross
Browser
support
• Responsive
&
Mobile
First
• LESS/SASS
• Components
• Custom
jQuery
plugins
• Open
Source
• Documenta?on

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

8. ©
2010-­‐2014
Prisma
IT
®
Ge=ng
Started
• Download
– Compiled
– Source
– Customize
• File
Structure
• Basic
Template
• Examples

9. ©
2010-­‐2014
Prisma
IT
®
Grid
System
• Grid
op?ons
• Responsive
column
resets
• Offsebng
columns
• Nes?ng
columns
• Column
ordering
• LESS/SASS
mixins
and
variables

10. ©
2010-­‐2014
Prisma
IT
®
Base
CSS
• Typography
• Code
• Tables
• Forms
• BuZons
• Images
• Helper
classes
• Responsive
u?li?es

11. ©
2010-­‐2014
Prisma
IT
®
Components
• Glyphicons
• Dropdowns
• BuZon
groups
• BuZon
dropdowns
• Navs
• Navbar
• Breadcrumbs
• Pagina?on
• Labels
• Badges
• Jumbotron
• Page
header
• Thumbnails
• Alerts
• Progress
bars
• Media
object
• List
group
• Panels
• Wells

12. ©
2010-­‐2014
Prisma
IT
®
jQuery
Plugins
• Transi?ons
• Modals
• Dropdowns
• ScrollSpy
• Tab
• Tool?ps
• Popovers
• Alert
• BuZon
• Collapse
• Carousel
• Affix

13. ©
2010-­‐2014
Prisma
IT
®
DEMO’S
Examples
Build
with

14. ©
2010-­‐2014
Prisma
IT
®
THE
BOOTSTRAP
ECOSYSTEM
Themes
Theme
Builders
Components
Tools
Even
more...

15. ©
2010-­‐2014
Prisma
IT
®
Themes
• Bootswatch
bootswatch.com
• {wrap}bootstrap
wrapbootstrap.com
• Flat
UI
designmodo.github.io/Flat-­‐UI/
• Geo
for
Bootstrap
code.divshot.com/geo-­‐bootstrap/

16. ©
2010-­‐2014
Prisma
IT
®
Themes
Builders
• Bootstrap
Customize
getbootstrap.com/customize/
• StyleBootstrap.info
stylebootstrap.info
• Boostrap
Magic
pikock.github.io/bootstrap-­‐magic/
• PaintStrap
paintstrap.com

17. ©
2010-­‐2014
Prisma
IT
®
Components
• jQuery
UI
Bootstrap
github.com/jquery-­‐ui-­‐bootstrap/jquery-­‐ui-­‐bootstrap/
• Datepicker
github.com/eternicode/bootstrap-­‐datepicker/
• Select2
ivaynberg.github.io/select2/
• X-­‐editable
vitalets.github.io/x-­‐editable/

18. ©
2010-­‐2014
Prisma
IT
®
Components
• Bootstrap
Data
Table
github.com/jeffdupont/bootstrap-­‐data-­‐table
• Bootstrap
Switch
bootstrap-­‐switch.org
• File
Uploader
blueimp.github.io/jQuery-­‐File-­‐Upload/
• Bootstro.js
clu3.github.io/bootstro.js/

19. ©
2010-­‐2014
Prisma
IT
®
Tools
• Design
– Bootstrap
PSD
store.repixdesign.com/freebies/
• Content
Delivery
Network
– BootstrapCDN
bootstrapcdn.com

20. ©
2010-­‐2014
Prisma
IT
®
Tools
• Snippets
– Bootsnipp
bootsnipp.com
• Prototyping
– Jetstrap
jetstrap.com
– Divshot
divshot.com
– Pingendo
pingendo.com
– Layou?t!
layou?t.com

21. ©
2010-­‐2014
Prisma
IT
®
Even
more...
• Bootsnipp
resources
list
bootsnipp.com/resources
• Bootstrap
Hero
resources
list
bootstraphero.com/the-­‐big-­‐badass-­‐list-­‐of-­‐twiZer-­‐bootstrap-­‐resources

22. ©
2010-­‐2014
Prisma
IT
®
CONTACT
ME
g.nieuwenhuis@prisma-­‐it.com
@lagaffe
www.lagaffe.be
www.prisma-­‐it.com

23. ©
2010-­‐2014
Prisma
IT
®
Ready?
Bootstrap.
Go!
Guust
Nieuwenhuis
cf.Objec?ve()
2014
Minneapolis,
MN