Bootstrap Fluent 2014
-
Upload
fernando-guerra -
Category
Documents
-
view
218 -
download
1
description
Transcript of Bootstrap Fluent 2014
![Page 1: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/1.jpg)
Jen Kramer • O’Reilly Fluent Conference 2014 • March 11, 2014
![Page 2: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/2.jpg)
Quick PowerPoint to provide background on Bootstrap Code a website!
![Page 3: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/3.jpg)
Twitter Bootstrap is a responsive design framework for building web sites and web applications.
It is the most popular project in GitHub and is used by NASA and MSNBC among others.
wikipedia.org/wiki/Twitter_Bootstrap
www.jenkramer.org • [email protected]
![Page 4: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/4.jpg)
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 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 (prior to 3.1, was Apache 2,
copyright 2013 Twitter)
www.jenkramer.org • [email protected]
![Page 5: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/5.jpg)
getbootstrap.com foundation.zurb.com
www.jenkramer.org • [email protected]
20 Exceptional CSS Boilerplates and Frameworks
![Page 6: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/6.jpg)
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]
![Page 7: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/7.jpg)
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.
![Page 8: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/8.jpg)
Latest versions of:
Chrome (Mac, Windows, iOS, and Android)
Safari (Mac and iOS only, as Windows has more or less been discontinued)
Firefox (Mac, Windows)
Opera (Mac, Windows)
IE 9 and 10. IE 8 supported with respond.js
![Page 9: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/9.jpg)
![Page 10: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/10.jpg)
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
![Page 11: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/11.jpg)
4 grid system: o Extra small always stays
horizontal o Small, medium, large grids
stack after breakpoint
![Page 12: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/12.jpg)
![Page 13: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/13.jpg)
LESS CSS, and now a Sass option as well!
Not much LESS/Sass documentation on Bootstrap site
Less of an expectation that you will work with LESS/Sass
![Page 14: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/14.jpg)
![Page 15: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/15.jpg)
![Page 16: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/16.jpg)
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]
![Page 17: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/17.jpg)
Fruit is Good, in 10 Easy Steps
![Page 18: Bootstrap Fluent 2014](https://reader034.fdocuments.us/reader034/viewer/2022051821/5695d4ea1a28ab9b02a34979/html5/thumbnails/18.jpg)
Jen Kramer Waltham, 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