Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap Fundamentals


Published on

For the National Association of Government Web Professionals.

Published in: Internet
  • If u need a hand in making your writing assignments - visit ⇒ ⇐ for more detailed information.
    Are you sure you want to  Yes  No
    Your message goes here
  • Great sum up. Thanks man!
    Are you sure you want to  Yes  No
    Your message goes here

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, 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: Web: Blog: Twitter: LinkedIn: Amazon: