up and running with bootstrap 4
TRANSCRIPT
![Page 1: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/1.jpg)
UP & RUNNING WITH BOOTSTRAP 4
JEN KRAMER • O’REILLY • HARVARD UNIV EXTENSION SCHOOL
![Page 2: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/2.jpg)
I T ’ S A L L A B O U T M O B I L E
Photo back story
![Page 3: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/3.jpg)
T W O ( B I G ) A P P R O A C H E S T O M O B I L E
• Build a separate mobile-compatible website (“m.”) or mobile app (or both)
• Responsive Design
• Comparing responsive design and “m.” websites
![Page 4: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/4.jpg)
R E S P O N S I V E D E S I G N
• Defined by three characteristics
• Flexible grid-based layout
• Images that resize
• Media queries (CSS3)
• www.alistapart.com/articles/responsive-web-design/
![Page 5: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/5.jpg)
G R I D - B A S E D L AY O U T
![Page 6: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/6.jpg)
I M A G E S T H AT R E S I Z E
• Images should change size, based on screen resolution
• Load a big image and let it scale (not good)
• Server-side (good)
• Client-side: Load several images and display the one right for this resolution (not good)
• Client-side: let JavaScript decide (better)
![Page 7: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/7.jpg)
C S S 3 M E D I A Q U E R I E S
• Browser reports screen resolution
• Based on current width, serve a stylesheet with layout for that width
• No JavaScript involved
![Page 8: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/8.jpg)
W H AT I S B O O T S T R A P ?
• Bootstrap is a free and open source responsive design framework for building web sites and web applications.
• It is the most popular project in GitHub. Feb 2016: 93K stars, 40K forks
![Page 9: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/9.jpg)
W H AT I S B O O T S T R A P 4 ?
• A fully functional grid system with 5 different sizes and 4 breakpoints.
• Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, etc.
• Sizing now managed in ems/rems, not pixels.
• CSS customization through Sass (LESS support dropped!)
• jQuery-driven components include dropdown menus, tooltips, popovers, alerts, image carousel, accordion panels, etc.
• Distributed under MIT license, © 2015 Twitter.
![Page 10: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/10.jpg)
B O O T S T R A P C O M P E T I T O R S
v4-alpha.getbootstrap.com foundation.zurb.com
22 Best Responsive CSS Frameworks for Web Design
![Page 11: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/11.jpg)
W H O U S E S B O O T S T R A P ?• Joomla (open source CMS)
integrated Bootstrap into version 3.
• Bootstrap unofficial showcase
• Love Bootstrap
• Bootstrap Expo
• A few big names:
• State of Kentucky
• NASA
• University of Washington
• FIFA
• Frog Design
• Visual Studio Code (Microsoft!)
• Coursera
![Page 12: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/12.jpg)
C R E AT I O N S T O R Y
• Started by Mark Otto and Jacob Thornton, while working at Twitter, as internal tool
• Released Bootstrap in 2011
• Otto & Thornton left Twitter in 2012
• Core team consists of Otto, Thornton, and 7 other members
![Page 13: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/13.jpg)
B O O T S T R A P 4 F I L E S T R U C T U R E
*Still requires jQuery
![Page 14: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/14.jpg)
B R O W S E R S U P P O R T
![Page 15: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/15.jpg)
B R O W S E R S U P P O R T
• IE 9: Mostly. Less support with some CSS3 properties.
• IE 8: No support. Use Bootstrap 3. Alternatively, add some backfills: respond.js, HTML5shiv, rem unit polyfill
• IE 10/Windows Phone 8 before update 3 needs help differentiating device width from viewport width
• More about browser support
• Other browser bugs
![Page 16: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/16.jpg)
![Page 17: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/17.jpg)
A C C E S S I B I L I T Y
• Nothing new seems to have been added in this version
• Includes the Aria codes, screen reader only styles, and advice on how to make web pages more accessible
![Page 18: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/18.jpg)
G R I D S Y S T E M• 5 grid system:
• Extra small always stays horizontal
• Small, medium, large, extra large grids stack after breakpoint
• Grid system built mobile-first, with em units
• Flexbox layout option
![Page 19: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/19.jpg)
S T Y L I N G
![Page 20: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/20.jpg)
C S S P R E P R O C E S S I N G
• Sass rules everything
• No separate bootstrap-theme.css file – this is integrated in Sass as variables
• Alternative Flexbox grid system available as a variable
• Sass completely rewritten – not a port from LESS anymore
![Page 21: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/21.jpg)
J AVA S C R I P T Y W I D G E T S
![Page 22: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/22.jpg)
D O Y O U L O V E S E M I C O L O N S ?
![Page 23: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/23.jpg)
B O O T S T R A P 3 V S 4
• Move from LESS to Sass (specifically SCSS)
• Move from px to rem/em, and font size from 14px to 16 px
• New grid breakpoint for < 480 px
• Move separate bootstrap-theme.css elements to Sass variables
• Panels, thumbnails, and wells become cards
• No more glyphicons or Affix component
• border-box sizing instead of content-box
• And a zillion other changes: http://v4-alpha.getbootstrap.com/migration/
![Page 24: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/24.jpg)
B O O T S T R A P 4 A L P H A V I D E O
• About breakpoints • Cards • Sass integration • Utility classes • FREE on oreilly.com
![Page 25: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/25.jpg)
W H E N I S B O O T S T R A P A W E S O M E ?
• You want to build a responsive front-end quickly.
• You need lots of styling out of the box.
• You love open source.
• You want to build with an industry leader.
![Page 26: Up and Running with Bootstrap 4](https://reader033.vdocuments.site/reader033/viewer/2022042706/58a8c1941a28ab53138b4a0b/html5/thumbnails/26.jpg)
Q U E S T I O N S ?
Jen Kramer
Arlington, MA
Phone: 802-257-2657
www.jenkramer.org
Twitter: @jen4web
Facebook: facebook.com/webdesignjen
Slides available at www.slideshare.net/jen4web
Free 10-day pass to Safari: www.safaribooksonline.com/register/