Weitere ähnliche Inhalte
Ähnlich wie Ready? bootstrap. go! (cf objective 14 05-2014)
Ähnlich wie Ready? bootstrap. go! (cf objective 14 05-2014) (20)
Mehr von ColdFusionConference
Mehr von ColdFusionConference (20)
Kürzlich hochgeladen (20)
Ready? bootstrap. go! (cf objective 14 05-2014)
- 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
- 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!)
- 6. ©
2010-‐2014
Prisma
IT
®
Why?
• Cross
Browser
support
• Responsive
&
Mobile
First
• LESS/SASS
• Components
• Custom
jQuery
plugins
• Open
Source
• Documenta?on
- 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
- 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