Skip to content
Build CSS selectors, styles and stylesheets within R
R
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
R
data-raw
deprecated
man
pkgdown/favicon
vignettes
.Rbuildignore
.gitignore
.travis.yml
DESCRIPTION
LICENSE
NAMESPACE
NEWS.md
README.Rmd
README.md

README.md

minicss

Travis build status

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)

Overview

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()

Quick examples

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;}

Installation

You can install the development version from GitHub with:

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

Future

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.

Vignettes

Example: All-in-one example

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# 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>

You can’t perform that action at this time.