In coolbutuseless/minicss: CSS Builder

knitr::opts_chunk$set(
  collapse = FALSE,
  comment = "#>"
)

library(minicss)
library(glue)

Inline styles

A style is a collection of property/value pairs (called declarations).

Use the prop helper to auto-complete some common property name/value pairs.

Use the imp() function to create an !important property.

Inline styles - Example 1

inline_style <- Style$new(color = 'white', background = '#123456')
inline_style

glue("<div style = '{inline_style}'>Hello #RStats</div>")

# Inline styles don't show up on github READMEs
htmltools::HTML(glue("<div style = '{inline_style}'>Hello #RStats</div>"))

Inline styles - Example 2

Update the pervious style. Use the prop helper which uses autocomplete to help build a standard property/value pair.

inline_style$
  update(css_prop$`font-family`$monospace)$
  update(width = "25%", imp(color = 'green'), font_size = "25px")

inline_style

glue("<div style = '{inline_style}'>Hello #RStats</div>")

# Inline styles don't show up on github READMEs
htmltools::HTML(glue("<div style = '{inline_style}'>Hello #RStats</div>"))

CSS Styles

CSS styles are identical to inline styles, except they must include a selector - this may be either a character string or a Selector object.

The selector can either be defined explicitly with a selector = "greg" argument, of if there is a single unnamed argument, that is assumed to be the selector.

# Build a selector first
selector <- css_sel(".marsha")$child_of('carol')

# Build a style using this selector
style <- css_style(selector, colour = 'white')$
  update(css_prop$`text-align`$center)

style

# Or simply use a character string for the selector
(css_style(".greg", colour = 'blue', margin = 'auto'))

coolbutuseless/minicss documentation built on Nov. 4, 2019, 9:13 a.m.