Up and Running with Bootstrap 4
-
Upload
jen-kramer -
Category
Technology
-
view
10.218 -
download
1
Transcript of 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
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/