Styles

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

#> color: white; background: #123456;
glue("<div style = '{inline_style}'>Hello #RStats</div>")
Hello #RStats

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
#> color: green !important; background: #123456; font-family: monospace; width: 25%; font-size: 25px;
glue("<div style = '{inline_style}'>Hello #RStats</div>")
Hello #RStats

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
#> carol > .marsha {
#>     color: white;
#>     text-align: center;
#> }
# Or simply use a character string for the selector
(css_style(".greg", colour = 'blue', margin = 'auto'))
#> .greg {
#>     color: blue;
#>     margin: auto;
#> }