This document provides an introduction and overview of Bootstrap, an open-source front-end framework for developing responsive, mobile-first web sites and apps. It discusses what Bootstrap is, its mobile-first approach, rich component set, theming and customization options. It also demonstrates how to set up and configure Bootstrap, customize it using SASS and CSS overrides, and highlights some of the speaker's recent publications.

1. Bootstrap
Fundamentals
Joseph Labrecque | NAGW | March 17th 2016

2. Joseph Labrecque
Senior Interactive Software Engineer
Adjunct Faculty
University of Denver
Principal and Sole Proprietor
Fractured Vision Media, LLC
Adobe Education Leader
Adobe Community Professional
Adobe Systems, Inc.
Apache Flex Committer
Apache Software Foundation
Author
Lynda.com, Train Simple, Adobe Press, Peachpit,
Brainbuffet, Packt, O’Reilly, video2brain

3. Introducing Bootstrap
What it is and where to get it

4. What is Bootstrap?
Skeletal framework
Responsive Web Design
Mobile-first approach
Use only grids/layout if desired
Rich component set
Themable
Customizable

5. Bootstrap 3 | Bootstrap 4
Bootstrap 3
Stable release!
Utilizes LESS
Integrated Glyphicons
Normalize.css
Bootstrap 4
Still in alpha…
Utilizes SASS
No Icons (use Font Awesome)
Reboot
Supports Flexbox
Wide CSS variables support

6. DEMONSTRATION
Exploring Bootstrap

7. Using Bootstrap
Setting up Bootstrap and using it in a project

8. Bootstrap Setup
Integrate files into project
Add both the CSS and JavaScript
Don’t forget jQuery!
Write Bootstrap
…THAT’S IT!

9. DEMONSTRATION
Configuring Bootstrap

10. Customizing Bootstrap
Themes, SASS, and CSS overrides

11. Bootstrap Themes

12. CSS Preprocessor: SASS
Variables and logic
Compiles SCSS into CSS
Ruby
Tools + Compilers
IntelliJ IDEA

13. Overriding Bootstrap Classes
Experiment with temporary overrides
Browser web inspect – dev tools
Have a separate stylesheet for overrides
If using SASS – try that first
Okay to do both SASS and overrides

14. DEMONSTRATION
Customizing Bootstrap

15. Wrapping Up
Recent Publications

16. Adobe Animate CC: First Look
LYNDA.COM/JOSEPHLABRECQUE

17. Animate CC Game Development
TRAINSIMPLE.COM/COURSEDETAILUSER.ASPX?ID=228

18. Learn Adobe Animate CC for Interactive Media
AMAZON.COM/AUTHOR/JOSEPHLABRECQUE

19. Thank You
Email: Joseph.Labrecque@du.edu
Web: JosephLabrecque.com
Blog: inflagrantedelicto.memoryspiral.com
Twitter: twitter.com/JosephLabrecque
LinkedIn: linkedin.com/in/JosephLabrecque
Lynda.com: lynda.com/JosephLabrecque
Amazon: amazon.com/author/JosephLabrecque