class: title <style type="text/css"> .blue--hover:hover, .blue--hover:focus { color: var(--blue); } </style> <div class="scene f2 absolute top-0 left-0 w-10 bg-red bg-blue">2</div> <h1>From Style Guide to xaringan Theme</h1> <h2>xaringanthemer</h2> <div class="conf-logo"></div> <div class="talk-meta"> <p class="talk-author">Garrick Aden-Buie & Silvia Canelón</p> <p class="talk-date"> <a href="https://presentable-user2021.netlify.app" class="underline f-lato" style="color: var(--text-light); text-underline-offset: 7px;">Professional, Polished, Presentable</a> </p> </div> --- class: header_background # Do you have your style guide? .flex.w-100.items-start.justify-center.mt4[ <div class="ba bw1 br3 b--silver w-80 pv2 silver f4 relative" style="padding-left:2.5em;"> <button class="absolute left-1 b--none silver pa0 ma0 blue--hover grow bg-white" id="fake-search"> <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg> </button> <div class="can-edit">airbnb branding guide</div> </div> ] -- <div class="animated bounceInLeft" style="position:absolute; bottom: 80px;"> <img src="assets/img/02/airbnb-colors.png" height="200" class="shadow-5" style="transform: rotate(-13deg); z-index: 13;" fig.alt = "Screenshot of the colors in AirBnB's branding guide." /> </div> <div class="animated bounceInUp delay-1s" style="position: absolute; bottom: 60px; left: 280px;"> <img src="assets/img/02/airbnb-fonts.png" height="200" class="shadow-5" style="transform: rotate(5deg); z-index: 12;" fig.alt = "Screenshot of the fonts in AirBnB's branding guide." /> </div> <div class="animated bounceInUp delay-2s" style="position: absolute; bottom: 140px; right: 340px;"> <img src="assets/img/02/airbnb-logos.png" height="210" class="shadow-5" style="transform: rotate(-5deg); z-index: 11;" fig.alt = "Screenshot of AirBnB's logos from their branding guide." /> </div> <div class="animated bounceInRight delay-3s" style="position: absolute; bottom: 40px; right: 80px;"> <img src="assets/img/02/airbnb-examples.png" height="200" class="shadow-5" style="transform: rotate(1deg); z-index: 10;" fig.alt = "Screenshot of AirBnB's logos from their branding guide." /> </div> <script type="text/javascript"> document.getElementById("fake-search").addEventListener("click", function() { slideshow.gotoNextSlide() }) </script> --- # Our favorite style guides - GOV.UK Design System <a href="https://design-system.service.gov.uk/"><svg aria-label="GOV.UK Design System" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>GOV.UK Design System</title><path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"/></svg></a> - Urban Institute Data Visualization Style Guide <a href="http://urbaninstitute.github.io/graphics-styleguide/"><svg aria-label="Urban Institute Data Visualization Style Guide" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>Urban Institute Data Visualization Style Guide</title><path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"/></svg></a> - U.S. Web Design System <a href="https://designsystem.digital.gov/"><svg aria-label="U.S. Web Design System" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>U.S. Web Design System</title><path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"/></svg></a> - Adele: A Design System Repository <a href="https://adele.uxpin.com/"><svg aria-label="Adele: A Design System Repository" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>Adele: A Design System Repository</title><path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"/></svg></a> --- class: break center middle <img src="assets/img/02/xaringanthemer.png" alt="xaringanthemer hex logo" style="filter: drop-shadow(0.1rem 0.5rem 0.3rem rgba(255, 0, 0, 0.5));"> --- layout: true # xaringanthemer ---  --- .pull-left[  ] -- .pull-right[  ] --- ```` ```{r xaringan-themer, include=FALSE, warning=FALSE} library(xaringanthemer) style_duo_accent( primary_color = "#1381B0", secondary_color = "#FF961C", inverse_header_color = "#FFFFFF" ) ``` ```` --- ```` ```{r xaringan-themer, include=FALSE, warning=FALSE} library(xaringanthemer) *style_duo_accent( primary_color = "#1381B0", secondary_color = "#FF961C", inverse_header_color = "#FFFFFF" *) ``` ```` -- .pull-left[ <h3 class="mv1 tc bb bw1">Monotone</h3> - `style_mono_light()` - `style_mono_dark()` - `style_mono_accent()` - `style_mono_accent_inverse()` ] -- .pull-right[ <h3 class="mv1 tc bb bw1">Duotone</h3> - `style_duo()` - `style_duo_accent()` - `style_duo_accent_inverse()` ] --- class: header_background center middle # Activity Time .blue.f4[ <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M206.86 245.15c-35.88 10.45-59.95 41.2-57.53 74.1 11.4-12.72 28.81-23.7 49.9-30.92l7.63-43.18zM95.81 295L64.08 115.49c-.29-1.62.28-2.62.24-2.65 57.76-32.06 123.12-49.01 189.01-49.01 1.61 0 3.23.17 4.85.19 13.95-13.47 31.73-22.83 51.59-26 18.89-3.02 38.05-4.55 57.18-5.32-9.99-13.95-24.48-24.23-41.77-27C301.27 1.89 277.24 0 253.32 0 176.66 0 101.02 19.42 33.2 57.06 9.03 70.48-3.92 98.48 1.05 126.58l31.73 179.51c14.23 80.52 136.33 142.08 204.45 142.08 3.59 0 6.75-.46 10.01-.8-13.52-17.08-28.94-40.48-39.5-67.58-47.61-12.98-106.06-51.62-111.93-84.79zm97.55-137.46c-.73-4.12-2.23-7.87-4.07-11.4-8.25 8.91-20.67 15.75-35.32 18.32-14.65 2.58-28.67.4-39.48-5.17-.52 3.94-.64 7.98.09 12.1 3.84 21.7 24.58 36.19 46.34 32.37 21.75-3.82 36.28-24.52 32.44-46.22zM606.8 120.9c-88.98-49.38-191.43-67.41-291.98-51.35-27.31 4.36-49.08 26.26-54.04 54.36l-31.73 179.51c-15.39 87.05 95.28 196.27 158.31 207.35 63.03 11.09 204.47-53.79 219.86-140.84l31.73-179.51c4.97-28.11-7.98-56.11-32.15-69.52zm-273.24 96.8c3.84-21.7 24.58-36.19 46.34-32.36 21.76 3.83 36.28 24.52 32.45 46.22-.73 4.12-2.23 7.87-4.07 11.4-8.25-8.91-20.67-15.75-35.32-18.32-14.65-2.58-28.67-.4-39.48 5.17-.53-3.95-.65-7.99.08-12.11zm70.47 198.76c-55.68-9.79-93.52-59.27-89.04-112.9 20.6 25.54 56.21 46.17 99.49 53.78 43.28 7.61 83.82.37 111.93-16.6-14.18 51.94-66.71 85.51-122.38 75.72zm130.3-151.34c-8.25-8.91-20.68-15.75-35.33-18.32-14.65-2.58-28.67-.4-39.48 5.17-.52-3.94-.64-7.98.09-12.1 3.84-21.7 24.58-36.19 46.34-32.37 21.75 3.83 36.28 24.52 32.45 46.22-.73 4.13-2.23 7.88-4.07 11.4z"/></svg> [materials/act-01/02-style-guide](/materials/act-01/02-style-guide/#activity) ] Build your own complete .pkg[xaringan] theme with .pkg[xaringanthemer]