up and running with bootstrap 4

UP & RUNNING WITH BOOTSTRAP 4

JEN KRAMER • O’REILLY • HARVARD UNIV EXTENSION SCHOOL

I T ’ S A L L A B O U T M O B I L E

Photo back story

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

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/

G R I D - B A S E D L AY O U T

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)

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

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

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.

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

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

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

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

B R O W S E R S U P P O R T

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

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

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

S T Y L I N G

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

J AVA S C R I P T Y W I D G E T S

D O Y O U L O V E S E M I C O L O N S ?

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/

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

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.

Q U E S T I O N S ?

Jen Kramer

Arlington, MA

Phone: 802-257-2657

jen@jenkramer.org

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/