garrick
/
xaringanthemer
의 미러 https://github.com/gadenbuie/xaringanthemer.git
보기 1
좋아요 0
포크 0
코드 이슈 0 릴리즈 10 위키 Activity
😎 Give your xaringan slides some style
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 커밋
5 브랜치
트리: 0e71ba0e97
브랜치 태그
${ item.name }
Create branch ${ searchTerm }
from '0e71ba0e97'
${ noResults }
xaringanthemer/docs/articles/css-help.html

328 lines
21KB
Raw Blame 히스토리 

  1. <!DOCTYPE html>

  2. <!-- Generated by pkgdown: do not edit by hand --><html>

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5. <meta charset="utf-8">

  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  8. <title>xaringanthemer CSS Help • xaringanthemer</title>

  9. <!-- jquery --><script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha384-nrOSfDHtoPMzJHjVTdCopGqIqeYETSXhZDFyniQ8ZHcVy08QesyHcnOUpMpqnmWq" crossorigin="anonymous"></script><!-- Bootstrap --><link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

  10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><!-- Font Awesome icons --><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

  11. <!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js" integrity="sha384-cV+rhyOuRHc9Ub/91rihWcGmMmCXDeksTtCihMupQHSsi8GIIRDG0ThDc3HGQFJ3" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">

  12. <script src="../jquery.sticky-kit.min.js"></script><script src="../pkgdown.js"></script><meta property="og:title" content="xaringanthemer CSS Help">

  13. <meta property="og:description" content="">

  14. <meta name="twitter:card" content="summary">

  15. <!-- mathjax --><script src="https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!--[if lt IE 9]>

  16. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  17. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  18. <![endif]-->

  19. </head>

  20. <body>

  21.     <div class="container template-article">

  22.       <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">

  23.   <div class="container">

  24.     <div class="navbar-header">

  25.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">

  26.         <span class="icon-bar"></span>

  27.         <span class="icon-bar"></span>

  28.         <span class="icon-bar"></span>

  29.       </button>

  30.       <span class="navbar-brand">

  31.         <a class="navbar-link" href="../index.html">xaringanthemer</a>

  32.         <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="Released package">0.1.1</span>

  33.       </span>

  34.     </div>

  35. 

  36.     <div id="navbar" class="navbar-collapse collapse">

  37.       <ul class="nav navbar-nav">

  38. <li>

  39.   <a href="../index.html">

  40.     <span class="fa fa-home fa-lg"></span>

  41.      

  42.   </a>

  43. </li>

  44. <li>

  45.   <a href="../articles/xaringanthemer.html">Get started</a>

  46. </li>

  47. <li>

  48.   <a href="../articles/singles/themes.html">Themes</a>

  49. </li>

  50. <li>

  51.   <a href="../articles/singles/fonts.html">Fonts</a>

  52. </li>

  53. <li>

  54.   <a href="../articles/template-variables.html">Template Variables</a>

  55. </li>

  56. <li>

  57.   <a href="../articles/css-help.html">CSS Help</a>

  58. </li>

  59. <li>

  60.   <a href="../reference/index.html">Reference</a>

  61. </li>

  62.       </ul>

  63. <ul class="nav navbar-nav navbar-right">

  64. <li>

  65.   <a href="https://github.com/gadenbuie/xaringanthemer">

  66.     <span class="fa fa-github fa-lg"></span>

  67.      

  68.   </a>

  69. </li>

  70. <li>

  71.   <a href="https://twitter.com/grrrck">

  72.     <span class="fa fa-twitter fa-lg"></span>

  73.      

  74.   </a>

  75. </li>

  76.       </ul>

  77. </div>

  78. <!--/.nav-collapse -->

  79.   </div>

  80. <!--/.container -->

  81. </div>

  82. <!--/.navbar -->

  83. 

  84.       

  85.       </header><div class="row">

  86.   <div class="col-md-9 contents">

  87.     <div class="page-header toc-ignore">

  88.       <h1>xaringanthemer CSS Help</h1>

  89.             

  90.       

  91.       <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/master/vignettes/css-help.Rmd"><code>vignettes/css-help.Rmd</code></a></small>

  92.       <div class="hidden name"><code>css-help.Rmd</code></div>

  93. 

  94.     </div>

  95. 

  96.     

  97.     

  98. <p>Jump to: <a href="#colors">Colors</a>, <a href="#sizes">Sizes</a>, <a href="#positioning">Positioning</a></p>

  99. <div id="about-this-vignette" class="section level2">

  100. <h2 class="hasAnchor">

  101. <a href="#about-this-vignette" class="anchor"></a>About this vignette</h2>

  102. <p>This vignette cover some basic CSS, in particular to give an idea about the possible values you can use with the various arguments to the xaringan theme functions. See <code><a href="../articles/template-variables.html">vignette("template-variables", package = "xaringanthemer")</a></code> for a full list of the theme functions.</p>

  103. <p>Because we are setting the CSS properties from R, we can either give <strong>xaringanthemer</strong> function arguments a character string or we can call an R function or variable that returns a character string. For example, we can create an R variable with a specific color that is used in several places in a theme</p>

  104. <div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1">firebrick &lt;-<span class="st"> "#CD2626"</span></a>

  105. <a class="sourceLine" id="cb1-2" data-line-number="2"><span class="kw"><a href="../reference/write_xaringan_theme.html">write_xaringan_theme</a></span>(</a>

  106. <a class="sourceLine" id="cb1-3" data-line-number="3">  <span class="dt">header_color =</span> firebrick,</a>

  107. <a class="sourceLine" id="cb1-4" data-line-number="4">  <span class="dt">link_color =</span> firebrick</a>

  108. <a class="sourceLine" id="cb1-5" data-line-number="5">)</a></code></pre></div>

  109. <p>or we can directly give the character string</p>

  110. <div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="kw"><a href="../reference/write_xaringan_theme.html">write_xaringan_theme</a></span>(</a>

  111. <a class="sourceLine" id="cb2-2" data-line-number="2">  <span class="dt">header_color =</span> <span class="st">"#CD2626"</span>,</a>

  112. <a class="sourceLine" id="cb2-3" data-line-number="3">  <span class="dt">link_color =</span> <span class="st">"#CD2626"</span></a>

  113. <a class="sourceLine" id="cb2-4" data-line-number="4">)</a></code></pre></div>

  114. <p>in both cases, we get CSS like the following that sets the link color</p>

  115. <div class="sourceCode" id="cb3"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb3-1" data-line-number="1">a, a &gt; code {</a>

  116. <a class="sourceLine" id="cb3-2" data-line-number="2">  <span class="kw">color</span>: <span class="dv">#CD2626</span>;</a>

  117. <a class="sourceLine" id="cb3-3" data-line-number="3">}</a></code></pre></div>

  118. <p>Note that when a string is given to the theme function, the outer quotes are removed.</p>

  119. <p>In the sections below, R code is represented without quotes – like <code>rgb(0.8, 0.15, 0.15)</code> – and CSS code is represented inside quotes – like <code>"rgb(205, 38, 38)"</code> – to differentiate between R and CSS functions with the same or similar names.</p>

  120. </div>

  121. <div id="colors" class="section level2">

  122. <h2 class="hasAnchor">

  123. <a href="#colors" class="anchor"></a>Colors</h2>

  124. <p>In CSS, text colors are specified with the <code>color:</code> property, background colors use <code>background-color:</code>, and border colors use <code>border-color:</code>.</p>

  125. <p>In <strong>xaringanthemer</strong>, template variables that set</p>

  126. <ul>

  127. <li>text color end with <code>_color</code>;</li>

  128. <li>background color end with <code>_background_color</code>;</li>

  129. <li>border color end with <code>_border_color</code>;</li>

  130. </ul>

  131. <div id="setting-colors" class="section level3">

  132. <h3 class="hasAnchor">

  133. <a href="#setting-colors" class="anchor"></a>Setting colors</h3>

  134. <p>In CSS, there are a number of ways to specify a color:</p>

  135. <ul>

  136. <li><p>You can use a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords">color keyword</a>, such as <code>"darkslategray"</code> or <code>"red"</code>.</p></li>

  137. <li>

  138. <p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()">RGB color specification</a> either via</p>

  139. <ul>

  140. <li>the hexadecimal representation

  141. <ul>

  142. <li>

  143. <code>"#CD2626"</code> or</li>

  144. <li>

  145. <code>"#CD262680"</code> (50% transparency)</li>

  146. </ul>

  147. </li>

  148. <li>or the rgb function notation

  149. <ul>

  150. <li>

  151. <code>"rgb(255, 38, 38)"</code> or</li>

  152. <li>

  153. <code>"rgba(255, 38, 28, 0.5)"</code> (50% transparency).</li>

  154. </ul>

  155. </li>

  156. </ul>

  157. </li>

  158. <li>

  159. <p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl()_and_hsla()">HSL color specification</a> via the functions</p>

  160. <ul>

  161. <li>

  162. <code>"hsl(270,60%,70%)"</code> or</li>

  163. <li>

  164. <code>"hsl(270, 60%, 50%, .15)"</code> (15% transparency).</li>

  165. </ul>

  166. </li>

  167. </ul>

  168. <p>In R, there are a number of ways to specify a color:</p>

  169. <ul>

  170. <li>

  171. <p>Use <code>rgb(205, 38, 38, maxColorValue = 255)</code> as an equivalent to the CSS <code>"rgb()"</code> function.</p>

  172. <ul>

  173. <li>Without the <code>maxColorValue</code> argument, the <code>rgb()</code> function expects decimal numbers in the range [0, 1], like <code>rgb(0.8039, 0.1490, 0.1490)</code>.</li>

  174. <li>The <code>rgb()</code> function also sets transparency via the <code>alpha</code> argument (in the [0, 1] range).</li>

  175. </ul>

  176. </li>

  177. <li>

  178. <p>You can get the hexadecimal representation of a built-in R color using the <code>col2rgb()</code> function together with the <code>rgb()</code> function:</p>

  179. <div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="kw">rgb</span>(<span class="kw">t</span>(<span class="kw">col2rgb</span>(<span class="st">"red"</span>)), <span class="dt">maxColorValue =</span> <span class="dv">255</span>)</a>

  180. <a class="sourceLine" id="cb4-2" data-line-number="2"><span class="co">#&gt; [1] "#FF0000"</span></a></code></pre></div>

  181. </li>

  182. </ul>

  183. </div>

  184. </div>

  185. <div id="sizes" class="section level2">

  186. <h2 class="hasAnchor">

  187. <a href="#sizes" class="anchor"></a>Sizes</h2>

  188. <p>In <strong>xaringanthemer</strong>, any template variable that accepts a CSS size (or length unit) ends with <code>_size</code>. Sizes are also used for positioning and those template variables end include <code>position</code> in their name.</p>

  189. <p>There are many units available in CSS sizes, but the three most common and easiest to use are pixels (<code>"px"</code>), percentage (<code>"%"</code>), and em units (<code>"em"</code>). Mozilla’s devloper portal has a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">full list of CSS length units</a>.</p>

  190. <p>These sizes are either <em>absolute</em> or <em>relative</em> values. Relative values are set relative to the size of the parent element, but absolute values ignore the parent element.</p>

  191. <dl>

  192. <dt>Pixels <code>"px"</code>

  193. </dt>

  194. <dd>Pixels are an <em>absolute</em> size unit, traditionally representing one device pixel. E.g. <code>"16px"</code> or <code>"23px"</code>.

  195. </dd>

  196. <dt>Percentage <code>"%"</code>

  197. </dt>

  198. <dd>Percentages are relative to the size of the parent element, scaled linearly. E.g. <code>"75%"</code> or <code>"150%"</code>.

  199. </dd>

  200. <dt>em Units <code>"em"</code>

  201. </dt>

  202. <dd>em Units are just like percentages, except expressed as decimals. E.g. <code>"0.75em"</code> or <code>"1.5em"</code>.

  203. </dd>

  204. </dl>

  205. <p>To make this more concrete, here is a simple “page” containing a section header and two paragraphs.</p>

  206. <div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb5-1" data-line-number="1"><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">"page"</span><span class="kw">&gt;</span></a>

  207. <a class="sourceLine" id="cb5-2" data-line-number="2">  <span class="kw">&lt;h1&gt;</span>Section 1<span class="kw">&lt;/h1&gt;</span></a>

  208. <a class="sourceLine" id="cb5-3" data-line-number="3">  <span class="kw">&lt;p&gt;</span>This is paragraph 1...<span class="kw">&lt;/p&gt;</span></a>

  209. <a class="sourceLine" id="cb5-4" data-line-number="4">  <span class="kw">&lt;p&gt;</span>This is paragraph 2...<span class="kw">&lt;/p&gt;</span></a>

  210. <a class="sourceLine" id="cb5-5" data-line-number="5"><span class="kw">&lt;/div&gt;</span></a></code></pre></div>

  211. <p>Intuitively, you might want the section header to have a somewhat bigger font size than the paragraph text, but you don’t want to have to set the text size for each and every paragraph or header.</p>

  212. <p>To do this, we can set the base size of any element inside the <code>&lt;div class="page"&gt;</code>, and adjust the header size relatively.</p>

  213. <div class="sourceCode" id="cb6"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb6-1" data-line-number="1"><span class="fu">.page</span> {</a>

  214. <a class="sourceLine" id="cb6-2" data-line-number="2">  <span class="kw">font-size</span>: <span class="dv">16px</span>;</a>

  215. <a class="sourceLine" id="cb6-3" data-line-number="3">}</a>

  216. <a class="sourceLine" id="cb6-4" data-line-number="4">h1 {</a>

  217. <a class="sourceLine" id="cb6-5" data-line-number="5">  <span class="kw">font-size</span>: <span class="dv">2em</span>;</a>

  218. <a class="sourceLine" id="cb6-6" data-line-number="6">}</a></code></pre></div>

  219. <p>Now our paragraph font will be 16 pixels tall, and the level 1 headers will be twice as big. If we later decide to change the base font size, say to <code>"15px"</code>, the header text will still be twice as big as the paragraph text.</p>

  220. </div>

  221. <div id="positioning" class="section level2">

  222. <h2 class="hasAnchor">

  223. <a href="#positioning" class="anchor"></a>Positioning</h2>

  224. <p>If you’re reading this, you’re probably wondering how you make an element be <em>where you want it to be</em>.</p>

  225. <p>There are 3 items that <strong>xaringanthemer</strong> can help you position:</p>

  226. <ul>

  227. <li>

  228. <code>background_position</code> (background image position)</li>

  229. <li>

  230. <code>title_slide_background_position</code> (title slide background image position)</li>

  231. <li>

  232. <code>footnote_position_bottom</code> (footnote location from bottom of screen)</li>

  233. </ul>

  234. <div id="footnote-position" class="section level3">

  235. <h3 class="hasAnchor">

  236. <a href="#footnote-position" class="anchor"></a>Footnote Position</h3>

  237. <p><strong>xaringanthemer</strong> provides one template variable to adjust the position of the footnote element. Footnotes can be insterted into a slide using the <code>.footnote[Here's my quick footnote]</code> syntax.</p>

  238. <p>The <code>footnote_position_bottom</code> argument adjust how far from the bottom of the slide the footnote appears. The default value is <code>"3em"</code>, but you can adjust this value up or down to get the footnote where you want.</p>

  239. </div>

  240. <div id="background-position" class="section level3">

  241. <h3 class="hasAnchor">

  242. <a href="#background-position" class="anchor"></a>Background Position</h3>

  243. <p>The background position is set using the theme function arguments that end with <code>background_position</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#Syntax">this article on background-position</a> from Mozilla for more information.</p>

  244. <p>Try any of the following values to get started:</p>

  245. <div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" data-line-number="1">background_position =<span class="st"> "center"</span></a>

  246. <a class="sourceLine" id="cb7-2" data-line-number="2">background_position =<span class="st"> "top"</span></a>

  247. <a class="sourceLine" id="cb7-3" data-line-number="3">background_position =<span class="st"> "left"</span></a>

  248. <a class="sourceLine" id="cb7-4" data-line-number="4">background_position =<span class="st"> "bottom"</span></a>

  249. <a class="sourceLine" id="cb7-5" data-line-number="5">background_position =<span class="st"> "25% 75%"</span> <span class="co"># X-value (from left) Y-value (from top)</span></a>

  250. <a class="sourceLine" id="cb7-6" data-line-number="6">background_position =<span class="st"> "bottom 10px right 20px"</span> <span class="co"># 10px from bottom, 20px from right</span></a>

  251. <a class="sourceLine" id="cb7-7" data-line-number="7">background_position =<span class="st"> "top left 10px"</span> <span class="co"># at top but adjusted left 10px</span></a></code></pre></div>

  252. </div>

  253. <div id="general-positioning" class="section level3">

  254. <h3 class="hasAnchor">

  255. <a href="#general-positioning" class="anchor"></a>General Positioning</h3>

  256. <p>Read this section if you want to put a slide element at a specific spot on your slide.</p>

  257. <p>The <code>position</code> CSS element is used to specify where an element is located on the screen. Mozilla provides a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">very good reference on positioning</a> that I’ve summarized here.</p>

  258. <p>An element can be <code>"relative"</code>-ly positioned, <code>"absolute"</code>-ly positioned, <code>"fixed"</code>, <code>"sticky"</code> or <code>"static"</code> (default). For an element with a computed position (i.e. not <code>"static"</code>), you can also specify the <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> CSS properties for that element. The <code>top</code>/<code>bottom</code> parameters specify vertical displacement, and the <code>right</code>/<code>left</code> specify horizontal displacement.</p>

  259. <dl>

  260. <dt>Relatively positioned <code>position: relative</code>

  261. </dt>

  262. <dd>For relatively positioned elements, the element position is adjusted relative to where it <em>would have been</em> if it were <code>static</code>.

  263. </dd>

  264. <dt>Absolutely positioned <code>position: absolute</code> or <code>position: fixed</code>

  265. </dt>

  266. <dd>Absolutely positioned elements are positioned relative to the block that contains the element (called a containing block). A <code>fixed</code> element won’t move with scrolling (but <code>fixed</code> is not recommended for remarkjs slides).

  267. </dd>

  268. </dl>

  269. <p>If you want something to appear in a specific position on your slide, you’ll need to use the <code>extra_css</code> argument of the <strong>xaringanthemer</strong> functions. For example, lets say you want a 300px by 300px box to appear on the right side of your slide, you’ll need to create a special css class:</p>

  270. <div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" data-line-number="1"><span class="kw"><a href="../reference/write_xaringan_theme.html">write_xaringan_theme</a></span>(</a>

  271. <a class="sourceLine" id="cb8-2" data-line-number="2">  <span class="dt">extra_css =</span> <span class="kw">list</span>(</a>

  272. <a class="sourceLine" id="cb8-3" data-line-number="3">    <span class="st">".box-right"</span> =<span class="st"> </span><span class="kw">list</span>(</a>

  273. <a class="sourceLine" id="cb8-4" data-line-number="4">      <span class="st">"height"</span> =<span class="st"> "300px"</span>,</a>

  274. <a class="sourceLine" id="cb8-5" data-line-number="5">      <span class="st">"width"</span> =<span class="st"> "300px"</span>,</a>

  275. <a class="sourceLine" id="cb8-6" data-line-number="6">      <span class="st">"position"</span> =<span class="st"> "absolute"</span>,</a>

  276. <a class="sourceLine" id="cb8-7" data-line-number="7">      <span class="st">"top"</span> =<span class="st"> "33%"</span>,</a>

  277. <a class="sourceLine" id="cb8-8" data-line-number="8">      <span class="st">"left"</span> =<span class="st"> "65%"</span></a>

  278. <a class="sourceLine" id="cb8-9" data-line-number="9">    )</a>

  279. <a class="sourceLine" id="cb8-10" data-line-number="10">  )</a>

  280. <a class="sourceLine" id="cb8-11" data-line-number="11">)</a></code></pre></div>

  281. <p>This creates CSS like this:</p>

  282. <div class="sourceCode" id="cb9"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb9-1" data-line-number="1"><span class="fu">.box-right</span> {</a>

  283. <a class="sourceLine" id="cb9-2" data-line-number="2">  <span class="kw">height</span>: <span class="dv">300px</span>;</a>

  284. <a class="sourceLine" id="cb9-3" data-line-number="3">  <span class="kw">width</span>: <span class="dv">300px</span>;</a>

  285. <a class="sourceLine" id="cb9-4" data-line-number="4">  <span class="kw">position</span>: <span class="dv">absolute</span>;</a>

  286. <a class="sourceLine" id="cb9-5" data-line-number="5">  <span class="kw">top</span>: <span class="dv">33%</span>;</a>

  287. <a class="sourceLine" id="cb9-6" data-line-number="6">  <span class="kw">left</span>: <span class="dv">65%</span>;</a>

  288. <a class="sourceLine" id="cb9-7" data-line-number="7">}</a></code></pre></div>

  289. <p>which you can then use in your slides by wrapping the slide content in <code>.box-right[]</code>.</p>

  290. <pre><code>.box-right[

  291. Stuff inside the box

  292. ]</code></pre>

  293. </div>

  294. </div>

  295.   </div>

  296. 

  297.   <div class="col-md-3 hidden-xs hidden-sm" id="sidebar">

  298.         <div id="tocnav">

  299.       <h2 class="hasAnchor">

  300. <a href="#tocnav" class="anchor"></a>Contents</h2>

  301.       <ul class="nav nav-pills nav-stacked">

  302. <li><a href="#about-this-vignette">About this vignette</a></li>

  303.       <li><a href="#colors">Colors</a></li>

  304.       <li><a href="#sizes">Sizes</a></li>

  305.       <li><a href="#positioning">Positioning</a></li>

  306.       </ul>

  307. </div>

  308.       </div>

  309. 

  310. </div>

  311. 

  312. 

  313.       <footer><div class="copyright">

  314.   <p>Developed by <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a>.</p>

  315. </div>

  316. 

  317. <div class="pkgdown">

  318.   <p>Site built with <a href="http://pkgdown.r-lib.org/">pkgdown</a>.</p>

  319. </div>

  320. 

  321.       </footer>

  322. </div>

  323. 

  324.   

  325. 

  326.   </body>

  327. </html>