Skip to content

Latest commit

 

History

History
246 lines (174 loc) · 2.84 KB

slide.md

File metadata and controls

246 lines (174 loc) · 2.84 KB

class: center middle bg-primary text-light

RemarkJS - CSS Guide

Features

  • Bootstrap + Font Awesome
  • Centered List
  • Scaled Image
  • Scrolling
  • Blockquote
  • Columnar Layout
  • Footnote

Bootstrap + Font Awesome

Bootstrap 4 and Font Awesome 5 are available in slides.

Bootstrap Button

Centered List

.blockquote-info[

Guide

Use .fit-content.mx-auto to create a centered list ]

.center[

Example

.fit-content.mx-auto[

  • apple
  • orange
  • pear ] ]

class: center

This is a normal image

But the image is too .text-danger[big] image

class: center

img-100 class to set max width to 100%

.img-100[image]

class: center

img-75 class to set max width to 75%

.img-75[image]

Also available ...

  • img-50
  • img-25

class: center

scroll to enable scrolling for long content

Use together with .img-100 and h-75 to produce a nice overflowed image

.img-100.h-75.scroll[ image ]

Blockquote

.blockquote-primary[

blockquote

This is primary blockquote's content. ]

Syntax

.blockquote-primary[
> #### blockquote
> This is primary blockquote's content.
]

Available styles:
primary, secondary, success, info, warning, danger, light, dark

Two Columns Layout

Use Bootstrap's .row, .col to create columnar layout

.row[ .col-6[

  • This is column 1
    • apple
    • orange ]

.col-6[

  • This is column 2
    • alpha
    • beta
    • see syntax on next slide ] ]

Syntax

.row[
.col-6[
- This is column 1
  + apple
  + orange
]

.col-6[
- This is column 2
  + alpha
  + beta
]
]

class: row

.col-3.bg-light.sidebar[

Sidebar

  • alpha
  • beta ]

.col-9[

Slide with sidebar 1

Note the last sidebar item will be bold italic ]

class: row

.col-3.bg-light.sidebar[

Sidebar

  • alpha
  • beta
  • gamma ]

.col-9[

Slide with sidebar 2

See syntax on next slide ]

class: row

.col-3.bg-light.sidebar[

Sidebar

  • alpha
  • beta
  • gamma ]

.col-9[

Syntax

class: row

.col-3.bg-light.sidebar[
### Sidebar
- alpha
- beta
- gamma
]

.col-9[
// This syntax block
...
]

]

Footnote

This is an example.sup[1] of footnotes.sup[2], link to Google.sup[3] .footnote[

  1. Hello! World.
  2. Footnoting is fun
  3. https://google.com ]

Syntax

This is an example.sup[1] of footnotes.sup[2], link to Google.sup[3]
.footnote[
1. Hello! World.
2. Footnoting is fun
3. https://google.com
]

class: center middle bg-info text-light

.text-danger[♥] Thanks .text-danger[♥]