README.md
In coolbutuseless/minicss: CSS Builder

minicss

The goal of minicss is to be able to programatically create CSS styles and style sheets from within R.

minicss objects and output are compabile with Shiny (see the vignette)

minicss is a collection of R6 objects a user creates and encapsulates within one other to build CSS style sheets

| Need to build… | R6 object | alternate initialisation | | ---------------- | ------------------ | ------------------------ | | CSS Properties | | css_prop | | CSS Selectors | Selector$new() | css_sel() | | KeyFrames | Keyframe$new() | css_keyframe() | | | Keyframes$new() | css_keyframes() | | CSS Styles | Style$new() | css_style() | | CSS Style Sheets | StyleSheet$new() | css_stylesheet() |

| CSS Entity | code | result | | ------------- | ----------------------------------------------------- | -------------------------------------------- | | Properties | css_prop$'font-family'$cursive | font-family: cursive; | | | css_prop$'animation-delay'$set(12) | animation-delay: 12; | | Selectors | css_sel('#cindy')$child_of('#carol') | #carol > #cindy | | Inline Styles | css_style(colour='red')$update(margin=0) | color: red; margin: 0; | | CSS Styles | css_style(".red", colour='red', width='100%') | .red { color: red; width: 100% } | | | css_style(".big", css_prop$'font-size'$set('12px')) | .big { font-size: 12px; } | | Style Sheets | css_stylesheet(style1, style2) | .style1 {color:red;} .style2{color:blue;} |

You can install the development version from GitHub with:

# install.packages("devtools")
devtools::install_github("coolbutuseless/minicss")

The CSS specification is a bit wart-y, so there are plenty of weird cases that need to be explicitly handled. Some of these cases are currently handled by minicss, and I’ll add others as they’re needed.

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Build some selectors
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
sel1 <- Selector$new('h1')$class('demo')
sel2 <- css_sel("h2")$class('highlight')

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Build some keyframes for animating elements
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
kf1 <- Keyframe$new('from', color = '#123456')
kf2 <- css_keyframe('to', color = '#1289ae')$translateX(10, 'px')
keyframes  <- Keyframes$new("pulser", kf1, kf2)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Build some styles
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
style1 <- Style$new(
  sel1, 
  css_prop$animation(name = 'pulser', duration = 0.8, direction = 'alternate')
)
style2 <- Style$new('.mini', background_color = 'green')
style3 <- Style$new(sel2, css_prop$`text-decoration`$underline)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Create a style sheet
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
stylesheet <- css_stylesheet(style1, style2, style3, keyframes)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Change my mind about the background colour of 'style2'
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
style2$update(background_colour = '#a0a0ff')

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Create an inline style
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
inline_style <- Style$new(border = "1px solid #123456")$
  update(width = "50%", padding = '10px')$
  as_inline()

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Insert the stylesheet in an example HTML document
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
html <- glue::glue("
<html>
<head>
  <title>Example</title>
  <style>
{stylesheet}
  </style>
</head>
<body>
<div style='{inline_style}'>
<h1 class = 'demo'> Hello #Rstats</h1>
<h2 class='highlight'> A minicss demo! </h2>
This is an example of using <span class='mini'>minicss</span> to manipulate CSS.
</div>
</body>
</html>")

=>  <html>
=>  <head>
=>    <title>Example</title>
=>    <style>
=>  h1.demo { animation: pulser 0.8s infinite alternate; }
=>  .mini { background-color: #a0a0ff; }
=>  h2.highlight { text-decoration: underline; }
=>  @keyframes pulser {
=>      from { color: #123456; }
=>      to {
=>          color: #1289ae;
=>          transform: translateX(10px);
=>      }
=>  }
=>    </style>
=>  </head>
=>  <body>
=>  <div style='border: 1px solid #123456; width: 50%; padding: 10px;'>
=>  <h1 class = 'demo'> Hello #Rstats</h1>
=>  <h2 class='highlight'> A minicss demo! </h2>
=>  This is an example of using <span class='mini'>minicss</span> to manipulate CSS.
=>  </div>
=>  </body>
=>  </html>