minicss
minicss copied to clipboard
Published
20 hours ago •
coolbutuseless
coolbutuseless
Build CSS selectors, styles and stylesheets within R
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)
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>
Metadata
29
Stars
1
Forks
Watchers
Owner
coolbutuseless
Metadata
Build CSS selectors, styles and stylesheets within R