" /> class: center, middle, inverse, title-slide # Kunoichi ⚔くノ一 ## A xaringan theme for the R-Ladies ninja ### <br><br>Emi Tanaka  <span><i class="fab fa-twitter faa-float animated "></i>@statsgen</span> ### <br><br>2018-09-08, Updated: 2019-10-25 --- class: middle center bg-main1 # Kunoichi #⚔ #くノ一 -- ## The Japanese word for female ninja -- <img src="images/kunoichi.svg" width="40%"> --- class: middle bg-main1 ## Now part of latest development version of `xaringan` <br> ### `devtools::install_github('yihui/xaringan')` <br> ### and add ``` output: xaringan::moon_reader: css: ["kunoichi", "ninjutsu"] ``` --- class: bg-main1 split-30 hide-slide-number .column.bg-main3[ ] .column.slide-in-right[ .sliderbox.bg-main2.vmiddle[ .font5[Split Cells] ]] --- class: split-two white .column.bg-main1[.content[ # A .yellow[kunoichi] can use .yellow[ninjutsu] to .green[split columns] easily. <br> ## Define your classes as* ```{} class: split-two white ``` ## Columns are added easily by ```r *.column.bg-main1[.content[ content of first column ]] *.column.bg-main2[.content[ content of second column ]] ``` ]] .column.bg-main2[.content.vmiddle.center[ # See the R-markdown source file for this slide [here](https://github.com/emitanaka/ninja-theme). <br><br> # * class white changes all the font to white ]] --- class: split-three white .column.bg-main1[.content[ # Use as many columns as you want*. ```{} class: split-three white ``` ```r *.column.bg-main1[.content[ content of first column ]] *.column[.content[ .split-two[ .column.bg-black[.content.vmiddle.center[ This column just got chopped in half. ]] .column.bg-indigo[.content.vmiddle.center[ This column just got chopped in half. ]] ]]] *.column.bg-main1[.content[ content of third column ]] ``` ]] .column[.content[ .split-two[ .column.bg-black[.content.vmiddle.center[ This column just got chopped in half. ]] .column.bg-indigo[.content.vmiddle.center[ This column just got chopped in half. ]] ]]] .column.bg-main1[.content.vmiddle.center[ # * only goes up to split-five <br> # Note: split within split will not work well with later feature. ]] --- class: split-three white center .row.bg-main1[.content.vmiddle[ # A .yellow[kunoichi] can also use .yellow[ninjutsu] to .green[split rows] easily. ]] .row.bg-main2[ .split-three[ .column[ ] .column[ # Same classes: ```{} class: split-three white ``` ] .column[ ] ] ] .row.bg-main3[.content.vmiddle[ # Just add .green[.row] instead of .green[.column] ]] --- layout: true class: split-two .column.bg-main1[.content[ .split-three[ .row[.content[ # You can have a border between splits: ```{} class: split-two with-border ``` ]] .row[.content[ # Or have it thicker ```{} class: split-two with-thick-border ``` ]] .row[.content[ # And easily change border colors ```{} class: split-two with-thick-border border-green ``` Note that to change row-wise border color here, you need to change `.split-three` to `.split-three.border-green`. ]] ] ]] .column.bg-main1[.content.center.vmiddle[ {{content}} ]] ??? Define the layout and for sequence hide the appropriate cell. --- class: hide-row2-col1 hide-row3-col1 with-border  --- class: hide-row1-col1 hide-row3-col1 with-thick-border count: false  --- class: hide-row1-col1 hide-row2-col1 with-thick-border border-green count: false  --- layout: false class: split-three white .column.bg-red[.content[ # A .yellow[kunoichi] can use .yellow[ninpo] to easily .green[transform colors]. ```{} class: split-three white ``` ```r *.column.bg-red[.content[ content of first column ]] *.column.bg-blue[.content[ content of second column ]] *.column.bg-green[.content[ content of third column ]] ``` ]] .column.bg-blue[.content[ # You can easily .red[change text color] as well ```r .bg-white[ .red[this will be red] .green[this will be green] ] ``` Output: .bg-white[ .red[this will be red] .green[this will be green] ] ## Some available colors are: .center[ .bg-brown.pad1[.brown] .bg-gray.pad1[.gray] .bg-blue-gray.pad1[.blue-gray] <br><br><br> .bg-white.pad1.black[.white] .bg-black.pad1[.black] ] <br> ### Other list of predefined colors [here](#color). ]] .column.bg-green[.content[ # .yellow[kunoichi] theme comes with four pre-defined shades of purple: <br> .center[ .bg-main1.pad1[.bg-main1] <br><br><br><br> .bg-main2.pad1[.bg-main2] <br><br><br><br> .bg-main3.pad1[.bg-main3] <br><br><br><br> .bg-main4.pad1[.bg-main4] ] ]] --- name: color class: split-four black with-thick-border center middle border-white bg-black .column[ .split-four[ .row[.content.red[ # Row-1, Col-1 # .red ]] .row.pink[.content[ # Row-2, Col-1 # .pink ]] .row.purple[.content[ # Row-3, Col-1 # .purple ]] .row.deep-purple[.content[ # Row-4, Col-1 # .deep-purple ] ]] ] .column[ .split-four[ .row.cyan[.content[ # Row-1, Col-2 # .cyan ]] .row.light-blue[.content[ # Row-2, Col-2 # .light-blue ]] .row.blue[.content[ # Row-3, Col-2 # .blue ]] .row.indigo[.content[ # Row-4, Col-2 # .indigo ] ]] ] .column[ .split-four[ .row.teal[.content[ # Row-1, Col-3 # .teal ]] .row.green[.content[ # Row-2, Col-3 # .green ]] .row.light-green[.content[ # Row-3, Col-3 # .light-green ]] .row.lime[.content[ # Row-4, Col-3 # .lime ] ]] ] .column[ .split-four[ .row.deep-orange[.content[ # Row-1, Col-4 # .deep-orange ]] .row.orange[.content[ # Row-2, Col-4 # .orange ]] .row.amber[.content[ # Row-3, Col-4 # .amber ]] .row.yellow[.content[ # Row-4, Col-4 # .yellow ] ]] ] <span style="position:absolute; top:48%; left:28%;z-index:1;background-color:white; font-size:3em; padding:0.2em;color:black">Material UI colors</span> --- class: split-four white with-thick-border center middle .column[ .split-four[ .row.bg-red[.content[ # Row-1, Col-1 # .bg-red ]] .row.bg-pink[.content[ # Row-2, Col-1 # .bg-pink ]] .row.bg-purple[.content[ # Row-3, Col-1 # .bg-purple ]] .row.bg-deep-purple[.content[ # Row-4, Col-1 # .bg-deep-purple ] ]] ] .column[ .split-four[ .row.bg-cyan[.content[ # Row-1, Col-2 # .bg-cyan ]] .row.bg-light-blue[.content[ # Row-2, Col-2 # .bg-light-blue ]] .row.bg-blue[.content[ # Row-3, Col-2 # .bg-blue ]] .row.bg-indigo[.content[ # Row-4, Col-2 # .bg-indigo ] ]] ] .column[ .split-four[ .row.bg-teal[.content[ # Row-1, Col-3 # .bg-teal ]] .row.bg-green[.content[ # Row-2, Col-3 # .bg-green ]] .row.bg-light-green[.content[ # Row-3, Col-3 # .bg-light-green ]] .row.bg-lime[.content[ # Row-4, Col-3 # .bg-lime ] ]] ] .column[ .split-four[ .row.bg-deep-orange[.content[ # Row-1, Col-4 # .bg-deep-orange ]] .row.bg-orange[.content[ # Row-2, Col-4 # .bg-orange ]] .row.bg-amber[.content[ # Row-3, Col-4 # .bg-amber ]] .row.bg-yellow[.content[ # Row-4, Col-4 # .bg-yellow ] ]] ] <span style="position:absolute; top:48%; left:28%;z-index:1;background-color:black; font-size:3em; padding:0.2em;">Material UI colors</span> --- layout: true class: shuriken-200 white .blade1.bg-red.content.center[ # I contemplated naming `split` as bunshin, the Japanese word for clone. ]] .blade2.bg-green[.content.vertical-rl.center[ # But I figured it wasn't a clone. ]] .blade3.bg-deep-purple[.content.center[ # I also wouldn't make you [remember words](https://slides.yihui.name/xaringan) from a reference you may not know. ]] .blade4.bg-orange[.content.sideways-rl.center.vmiddle[ # I lie. ]] .hole.bg-black[.content.center.vmiddle[ {{content}} ]] --- class: hide-blade2 hide-blade3 hide-blade4 hide-hole --- class: hide-blade3 hide-blade4 hide-hole count: false --- class: hide-blade4 hide-hole count: false --- class: hide-hole count: false --- count: false # This is ## `class: shuriken-200` --- class: shuriken-reverse-200 # This is ## `class: shuriken-reverse-200` --- layout: false class: shuriken-reverse-100 white with-thick-border border-double .blade1.bg-red.content[ # This is .blade1 ]] .blade2.bg-green[.content.vertical-rl[ # This is .blade2 ]] .blade3.bg-deep-purple[.content[ # This is .blade3 ]] .blade4.bg-orange[.content.sideways-rl[.center[ # This is .blade4 ]]] .hole.bg-black[.content.center.vmiddle[ # This is .hole ## `class: shuriken-100` ## with ## `white` ## `with-thick-border` ## `border-double` ]] --- class: shuriken-300 white with-border border-black .blade1.bg-red[.content[ # To build this slide, define your shuriken class. Then your slide content should contain ```r .blade1[.content[]] .blade4[.content[]] .blade2[.content[]] .hole[.content[]] .blade3[.content[]] ``` ]] .blade2.bg-green[.content.vertical-rl[ # To write vertically ```r .blade2[.content.vertical-rl[]] ``` ]] .blade3.bg-deep-purple[.content[ ```r .blade2[.content.sideways-rl[]] ``` # Vertical writing may need manual fixes however. ## A future update may fix this but if you have a solution, feel free to put in a pull request <span><i class="fab fa-github faa-vertical animated "></i></span>. ]] .blade4.bg-orange[.content.sideways-rl.center[ # To write vertically the other way # &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↓ ]] .hole.bg-black[.content.center[ ## `class: shuriken-300` ]] --- class: bg-main1 center middle hide-slide-number .reveal-text.bg-main2[.pad1[ .font4[Cell Sequential Reveal] ]] --- layout: true class: split-three with-thick-border .column.bg-main1[.content[ # Making split cells is great but to reveal it one slide at a time, I copied the content of the slide multiple times and deleted cell content that I wanted to hide. That's what I did for the slide [here](https://emi-tanaka-asc2018.netlify.com/#2). ]] .column.bg-main2[.content[ # When I made changes to one slide, I had to make the changes for other slides. <br> # .orange[It was painful.] <br> # Using the power of .yellow[ninjutsu] this is made much easier. ]] .column.bg-main3[.content[ # Using .yellow[ninjutsu], you only need to maintain .yellow[one layout slide]. <br> # It is a matter of then defining certain classes to reveal cells in subsequent slides. # .color-main1[Do you want to learn this power?] ]] --- class: show-100 --- class: show-110 count: false --- count: false --- layout: false class: split-33 with-thick-border .column.bg-main1[.content.vmiddle[ .center[ # Layout Slide ] <br><br> ## This is where you should write out full the content of your slides. ]] .column[.content[ # First you need to define your full slide structure. ```{} layout: true class: split-four .column.bg-main1[.content.vmiddle.center[ # Content 1 ]] .column.bg-main2[.content.vmiddle.center[ # Content 2 ]] .column.bg-main3[.content.vmiddle.center[ # Content 3 ]] .column.bg-main4[.content.vmiddle.center[ # Content 4 ]] ``` ### Note: .vmiddle.center centers the content vertically and horizontally. ### Note: you need to have a .content container, otherwise hide may not work ]] --- class: split-33 with-thick-border .column.bg-main1[.content.vmiddle[ # Revealing slide content from left to right column ]] .column[.content[ ## In the subsequent slides define the classes as you want to show it ```{} --- class: show-1000 --- class: show-1100 count: false --- class: show-1110 count: false --- count: false ``` ### Setting count:false stops from incrementing the slide number. ### .red[Set layout:false] for the next slide to stop layout template! ]] --- class: split-33 with-thick-border .column.bg-main1[.content.vmiddle[ # Column reveal can be whatever order you like. ]] .column[.content[ ## This shows the inner two columns only first then the outer columns only in the next slide. ```{} --- class: show-0110 --- class: show-1001 count: false ``` ## Or equivalently you can use ```{} --- class: hide-col1 hide-col4 --- class: hide-col2 hide-col3 count: false ``` ]] --- layout: true class: split-two with-border .column[ .split-five[ .row.bg-main1[.content[ ### This slide can be set-up using the structure on the right. ]] .row.bg-main2[.content[ ### The cells are hidden using ### .yellow[class: hide-row3-col1 hide-row4-col1 hide-row5-col1] ]] .row.bg-main3[.content[ ### If you can see this cell but not below cells then this is: ### .yellow[class: hide-row4-col1 hide-row5-col1] ]] .row.bg-main4[.content[ ### Be sure to check out the corresponding [.purple[R markdown source]](https://github.com/emitanaka/ninja-theme) file for a better idea of how to use it for yourself. ]] .row.bg-main5[.content[ ### There is no need to define the class when revealing all but add .deep-orange[count: false] to stop slide count increment. ]] ]] .column[.content[ ```{} class: split-two with-border .column.bg-main1[ .split-five[ .row.bg-main1[.content[ Row 1, Column 1 content. ]] .row.bg-main2[.content[ Row 2, Column 1 content. ]] .row.bg-main3[.content[ Row 3, Column 1 content. ]] .row.bg-main4[.content[ Row 4, Column 1 content. ]] .row.bg-main5[.content[ Row 5, Column 1 content. ]] ]] .column[.content[ Second column content. ]] ``` ]] --- class: hide-row2-col1 hide-row3-col1 hide-row4-col1 hide-row5-col1 --- class: hide-row3-col1 hide-row4-col1 hide-row5-col1 count: false --- class: hide-row4-col1 hide-row5-col1 count: false --- class: hide-row5-col1 count: false --- count: false --- layout: true class: split-two with-border border-black .column[ .split-five[ .row.bg-main1[.content[ ### Now let's show the `gray` and `fade` features. ]] .row.bg-main2[.content[ ### You can use it the same as `hide` but replace with `fade` or `gray` ]] .row.bg-main3[.content[ ### You can combine both as needed. ]] .row.bg-main4[.content[ ### Do check out the corresponding [.purple[R markdown source]](https://github.com/emitanaka/ninja-theme) file for a better idea of how to use it for yourself. ]] .row.bg-main5[.content[ ### Enjoy using `ninjutsu`. ]] ]] .column[.content[ ```{} class: split-two with-border .column.bg-main1[ .split-five[ .row.bg-main1[.content[ Row 1, Column 1 content. ]] .row.bg-main2[.content[ Row 2, Column 1 content. ]] .row.bg-main3[.content[ Row 3, Column 1 content. ]] .row.bg-main4[.content[ Row 4, Column 1 content. ]] .row.bg-main5[.content[ Row 5, Column 1 content. ]] ]] .column[.content[ Second column content. ]] ``` ]] --- class: fade-row2-col1 fade-row3-col1 fade-row4-col1 fade-row5-col1 --- count: false class: fade-row1-col1 fade-row3-col1 fade-row4-col1 fade-row5-col1 --- count: false class: fade-row1-col1 fade-row2-col1 fade-row4-col1 fade-row5-col1 --- count: false class: fade-row1-col1 fade-row2-col1 fade-row3-col1 fade-row5-col1 --- count: false class: fade-row1-col1 fade-row2-col1 fade-row3-col1 fade-row4-col1 --- class: gray-row2-col1 gray-row3-col1 gray-row4-col1 gray-row5-col1 --- count: false class: gray-row1-col1 gray-row3-col1 gray-row4-col1 gray-row5-col1 --- count: false class: gray-row1-col1 gray-row2-col1 gray-row4-col1 gray-row5-col1 --- count: false class: gray-row1-col1 gray-row2-col1 gray-row3-col1 gray-row5-col1 --- count: false class: gray-row1-col1 gray-row2-col1 gray-row3-col1 gray-row4-col1 --- layout: false class: split-five with-border border-black .column[.content[ .split-five[ .row.bg-main1[.content.center.vmiddle[ # There is ]] .row.bg-main2[.content[ ]] .row.bg-main3[.content[ ]] .row.bg-main4[.content[ ]] .row.bg-main5[.content[ ]] ]]] .column[.content[ .split-five[ .row.bg-main1[.content.center.vmiddle[ # support ]] .row.bg-main2[.content[ ]] .row.bg-main3[.content[ ]] .row.bg-main4[.content.vmiddle.center[ # Next up ]] .row.bg-main5[.content[ ]] ]]] .column[.content[ .split-five[ .row.bg-main1[.content.center.vmiddle[ # upto ]] .row.bg-main2[.content[ ]] .row.bg-main3[.content.nopadding[ .img-fill[] ]] .row.bg-main4[.content[ ]] .row.bg-main5[.content[ ]] ]]] .column[.content[ .split-five[ .row.bg-main1[.content.center.vmiddle[ # five-by-five ]] .row.bg-main2[.content[ ]] .row.bg-main3[.content[ ]] .row.bg-main4[.content.vmiddle.center[ # .yellow[images.] ]] .row.bg-main5[.content[ ]] ]]] .column[.content[ .split-five[ .row.bg-main1[.content.center.vmiddle[ # cells. ]] .row.bg-main2[.content[ ]] .row.bg-main3[.content[ ]] .row.bg-main4[.content[ ]] .row.bg-main5[.content[ ]] ]]] --- class: split-70 hide-slide-number background-image: url("bkgs/bg2.jpg") background-size: cover .column.slide-in-left[ .sliderbox.vmiddle.shade_main.center[ .font5[Image insertion]]] .column[ ] --- class: split-three .column.bg-main1[.content[ # Image insertion can be tricky and a good solution is still in development. .bottom_abs.content[ # Here is some working solution to embed images. ] ]] .column[.split-33[ .row[.content.nopadding[ .img-fill[] ]] .row.bg-main1[.content[ # Here we insert ```{} .row[.content.nopadding[ .img-fill[] ]] ``` ## We need the .yellow[nopadding] so it knows that images should not be padded. ]] ]] .column.bg-main1[.split-three[ .row[.content[ # Here we have ```{} .row[.content.nopadding[ .fig90[] ]] ``` ]] .row[.content.nopadding[ .fig90[] ]] .row.bg-main1[.content[ ## There may be some manual fixing needed for some cases although these should work well for most cases. ]] ]] --- class: bg-main1 # Soon to come .font2[ * .yellow[ninpo] for animated transition slides * explanation of .yellow[shinobi] theme with blue-centric colours and right overlay in title slide (hint: replace kunoichi with shinobi in the css) * and others... ] ## (or you may be able to figure out the features looking at the code) ## You'll find future updates [<span><i class="fab fa-github faa-vertical animated "></i></span> here](https://github.com/emitanaka/ninja-theme) or <br>you'll hear about it [<span><i class="fab fa-twitter faa-float animated "></i></span> here](https://twitter.com/statsgen).