Bootstrap Fundamentals

534 views

Published on

For the National Association of Government Web Professionals.

Published in: Internet
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
534
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Bootstrap Fundamentals

  1. 1. Bootstrap Fundamentals Joseph Labrecque | NAGW | March 17th 2016
  2. 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. 3. Introducing Bootstrap What it is and where to get it
  4. 4. What is Bootstrap? Skeletal framework Responsive Web Design Mobile-first approach Use only grids/layout if desired Rich component set Themable Customizable
  5. 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. 6. DEMONSTRATION Exploring Bootstrap
  7. 7. Using Bootstrap Setting up Bootstrap and using it in a project
  8. 8. Bootstrap Setup Integrate files into project Add both the CSS and JavaScript Don’t forget jQuery! Write Bootstrap …THAT’S IT!
  9. 9. DEMONSTRATION Configuring Bootstrap
  10. 10. Customizing Bootstrap Themes, SASS, and CSS overrides
  11. 11. Bootstrap Themes
  12. 12. CSS Preprocessor: SASS Variables and logic Compiles SCSS into CSS Ruby Tools + Compilers IntelliJ IDEA
  13. 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. 14. DEMONSTRATION Customizing Bootstrap
  15. 15. Wrapping Up Recent Publications
  16. 16. Adobe Animate CC: First Look LYNDA.COM/JOSEPHLABRECQUE
  17. 17. Animate CC Game Development TRAINSIMPLE.COM/COURSEDETAILUSER.ASPX?ID=228
  18. 18. Learn Adobe Animate CC for Interactive Media AMAZON.COM/AUTHOR/JOSEPHLABRECQUE
  19. 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

×