Remark: List of CSS Themes for RemarkJS

[xaprb]

I'm starting to work on a CSS theme framework. My idea at the moment is to separate the layout and styling of the text and other items.

Slide layouts are a fairly typical feature of presentation themes in any presentation tool such as PPT or Keynote, for example:

• Title and full-width content
• Image and caption
• Title, left column for text content, right column for an image

And so on. My thought is to create those layouts in one set of CSS as class names you can apply to a slide, and then use another set of CSS classes to change things like color, font, bullet stylings, and so on. Any thoughts on this topic are welcome.

Initially I'm simply going to list other Remark slide styles I've found. Please comment with more:

• my own
• https://github.com/sfc-arch/remark-theme
• https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/default.css
• Presla

[mschilli87]

xaringan comes with more than the default CSS: https://github.com/yihui/xaringan/tree/master/inst/rmarkdown/templates/xaringan/resources

[emitanaka]

xaringan is an R wrapper for remarkjs (plus has some other useful features) and so if you use R, you can use also use xaringanthemer to customise your slides.
You can also see css themes here that allows for easy column/row splits in the slide.

[xaprb]

I've been working on the theme I had in mind, for a while; and I decided to just leave it as a part of my Hugo static site blog theme. I've published that blog theme's demo site at https://story.xaprb.com/ and you can see the built-in Remark theme's capabilities at https://story.xaprb.com/slides/

I'm going to close this issue since it doesn't seem like it is going to be "fixed." However there's no harm in adding comments with more themes, so I encourage anyone who wants to, to add more information to this issue even after it's closed!

[mschilli87]

@xaprb: Could apron be used with xaringan or is there more than CSS/JS to it?

[xaprb]

Apron is pure CSS and could be used alone. I don't know xaringan. I built Apron so that I don't need to use any special markup, but the compromise I made in order to do that, is that it assumes certain conventions about the markup. For example, in some layouts it assumes the first content will be an image, and in others it assumes the first content will be an H1.

[mschilli87]

@xaprb: Would you mind sharing a direct link to the CSS and if I get it to work in xaringan to submit it as a theme there?

[xaprb]

Sure: it is https://story.xaprb.com/css/apron.css or https://story.xaprb.com/css/apron.less

On the source github repo, it's https://github.com/xaprb/story/blob/master/static/css/apron.css or https://github.com/xaprb/story/blob/master/static/css/apron.less

[1-2-3]

I made a template for remarkjs that contains some themes, layouts, and components. I hope it works for you.
demo | source