© 20102014 Prisma IT ® Ready? Bootstrap. Go! Guust Nieuwenhuis cf.Objec?ve() 2014 Minneapolis, MN
Ready? bootstrap. go! (cf objective 14 05-2014)
Sep 03, 2014
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
© 2010-‐2014 Prisma IT ®
Ready? Bootstrap. Go!
Guust Nieuwenhuis cf.Objec?ve() 2014 Minneapolis, MN
© 2010-‐2014 Prisma IT ®
About me
• Guust Nieuwenhuis • MD at Prisma IT Belgium
• CFML & Mura CMS Expert
© 2010-‐2014 Prisma IT ®
BOOTSTRAP?
What? Why?
© 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!)
© 2010-‐2014 Prisma IT ®
Some stats…
© 2010-‐2014 Prisma IT ®
Why?
• Cross Browser support • Responsive & Mobile First • LESS/SASS • Components • Custom jQuery plugins • Open Source • Documenta?on
© 2010-‐2014 Prisma IT ®
FEATURES
Get Started Scaffolding Base CSS
Components jQuery Plugins
© 2010-‐2014 Prisma IT ®
Ge=ng Started
• Download – Compiled – Source – Customize
• File Structure • Basic Template • Examples
© 2010-‐2014 Prisma IT ®
Grid System
• Grid op?ons • Responsive column resets • Offsebng columns • Nes?ng columns • Column ordering • LESS/SASS mixins and variables
© 2010-‐2014 Prisma IT ®
Base CSS
• Typography • Code • Tables • Forms • BuZons • Images • Helper classes • Responsive u?li?es
© 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
© 2010-‐2014 Prisma IT ®
jQuery Plugins
• Transi?ons • Modals • Dropdowns • ScrollSpy • Tab • Tool?ps
• Popovers • Alert • BuZon • Collapse • Carousel • Affix
© 2010-‐2014 Prisma IT ®
DEMO’S
Examples Build with
© 2010-‐2014 Prisma IT ®
THE BOOTSTRAP ECOSYSTEM
Themes Theme Builders
Components Tools
Even more...
© 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/
© 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
© 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/
© 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/
© 2010-‐2014 Prisma IT ®
Tools
• Design – Bootstrap PSD
store.repixdesign.com/freebies/
• Content Delivery Network – BootstrapCDN
bootstrapcdn.com
© 2010-‐2014 Prisma IT ®
Tools
• Snippets – Bootsnipp
bootsnipp.com
• Prototyping – Jetstrap
jetstrap.com
– Divshot divshot.com
– Pingendo pingendo.com
– Layou?t! layou?t.com
© 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
© 2010-‐2014 Prisma IT ®
CONTACT ME
g.nieuwenhuis@prisma-‐it.com @lagaffe
www.lagaffe.be www.prisma-‐it.com
© 2010-‐2014 Prisma IT ®
Ready? Bootstrap. Go!
Guust Nieuwenhuis cf.Objec?ve() 2014 Minneapolis, MN
Related Documents
