up and running with bootstrap
TRANSCRIPT
� �
Up & Running with Bootstrap
Jen Kramer • Boston PHP • February 11, 2015
www.jenkramer.org • [email protected] Photo back story
� Build a separate mobile-compatible website or mobile app (or both)
� Responsive Design � A comparison of
methods for building mobile-optimized websites
www.jenkramer.org • [email protected]
� Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)
� www.alistapart.com/articles/responsive-web-design/
www.jenkramer.org • [email protected]
� Images should change size, based on screen resolution o Load a big image and let it
scale (not good) o Server-side (good) o Client-side: Load several
images and display the one right for this resolution (not good)
o Client-side: let JavaScript decide (better)
� Browser reports screen resolution
� Based on current width, serve a stylesheet with layout for that width
� No JavaScript involved
� Bootstrap is a responsive design framework for building web sites and web applications.
� It is the most popular project in GitHub. June 2014: 73K stars, 27K forks
http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
www.jenkramer.org • [email protected]
� A fully functional grid system with 4 different sizes.
� Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, etc.
� CSS customization through LESS CSS or Sass
� jQuery-driven components include dropdown menus, tooltips, popovers, alerts, image carousel, accordion panels, etc.
� Optional icon font for incorporating vector images, distributed with Bootstrap, 180 icons
� Distributed under MIT license (Apache 2.0 prior to 3.1.0)
www.jenkramer.org • [email protected]
www.jenkramer.org • [email protected]
getbootstrap.com foundation.zurb.com
22 Best Responsive CSS Frameworks for Web Design
� Joomla (open source CMS) integrated Bootstrap into version 3.
� Bootstrap unofficial showcase � Love Bootstrap � Bootstrap Expo
� A few big names: o State of Kentucky o code.NASA (with WordPress) o Michael’s craft store o Fender guitars o StumbleUpon o Salvation Army (Midwest) o Medicare.gov o Disqus o Delicious
www.jenkramer.org • [email protected]
� Started by Mark Otto and Jacob Thornton, while working at Twitter, as internal tool
� Released Bootstrap in 2011 � Otto & Thornton left Twitter
in 2012
� Otto is now in charge of the open source project and is adding core team members.
• bootstrap.css • bootstrap.min.css • bootstrap-theme.css • bootstrap-theme.min.css
• glyphicons-halflings-regular.eot • glyphicons-halflings-regular.svg • glyphicons-halflings-regular.ttf • glyphicons-halflings-regular.woff
• bootstrap.js • bootstrap.min.js • Download/link to jquery
Internet Explorer 9-11 natively, IE 8 with respond.js
� Some effort put into accessibility improvements
� Includes the Aria codes, screen reader only styles
� Joomla has pushed for accessibility since Bootstrap is incorporated in the version 3 CMS
� 4 grid system: o Extra small always
stays horizontal o Small, medium, large
grids stack after breakpoint
� LESS CSS
� Not much LESS documentation on Bootstrap site
� Less of an expectation that you will work with LESS
� There is also a direct Sass port from LESS available for use.
� You want to build a responsive front-end quickly.
� You need lots of styling out of the box.
� You love LESS CSS.
� You love open source.
� You hate semicolons in your JavaScript.
www.jenkramer.org • [email protected]
Jen Kramer Arlington, MA Phone: 802-257-2657 [email protected] www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen
www.jenkramer.org • [email protected]
Slides available at www.slideshare.net/jen4web lynda.com 7 day free pass: www.lynda.com/freepass/jkramer