Notes for Responsive Web Design By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 Slides: https://granneman.com/downloads/web-dev/Responsive-Web-Design.pdf Notes: https://granneman.com/downloads/web-dev/Responsive-Web-Design.txt ## Slide 3 https://www.granneman.com/presentations/all-presentations ## Slide 5 Marcotte, Ethan. “Responsive Web Design”. A List Apart, 25 May 2010, http://alistapart.com/article/responsive-web-design. Accessed 15 May 2014. ## Slide 6 Emphasis added Wikipedia contributors. “Responsive web design”. Wikipedia, The Free Encyclopedia, 8 July 2022, https://en.wikipedia.org/wiki/Responsive_web_design. Accessed 24 Aug. 2022. ## Slide 7 leonardo255. “Modern Computer, Laptop, Mobile Phone And Digital Tablet Pc”. Can Stock Photo, https://www.canstockphoto.com/modern-computer-laptop-mobile-phone-56268057.html. Accessed 11 May 2023. Licensed from Can Stock Photo on 11 May 2023. Credit: © Can Stock Photo / leonardo255 ## Slide 8 “Home | Saint Louis Zoo”. Saint Louis Zoo, 20 Apr 2016, http://www.stlzoo.org. Accessed 20 Apr 2016. ## Slide 9 The Saint Louis Zoo, before becoming responsive “Home | Saint Louis Zoo”. Saint Louis Zoo, 2 Feb 2014, https://stlzoo.org. Accessed 4 Feb 2014. ## Slide 10 The Saint Louis Zoo, after becoming responsive “Home | Saint Louis Zoo”. Saint Louis Zoo, 2 Feb 2014, https://stlzoo.org. Accessed 4 Feb 2014. ## Slide 15 MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023. ## Slide 18 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. ## Slide 19 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media Web. 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023. ## Slide 20 Deveria, Alexis [@Fyrd]. “CSS at-rule: @media”. Can I use…, , https://caniuse.com/mdn-css_at-rules_media. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. Deveria, Alexis [@Fyrd]. “CSS3 Media Queries”. Can I use…, , https://caniuse.com/css-mediaqueries. Accessed 18 Apr 2023. ## Slide 26 MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023. ## Slide 31 MDN contributors. “Introducing the CSS Cascade”. MDN Web Docs, 15 Apr 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade. Accessed 18 Apr 2023. ## Slide 34 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. ## Slide 35 Browsers do not support speech Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. ## Slide 36 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. ## Slide 37 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. ## Slide 43 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Accessed 18 Apr 2023. ## Slide 44 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Accessed 18 Apr 2023. ## Slide 47 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Accessed 18 Apr 2023. ## Slide 48 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Accessed 18 Apr 2023. ## Slide 51 Confusing, because min is bigger than & max is smaller than! Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. ## Slide 53 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. ## Slide 54 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. ## Slide 55 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023. ## Slide 56 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. ## Slide 58 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. ## Slide 59 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. ## Slide 60 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#mf-dimensions. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. ## Slide 74 https://en.wikipedia.org/wiki/File:Grid2aib.svg ## Slide 75 https://en.wikipedia.org/wiki/File:Grid2aib.svg, modified to remove the white lines ## Slide 76 Vinh, Khoi. Ordering Disorder: Grid Principles for Interaction Design. Berkeley, CA: New Riders (2010). ## Slide 78 Wikipedia contributors. “Rule of thirds”. Wikipedia, The Free Encyclopedia, 1 Nov. 2023, https://en.wikipedia.org/wiki/Rule_of_thirds. Accessed 14 Nov. 2023. ## Slide 79 Wikipedia contributors. “Rule of thirds”. Wikipedia, The Free Encyclopedia, 1 Nov. 2023, https://en.wikipedia.org/wiki/Rule_of_thirds. Accessed 14 Nov. 2023. ## Slide 81 Image aligned according to Rule of Thirds User:Moondigger. “File:Rivertree thirds md.gif”. Wikipedia, The Free Encyclopedia, 23 Aug 2006, https://en.wikipedia.org/wiki/File:Rivertree_thirds_md.gif. Accessed 14 Nov 2023. ## Slide 82 Image aligned according to Rule of Thirds User:Moondigger. “File:Rivertree thirds md.gif”. Wikipedia, The Free Encyclopedia, 23 Aug 2006, https://en.wikipedia.org/wiki/File:Rivertree_thirds_md.gif. Accessed 14 Nov 2023. ## Slide 83 Image cropped without & with the Rule of Thirds Pir6mon & Teeks99. “File:RuleOfThirds-SideBySide.gif”. Wikipedia, The Free Encyclopedia, 4 Dec 2010, https://en.wikipedia.org/wiki/File:RuleOfThirds-SideBySide.gif. Accessed 14 Nov 2023. ## Slide 84 Image cropped without & with the Rule of Thirds Pir6mon & Teeks99. “File:RuleOfThirds-SideBySide.gif”. Wikipedia, The Free Encyclopedia, 4 Dec 2010, https://en.wikipedia.org/wiki/File:RuleOfThirds-SideBySide.gif. Accessed 14 Nov 2023. ## Slide 89 Cropped product photo of LEGO Marvel Infinity Gauntlet Set 76191 Collectible Thanos Glove with Infinity Stones, Building Set, Avengers Gift Idea for Adults and Teens, Model Kits for Decoration and Display, showing only the glove. LEGO. Amazon, https://www.amazon.com/LEGO-Infinity-Gauntlet-Collectible-Building/dp/B08YP94QJN. Accessed 22 July 2025. Fair use. Modified by converting to the WebP format & cropping to show only the glove. ## Slide 90 Cropped product photo of LEGO Marvel Infinity Gauntlet Set 76191 Collectible Thanos Glove with Infinity Stones, Building Set, Avengers Gift Idea for Adults and Teens, Model Kits for Decoration and Display, showing only the glove. LEGO. Amazon, https://www.amazon.com/LEGO-Infinity-Gauntlet-Collectible-Building/dp/B08YP94QJN. Accessed 22 July 2025. Fair use. Modified by converting to the WebP format & cropping to show only the glove. LEGO® Marvel™ Infinity Gauntlet Building Instructions. Set 76191, 18+, 590 pieces, 2021, p. 62. LEGO, https://www.lego.com/en-us/service/building-instructions/76191. Accessed 22 July 2025. Fair use. Modified by converting to the WebP format. ## Slide 91 Cropped product photo of LEGO Marvel Infinity Gauntlet Set 76191 Collectible Thanos Glove with Infinity Stones, Building Set, Avengers Gift Idea for Adults and Teens, Model Kits for Decoration and Display, showing only the glove. LEGO. Amazon, https://www.amazon.com/LEGO-Infinity-Gauntlet-Collectible-Building/dp/B08YP94QJN. Accessed 22 July 2025. Fair use. Modified by converting to the WebP format & cropping to show only the glove. Product photo of 1976 LEGO Universal Building Set (110), showing box lid with illustrated builds and open tray of bricks. Photo by eBay user waltweba. eBay, https://www.ebay.com/p/13053422018?iid=235777771875. Accessed 22 July 2025. Fair use. Modified by removing the background and enlarging the image using AI tools in Pixelmator Pro. ## Slide 92 Wikipedia contributors. “Software framework”. Wikipedia, The Free Encyclopedia, 11 Apr. 2025, https://en.wikipedia.org/wiki/Software_framework. Accessed 17 Apr. 2025. ## Slide 93 Wikipedia contributors. “List of Java frameworks”. Wikipedia, The Free Encyclopedia, 10 Dec. 2024, https://en.wikipedia.org/wiki/List_of_Java_frameworks. Accessed 17 Apr. 2025. Wikipedia contributors. “Qt (software)”. Wikipedia, The Free Encyclopedia, 16 Apr. 2025, https://en.wikipedia.org/wiki/Qt_%28software%29. Accessed 24 Apr. 2025. Rust Wikipedia contributors. “Rust (programming language)”. Wikipedia, The Free Encyclopedia, 6 Apr. 2025, https://en.wikipedia.org/wiki/Rust_%28programming_language%29. Accessed 24 Apr. 2025. Wikipedia contributors. “Rocket (web framework)”. Wikipedia, The Free Encyclopedia, 30 Sep. 2024, https://en.wikipedia.org/wiki/Rocket_%28web_framework%29. Accessed 24 Apr. 2025. Wikipedia contributors. “Python (programming language)”. Wikipedia, The Free Encyclopedia, 21 Apr. 2025, https://en.wikipedia.org/wiki/Python_%28programming_language%29. Accessed 22 Apr. 2025. Wikipedia contributors. “PHP”. Wikipedia, The Free Encyclopedia, 21 Apr. 2025, https://en.wikipedia.org/wiki/PHP. Accessed 22 Apr. 2025. JavaScript Wikipedia contributors. “React (software)”. Wikipedia, The Free Encyclopedia, 15 Apr. 2025, https://en.wikipedia.org/wiki/React_%28software%29. Accessed 24 Apr. 2025. Wikipedia contributors. “Vue.js”. Wikipedia, The Free Encyclopedia, 31 Mar. 2025, https://en.wikipedia.org/wiki/Vue.js. Accessed 24 Apr. 2025. Wikipedia contributors. “Angular (web framework)”. Wikipedia, The Free Encyclopedia, 16 Apr. 2025, https://en.wikipedia.org/wiki/Angular_%28web_framework%29. Accessed 24 Apr. 2025. Wikipedia contributors. “Express.js”. Wikipedia, The Free Encyclopedia, 11 Apr. 2025, https://en.wikipedia.org/wiki/Express.js. Accessed 24 Apr. 2025. Wikipedia contributors. “Svelte”. Wikipedia, The Free Encyclopedia, 23 Apr. 2025, https://en.wikipedia.org/wiki/Svelte. Accessed 24 Apr. 2025. Wikipedia contributors. “Web framework”. Wikipedia, The Free Encyclopedia, 22 Feb. 2025, https://en.wikipedia.org/wiki/Web_framework. Accessed 22 Apr. 2025. Wikipedia contributors. “Comparison of server-side web frameworks”. Wikipedia, The Free Encyclopedia, 31 Mar. 2025, https://en.wikipedia.org/wiki/Comparison_of_server-side_web_frameworks. Accessed 22 Apr. 2025. ## Slide 94 Wikipedia contributors. “CSS framework”. Wikipedia, The Free Encyclopedia, 22 May 2024, https://en.wikipedia.org/wiki/CSS_framework. Accessed 17 Apr. 2025. ## Slide 95 https://en.wikipedia.org/wiki/Software_framework ## Slide 97 Wikipedia contributors. “CSS framework”. Wikipedia, The Free Encyclopedia, 17 Jan. 2023, https://en.wikipedia.org/wiki/CSS_framework. Accessed 20 Apr. 2023. ## Slide 98 Déramond, Julien (julien-deramond). “Contents”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/getting-started/contents/. Accessed 20 July 2025. “Generate the complete default CSS output that Tailwind CSS v4 produces when you run npx tailwindcss -i input.css -o output.css with an input file containing only @import ‘tailwindcss’;.” Prompt. Claude, Claude 3 Opus, Anthropic, 16 July 2025, https://claude.ai/public/artifacts/eea08b59-9b2a-40e6-88c9-7e933fbedfbe. Accessed 16 July 2025. Workman, Joe et al. “Foundation”. Foundation, 27 Sep. 2024, https://get.foundation. Accessed 23 Apr. 2025. ## Slide 101 Déramond, Julien, et al. “Cards”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/components/card/. Accessed 20 July 2025. ## Slide 102 Déramond, Julien, et al. “Cards”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/components/card/. Accessed 20 July 2025. ## Slide 103 Déramond, Julien, et al. “Cards”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/components/card/. Accessed 20 July 2025. ## Slide 104 Déramond, Julien, et al. “Cards”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/components/card/. Accessed 20 July 2025. ## Slide 105 Pittman, Jordan (thecrypticace). “Rapidly build modern websites without ever leaving your HTML”. Tailwind CSS, 18 July 2025, https://tailwindcss.com. Accessed 20 July 2025. ## Slide 106 Pittman, Jordan (thecrypticace). “Rapidly build modern websites without ever leaving your HTML”. Tailwind CSS, 18 July 2025, https://tailwindcss.com. Accessed 20 July 2025. ## Slide 107 Pittman, Jordan (thecrypticace). “Rapidly build modern websites without ever leaving your HTML”. Tailwind CSS, 18 July 2025, https://tailwindcss.com. Accessed 20 July 2025. ## Slide 108 “Cards”. Official Tailwind UI Components, https://tailwindcss.com/plus/ui-blocks/application-ui/layout/cards. Accessed 20 July 2025. ## Slide 109 “Beautiful UI components, crafted with Tailwind CSS”. Tailwind CSS Components, https://tailwindcss.com/plus/ui-blocks. Accessed 20 July 2025. ## Slide 110 “Beautiful UI components, crafted with Tailwind CSS”. Tailwind CSS Components, https://tailwindcss.com/plus/ui-blocks. Accessed 20 July 2025. ## Slide 111 “Beautiful UI components, crafted with Tailwind CSS”. Tailwind CSS Components, https://tailwindcss.com/plus/ui-blocks. Accessed 20 July 2025. ## Slide 112 “Cards”. Official Tailwind UI Components, https://tailwindcss.com/plus/ui-blocks/application-ui/layout/cards. Accessed 20 July 2025. ## Slide 113 “Cards”. Official Tailwind UI Components, https://tailwindcss.com/plus/ui-blocks/application-ui/layout/cards. Accessed 20 July 2025. ## Slide 116 Tailwind’s .flex-1 makes the element grow to fill remaining space, which is good enough for most layouts. Technically, it uses flex-basis: 0, while Bootstrap uses auto, but the difference only matters in more advanced flex layouts. ## Slide 117 Tailwind’s .flex-1 makes the element grow to fill remaining space, which is good enough for most layouts. Technically, it uses flex-basis: 0, while Bootstrap uses auto, but the difference only matters in more advanced flex layouts. ## Slide 119 henry ✷ [@henry@front-end.social]. “‘we're using tailwind to solve our CSS problems’ very cool i’m using cigarettes to solve my stress problem”. Mastodon. front-end.social, 17 Apr. 2025, https://front-end.social/@henry/114354952049470924. Accessed 6 July 2025. ## Slide 121 https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) FIXME update ## Slide 122 Wikipedia contributors. “Bootstrap (front-end framework)”. Wikipedia, The Free Encyclopedia, 9 Apr. 2023, https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29. Accessed 20 Apr. 2023. “As of May 2015, [Bootstrap 3] was the most-starred project on GitHub, with over 81,000 stars and more than 32,000 forks.” ## Slide 124 Alibaba, Bloomberg, Coursera, Docker, Intel, Mint, Spotify, Twitter, Udemy, Walmart Tripathy, Ashutosh. “What companies use the Bootstrap framework?”. Quora, 2019, https://www.quora.com/What-companies-use-the-Bootstrap-framework/answer/Ashutosh-Tripathy-10. Accessed 20 Apr 2023. Apache, BBC, CDC, CNN, Creative Commons, DigiCert, IEEE/IETF, Nginx, Spotify, Wikimedia, World Bank, Zoom “Usage statistics and market share of Bootstrap for websites”. W3Techs, https://w3techs.com/technologies/details/js-bootstrap. Accessed 21 Apr 2023. Docker, Envato, JetBrains, Red Hat, Trello, Visual Studio Code “Lead Lists”. Wappalyzer, https://www.wappalyzer.com/lists/?technologies=bootstrap. Accessed 20 Apr 2023. Apple, Duolingo, Instacart, LinkedIn, Lyft, MasterCard, Reuters, Snap, Spotify, Udemy, Upwork, Vogue Samuel, Ajayi Abimbola. “Top 10 Big Companies Using Bootstrap”. Career Karma, 5 Aug 2022, https://careerkarma.com/blog/companies-that-use-bootstrap/. Accessed 20 Apr 2023. Accenture, Coursera, Duolingo, ROBLOX, MasterCard, Upwork, Docker, SAP, Riot Games, GrubHub, LinkedIn, Lyft, Robinhood, Snap, Spotify, Udemy “Bootstrap - Reviews, Pros & Cons | Companies using Bootstrap”. stackshare, https://stackshare.io/bootstrap. Accessed 20 Apr 2023. ## Slide 125 Bootstrap 5 released 5 May 2021 Bootstrap 4 released 18 January 2018 Bootstrap 3 released 19 August 2013 Bootstrap 2 released 31 January 2012 Bootstrap released 19 August 2011 Wikipedia contributors. “Bootstrap (front-end framework)”. Wikipedia, The Free Encyclopedia, 9 Apr. 2023, https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29. Accessed 20 Apr. 2023. ## Slide 126 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Bootstrap · The most popular HTML, CSS, and JS library in the world”. Bootstrap, 18 Apr. 2023, https://getbootstrap.com. Accessed 20 Apr. 2023. ## Slide 127 Wikipedia contributors. “Bootstrap (front-end framework)”. Wikipedia, The Free Encyclopedia, 8 May 2025, https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29. Accessed 21 July 2025. ## Slide 130 http://en.wikipedia.org ## Slide 131 http://en.wikipedia.org ## Slide 132 http://en.wikipedia.org ## Slide 133 http://en.wikipedia.org ## Slide 134 6 margins: 3 left, 3 right ## Slide 139 6 margins: 3 left & 3 right ## Slide 149 https://www.youtube.com/watch?v=-3gw1XddJuc ## Slide 152 http://codepen.io/websanity/pen/toiHp ## Slide 157 Dark gray columns are the hidden layout grid; light gray boxes are the elements spanning multiple columns (except in the bottom one) ## Slide 160 Based around breakpoints: viewport widths (defined by media query declarations) that change the layout & appearance of the webpage once the viewport is within the range defined by the media query ## Slide 161 Bootstrap 3 is pretty old, but it is also simpler than newer versions of Bootstrap, which is why I used it here FIXME add screenshots for lg, sm, xs ## Slide 162 4 (Bootstrap 3), 5 (Bootstrap 4), & 6 (Bootstrap 5) ## Slide 165 Fontbonne University ## Slide 180 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Introduction”. Bootstrap v5.1, 5 Oct. 2021, https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template. Accessed 19 Apr 2022. Licensed CC BY 3.0: https://creativecommons.org/licenses/by/3.0/. ## Slide 182 FIXME This should go first ## Slide 183 http://www.stlzoo.org ## Slide 184 http://www.granneman.com ## Slide 189 FIXME spacing on 3 ## Slide 193 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Bootstrap · The most popular HTML, CSS, and JS library in the world”. Bootstrap, 18 Apr 2023, https://getbootstrap.com. Accessed 20 Apr 2023. ## Slide 194 Otto, Mark, Jacob Thornton, and Bootstrap contributors. “Download · Bootstrap v5.3”. Bootstrap, 18 Apr 2023, https://getbootstrap.com/docs/5.3/getting-started/download/. Accessed 20 Apr 2023. ## Slide 209 Otto, Mark (mod). “Get started with Bootstrap”. Bootstrap, 3 June 2025, https://getbootstrap.com/docs/5.3/getting-started/introduction/. Accessed 20 July 2025. ## Slide 211 Otto, Mark (mod). “Get started with Bootstrap”. Bootstrap, 3 June 2025, https://getbootstrap.com/docs/5.3/getting-started/introduction/. Accessed 20 July 2025. ## Slide 213 https://jquery.com ## Slide 215 “What Is a CDN (Content Delivery Network)?” Internet Archive. Akamai, 13 Apr. 2025, https://web.archive.org/web/20250413084213/https://www.akamai.com/glossary/what-is-a-cdn#accordion-b823d1c79d-item-9658536caf. Accessed 20 July 2025. ## Slide 216 https://www.akamai.com/us/en/cdn/, accessed 2020-07-28 ## Slide 217 Wikipedia contributors. “Akamai Technologies”. Internet Archive. Wikipedia, The Free Encyclopedia, 26 Aug. 2019, https://en.wikipedia.org/w/index.php?title=Akamai_Technologies&oldid=912550372. Accessed 20 July 2025. ## Slide 218 “Core Compute” refers to the central, large data centers where the majority of data processing, storage, & management occurs A PoP (“Point of Presence”) is a physical location where network servers & communication equipment are housed to distribute content & services to end users “Power and Protect Life Online.” Akamai, https://www.akamai.com/why-akamai. Internet Archive, archived 7 May 2024, https://web.archive.org/web/20240507121943/https://www.akamai.com/why-akamai. Accessed 7 May 2024. ## Slide 219 Akamai Newsroom > Media Resources https://www.akamai.com/us/en/about/news/media-resources.jsp ## Slide 222 Granneman, R. Scott. “GrannePack HTML”. Visual Studio Marketplace, 15 Dec. 2022, https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. Accessed 20 July 2025. ## Slide 224 Bootstrap 3 CDN template: http://chnsa.ws/1b2 Bootstrap 4 CDN template:https://chnsa.ws/1b3 ## Slide 228 FIXME give quick example ## Slide 232 Bootstrap 3’s bootstrap.css was ~7000 lines; Bootstrap 4’s was ~9000 ## Slide 233 Bootstrap team. “Get started with Bootstrap · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/. Accessed 17 Apr 2025. ## Slide 234 Bootstrap team. “Examples · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/getting-started/introduction/. Accessed 17 Apr 2025. ## Slide 235 Bootstrap team. “Examples · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/getting-started/introduction/. Accessed 17 Apr 2025. ## Slide 236 Bootstrap team. “Examples · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/examples/. Accessed 17 Apr 2025. ## Slide 237 Bootstrap team. “Examples · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/examples/. Accessed 17 Apr 2025. ## Slide 238 Bootstrap team. “Examples · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/examples/. Accessed 17 Apr 2025. ## Slide 239 Bootstrap team. “Examples · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/examples/. Accessed 17 Apr 2025. ## Slide 240 Bootstrap team. “Bootstrap Icons · Official open source SVG icon library for Bootstrap”. Bootstrap Icons, 3 Jan. 2024, https://icons.getbootstrap.com/. Accessed 17 Apr 2025. ## Slide 241 Bootstrap team. “Bootstrap Icons · Official open source SVG icon library for Bootstrap”. Bootstrap Icons, 3 Jan. 2024, https://icons.getbootstrap.com/?q=home. Accessed 17 Apr 2025. ## Slide 242 Bootstrap team. “Bootstrap Icons · Official open source SVG icon library for Bootstrap”. Bootstrap Icons, 3 Jan. 2024, https://icons.getbootstrap.com/?q=phone. Accessed 17 Apr 2025. ## Slide 243 Bootstrap team. “Bootstrap Icons · Official open source SVG icon library for Bootstrap”. Bootstrap Icons, 3 Jan. 2024, https://icons.getbootstrap.com/?q=video. Accessed 17 Apr 2025. ## Slide 244 Bootstrap team. “Bootstrap Themes Built & Curated by the Bootstrap Team.”. Bootstrap Themes, https://themes.getbootstrap.com/. Accessed 17 Apr 2025. ## Slide 245 Bootstrap team. “Bootstrap Blog · Official blog for the Bootstrap framework.”. Bootstrap, 4 Apr. 2025, https://blog.getbootstrap.com/. Accessed 17 Apr 2025. ## Slide 246 Bootstrap team. “Examples · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/getting-started/introduction/. Accessed 17 Apr 2025. ## Slide 248 Bootstrap team. “Images · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/content/images/. Accessed 17 Apr 2025. ## Slide 249 Bootstrap team. “Images · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/content/images/. Accessed 17 Apr 2025. ## Slide 250 Bootstrap team. “Images · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/content/images/. Accessed 17 Apr 2025. ## Slide 251 Bootstrap team. “Images · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/content/images/. Accessed 17 Apr 2025. ## Slide 252 Bootstrap team. “Borders · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/utilities/borders/. Accessed 17 Apr 2025. ## Slide 253 Bootstrap team. “Borders · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/utilities/borders/. Accessed 17 Apr 2025. ## Slide 254 Bootstrap team. “Borders · Bootstrap v5.3”. Bootstrap, 15 Apr. 2025, https://getbootstrap.com/docs/5.3/utilities/borders/. Accessed 17 Apr 2025. ## Slide 255 Get Bootstrap showing dropdown for versions 2, 3, & 4 as of 2017-11-28 ## Slide 257 http://getbootstrap.com/css ## Slide 258 http://getbootstrap.com/css/#images ## Slide 259 http://getbootstrap.com/css/#images-shapes ## Slide 260 http://getbootstrap.com/components/ ## Slide 261 http://getbootstrap.com/javascript ## Slide 262 http://getbootstrap.com/customize/ ## Slide 265 https://getbootstrap.com/docs/4.5/utilities/borders/#border-radius Note: .rounded-lg & .rounded-sm have been changed in Bootstrap 5 & don’t work right anyway, so don’t use them ## Slide 266 FIXME ## Slide 275 https://getbootstrap.com/docs/4.5/components/breadcrumb/ ## Slide 279 http://www.fileformat.info/info/unicode/char/search.htm Or go to http://www.fileformat.info & click on Characters on the left next to Unicode ## Slide 280 http://www.fileformat.info/info/unicode/char/search.htm ## Slide 281 http://www.fileformat.info/info/unicode/char/27a4/index.htm ## Slide 282 http://www.fileformat.info/info/unicode/char/27a4/browsertest.htm ## Slide 283 http://www.fileformat.info/info/unicode/char/27a4/browsertest.htm ## Slide 297 https://getbootstrap.com/docs/3.4/css/#grid ## Slide 298 https://getbootstrap.com/docs/3.4/css/#grid https://getbootstrap.com/docs/4.6/layout/overview/ ## Slide 299 https://getbootstrap.com/docs/4.6/layout/overview/ https://getbootstrap.com/docs/5.1/layout/breakpoints/ ## Slide 300 https://getbootstrap.com/docs/5.1/layout/breakpoints/ ## Slide 301 WebSanity. “Bootstrap 5 Grid Reference”. CodePen, 16 Nov. 2024, https://codepen.io/websanity/full/JjgzMBo. Accessed 18 Nov. 2024. ## Slide 302 WebSanity. “Bootstrap 5 Grid Reference”. CodePen, 16 Nov. 2024, https://codepen.io/websanity/full/JjgzMBo. Accessed 18 Nov. 2024. ## Slide 303 WebSanity. “Bootstrap 5 Grid Reference”. CodePen, 16 Nov. 2024, https://codepen.io/websanity/full/JjgzMBo. Accessed 18 Nov. 2024. ## Slide 304 WebSanity. “Bootstrap 5 Grid Reference”. CodePen, 16 Nov. 2024, https://codepen.io/websanity/full/JjgzMBo. Accessed 18 Nov. 2024. ## Slide 305 WebSanity. “Bootstrap 5 Grid Reference”. CodePen, 16 Nov. 2024, https://codepen.io/websanity/full/JjgzMBo. Accessed 18 Nov. 2024. ## Slide 306 WebSanity. “Bootstrap 5 Grid Reference”. CodePen, 16 Nov. 2024, https://codepen.io/websanity/full/JjgzMBo. Accessed 18 Nov. 2024. ## Slide 307 WebSanity. “Bootstrap 5 Grid Reference”. CodePen, 16 Nov. 2024, https://codepen.io/websanity/full/JjgzMBo. Accessed 18 Nov. 2024. ## Slide 308 http://codepen.io/websanity/pen/toiHp FIXME change to Bootstrap 5 screenshots ## Slide 309 http://codepen.io/websanity/pen/toiHp ## Slide 310 http://codepen.io/websanity/pen/toiHp ## Slide 311 http://codepen.io/websanity/pen/toiHp ## Slide 312 http://codepen.io/websanity/pen/toiHp ## Slide 313 Anderson, Shaun. “What are the best screen sizes for responsive web design?”. Hobo SEO Consultancy, 27 Mar 2023, https://www.hobo-web.co.uk/best-screen-size/#:~:text=Design%20for%20desktop%20displays%20from,962%20through%201280%C3%97800. Accessed 17 May 2023. ## Slide 314 Anderson, Shaun. “What are the best screen sizes for responsive web design?”. Hobo SEO Consultancy, 27 Mar 2023, https://www.hobo-web.co.uk/best-screen-size/#:~:text=Design%20for%20desktop%20displays%20from,962%20through%201280%C3%97800. Accessed 17 May 2023. ## Slide 329 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 330 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 331 http://codepen.io/websanity/pen/pJNvyQ?editors=100 ## Slide 337 http://codepen.io/websanity/pen/aOBzKN?editors=100 ## Slide 339 http://codepen.io/websanity/pen/aOBzKN?editors=100 ## Slide 342 “Grid system”. Bootstrap, 19 May 2023, https://getbootstrap.com/docs/5.3/layout/grid/. Accessed 19 May 2023. ## Slide 344 https://getbootstrap.com/docs/4.5/layout/grid/ ## Slide 345 https://getbootstrap.com/docs/4.5/layout/grid/ ## Slide 346 https://getbootstrap.com/docs/4.5/layout/grid/ ## Slide 354 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 355 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 356 http://codepen.io/websanity/pen/OVbVmG?editors=100 ## Slide 357 http://codepen.io/websanity/pen/gpLpxE?editors=100 ## Slide 358 http://codepen.io/websanity/pen/gpLpxE?editors=100 ## Slide 363 http://startbootstrap.com ## Slide 365 http://startbootstrap.com/template-overviews/agency/ ## Slide 367 https://wrapbootstrap.com ## Slide 370 http://themes.getbootstrap.com ## Slide 371 http://themes.getbootstrap.com/collections/all ## Slide 372 http://themes.getbootstrap.com/collections/all ## Slide 373 http://themes.getbootstrap.com/collections/all ## Slide 374 http://bootstrap-themes.github.io/marketing/ ## Slide 375 http://bootstrap-themes.github.io/marketing/ ## Slide 376 http://bootstrap-themes.github.io/marketing/ ## Slide 377 http://bootstrap-themes.github.io/marketing/ ## Slide 378 http://bootstrap-themes.github.io/marketing/ ## Slide 379 http://bootstrap-themes.github.io/marketing/ ## Slide 380 http://bootstrap-themes.github.io/marketing/ ## Slide 381 http://bootstrap-themes.github.io/marketing/ ## Slide 382 http://themes.getbootstrap.com/collections/all ## Slide 386 https://www.browserstack.com/accounts/subscriptions ## Slide 387 https://www.browserstack.com/responsive ## Slide 388 https://www.browserstack.com/responsive ## Slide 389 https://www.browserstack.com/screenshots ## Slide 390 https://www.browserstack.com/start ## Slide 391 https://www.browserstack.com/start ## Slide 392 https://www.browserstack.com/start ## Slide 393 https://www.browserstack.com/start ## Slide 394 https://www.browserstack.com/start ## Slide 401 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Accessed 18 Apr 2023. ## Slide 402 Larsen, Rob [roblarsen] & Damian Szczypka [sthiepaan]. “html5-boilerplate/style.css at main”. GitHub, 3 Dec 2021, https://github.com/h5bp/html5-boilerplate/blob/main/dist/css/style.css. Accessed 18 Apr 2023. ## Slide 406 Atkins, Tab et al. “CSS Values and Units Module Level 4 [Editor’s Draft]”. W3C, 6 April 2023, https://w3c.github.io/csswg-drafts/css-values-4/#ratios. Accessed 18 Apr 2023. MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/ratio. Accessed 18 Apr 2023. ## Slide 408 Deveria, Alexis [@Fyrd]. “types: ”. Can I use…, 17 April 2023, https://caniuse.com/mdn-css_types_ratio. Accessed 18 Apr 2023. ## Slide 409 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023. ## Slide 410 MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/resolution. Accessed 18 Apr 2023. ## Slide 411 MDN contributors. “”. MDN Web Docs, 21 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/resolution. Accessed 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: ”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution. Accessed 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dppx unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dppx. Accessed 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dpi unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dpi. Accessed 18 Apr 2023. Deveria, Alexis [@Fyrd]. “types: : dpcm unit”. Can I use…, 17 Apr 2023, https://caniuse.com/mdn-css_types_resolution_dpcm. Accessed 18 Apr 2023. Safari: “Bug 78087 - Enable the 'resolution' media query by default”. WebKit Bugzilla, 26 May 2022, https://bugs.webkit.org/show_bug.cgi?id=78087 As of 18 Apr 2023 ## Slide 412 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023. ## Slide 413 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023. ## Slide 414 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#media-types. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023. ## Slide 415 Rivoal, Florian et al. “Media Queries Level 4 [Editor’s Draft]”. W3C, 13 Mar 2023, https://drafts.csswg.org/mediaqueries/#changes-2012. Accessed 18 Apr 2023. MDN contributors. “@media”. MDN Web Docs, 31 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/@media. Accessed 18 Apr 2023. MDN contributors. “Using media queries”. MDN Web Docs, 28 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Accessed 18 Apr 2023.