| Title: | Convenient 'CSS' for 'Shiny' and 'Rmarkdown' |
|---|---|
| Description: | Conveniently generate 'CSS' from R to use in 'Shiny', 'Rmarkdown', 'htmlwidgets', and many other places where 'CSS' is valid. |
| Authors: | John Coene [aut, cre] |
| Maintainer: | John Coene <[email protected]> |
| License: | MIT + file LICENSE |
| Version: | 0.0.2 |
| Built: | 2026-05-15 09:39:30 UTC |
| Source: | https://github.com/johncoene/linne |
Convenience functions for common operations.
important_(value) url_(value) rgb_(r, g, b) rgba_(r, g, b, a = 0.5)important_(value) url_(value) rgb_(r, g, b) rgba_(r, g, b, a = 0.5)
value |
Value to use. |
r, g, b, a
|
Red, green, blue, and alpha values. |
important_() - Makes it such that the rule cannot be overwritten by other rules (other selections).
rgb_(), rgba_() - Functions for red, green, blue and alpha for transparency.
url_() - Wrap in a url CSS function call.
Linne$ new()$ rule( sel_id("id"), color = rgba_(255, 255, 255, .6), fontSize = important_(20) )Linne$ new()$ rule( sel_id("id"), color = rgba_(255, 255, 255, .6), fontSize = important_(20) )
Generate CSS from R code. Initialise a new CSS environment with new,
use rule to define CSS rules.
There are hundreds of attributes to pass to the three-dot
construct (...), a comprehensive list of them can be found on
w3schools.
Note that Linne accepts camelCase for convenience, e.g.: font-size or fontSize.
define()
Linne$define(...)
...Named variables to define.
Define variables.
Self: the Linne object.
Linne$new()$define(baseColor = "blue")
rule()
Linne$rule(selector, ...)
selectorAn object of class selector as returned by the sel_* family of functions.
...Declarations: properties and their values. This accepts
camelcase, e.g.: font-style or fontStyle.
Rule
Define a CSS rule.
Self: the Linne object.
Linne$new()$rule(sel_id("myButton"), color = "blue", fontSize = 50)
build()
Linne$build()
Builds CSS
Builds the CSS from definitions and rules.
Linne$
new()$
define(primary_color = 'red')$
rule(
sel_id("myButton"),
color = primary_color,
fontSize = 50
)$
rule(
sel_class("container"),
backgroundColor = primary_color
)$
build()
get_css()
Linne$get_css(build = TRUE)
buildWhether to build the CSS with the build method.
Retrieve the CSS
A string.
Linne$new()$rule(sel_id("myId"), fontSize = 20)$get_css()
show_css()
Linne$show_css(build = TRUE)
buildWhether to build the CSS with the build method.
Prints Generated CSS
Linne$new()$rule(sel_id("myButton"), color = "blue")$show_css()
import()
Linne$import(url)
urlURL to import.
Import
Import from a url or path.
Linne$new()$import('https://fonts.googleapis.com/css2?family=Roboto')
include()
Linne$include(build = TRUE)
buildWhether to build the CSS with the build method.
Include in Shiny
Includes the CSS in shiny, place the call to this method anywhere in the shiny UI.
# generate CSS
css <- Linne$
new()$
define(grey = '#c4c4c4')$
rule(
sel_id("myButton"),
backgroundColor = 'red',
fontSize = 20,
color = grey
)$
rule(
sel_class("aClass"),
color = grey
)
# include in an app
library(shiny)
ui <- fluidPage(
css$include(),
h1("Some text", class = "aClass"),
actionButton("myButton", "Am I red?", class = "aClass")
)
server <- function(input, output){
output$myPlot <- renderPlot(plot(cars))
}
if(interactive())
shinyApp(ui, server)
write()
Linne$write(path = "style.css", pretty = FALSE, build = TRUE)
pathPath to file.
prettyWhether to keep tabs and newlines.
buildWhether to build the CSS with the build method.
Save
Write the CSS to file.
if(interactive())
Linne$new()$rule(sel_id("id"), fontStyle = "italic")$write("styles.css")
print()
Linne$print()
Prints information on the Linne object.
inject()
Linne$inject(build = TRUE, session = shiny::getDefaultReactiveDomain())
buildWhether to build the CSS with the build method.
sessionA valid shiny session.
Inject CSS
Dynamically inject CSS from the server of a shiny application.
library(shiny)
ui <- fluidPage(
useLinne(),
actionButton("change", "Change me!")
)
server <- function(input, output){
linne <- Linne$
new()$
rule(
sel_id("change"),
color = "white",
backgroundColor = "black"
)
observeEvent(input$change, {
linne$inject()
})
}
if(interactive())
shinyApp(ui, server)
clone()
The objects of this class are cloneable with this method.
Linne$clone(deep = FALSE)
deepWhether to make a deep clone.
## ------------------------------------------------ ## Method `Linne$define` ## ------------------------------------------------ Linne$new()$define(baseColor = "blue") ## ------------------------------------------------ ## Method `Linne$rule` ## ------------------------------------------------ Linne$new()$rule(sel_id("myButton"), color = "blue", fontSize = 50) ## ------------------------------------------------ ## Method `Linne$build` ## ------------------------------------------------ Linne$ new()$ define(primary_color = 'red')$ rule( sel_id("myButton"), color = primary_color, fontSize = 50 )$ rule( sel_class("container"), backgroundColor = primary_color )$ build() ## ------------------------------------------------ ## Method `Linne$get_css` ## ------------------------------------------------ Linne$new()$rule(sel_id("myId"), fontSize = 20)$get_css() ## ------------------------------------------------ ## Method `Linne$show_css` ## ------------------------------------------------ Linne$new()$rule(sel_id("myButton"), color = "blue")$show_css() ## ------------------------------------------------ ## Method `Linne$import` ## ------------------------------------------------ Linne$new()$import('https://fonts.googleapis.com/css2?family=Roboto') ## ------------------------------------------------ ## Method `Linne$include` ## ------------------------------------------------ # generate CSS css <- Linne$ new()$ define(grey = '#c4c4c4')$ rule( sel_id("myButton"), backgroundColor = 'red', fontSize = 20, color = grey )$ rule( sel_class("aClass"), color = grey ) # include in an app library(shiny) ui <- fluidPage( css$include(), h1("Some text", class = "aClass"), actionButton("myButton", "Am I red?", class = "aClass") ) server <- function(input, output){ output$myPlot <- renderPlot(plot(cars)) } if(interactive()) shinyApp(ui, server) ## ------------------------------------------------ ## Method `Linne$write` ## ------------------------------------------------ if(interactive()) Linne$new()$rule(sel_id("id"), fontStyle = "italic")$write("styles.css") ## ------------------------------------------------ ## Method `Linne$inject` ## ------------------------------------------------ library(shiny) ui <- fluidPage( useLinne(), actionButton("change", "Change me!") ) server <- function(input, output){ linne <- Linne$ new()$ rule( sel_id("change"), color = "white", backgroundColor = "black" ) observeEvent(input$change, { linne$inject() }) } if(interactive()) shinyApp(ui, server)## ------------------------------------------------ ## Method `Linne$define` ## ------------------------------------------------ Linne$new()$define(baseColor = "blue") ## ------------------------------------------------ ## Method `Linne$rule` ## ------------------------------------------------ Linne$new()$rule(sel_id("myButton"), color = "blue", fontSize = 50) ## ------------------------------------------------ ## Method `Linne$build` ## ------------------------------------------------ Linne$ new()$ define(primary_color = 'red')$ rule( sel_id("myButton"), color = primary_color, fontSize = 50 )$ rule( sel_class("container"), backgroundColor = primary_color )$ build() ## ------------------------------------------------ ## Method `Linne$get_css` ## ------------------------------------------------ Linne$new()$rule(sel_id("myId"), fontSize = 20)$get_css() ## ------------------------------------------------ ## Method `Linne$show_css` ## ------------------------------------------------ Linne$new()$rule(sel_id("myButton"), color = "blue")$show_css() ## ------------------------------------------------ ## Method `Linne$import` ## ------------------------------------------------ Linne$new()$import('https://fonts.googleapis.com/css2?family=Roboto') ## ------------------------------------------------ ## Method `Linne$include` ## ------------------------------------------------ # generate CSS css <- Linne$ new()$ define(grey = '#c4c4c4')$ rule( sel_id("myButton"), backgroundColor = 'red', fontSize = 20, color = grey )$ rule( sel_class("aClass"), color = grey ) # include in an app library(shiny) ui <- fluidPage( css$include(), h1("Some text", class = "aClass"), actionButton("myButton", "Am I red?", class = "aClass") ) server <- function(input, output){ output$myPlot <- renderPlot(plot(cars)) } if(interactive()) shinyApp(ui, server) ## ------------------------------------------------ ## Method `Linne$write` ## ------------------------------------------------ if(interactive()) Linne$new()$rule(sel_id("id"), fontStyle = "italic")$write("styles.css") ## ------------------------------------------------ ## Method `Linne$inject` ## ------------------------------------------------ library(shiny) ui <- fluidPage( useLinne(), actionButton("change", "Change me!") ) server <- function(input, output){ linne <- Linne$ new()$ rule( sel_id("change"), color = "white", backgroundColor = "black" ) observeEvent(input$change, { linne$inject() }) } if(interactive()) shinyApp(ui, server)
Convenient pipes for more sophisticated selectors.
lhs %child% rhs lhs %or% rhs lhs %with% rhslhs %child% rhs lhs %or% rhs lhs %with% rhs
lhs, rhs
|
Selectors as returned by |
%child% - Selects elements where right hand is child of left hand, e.g.: sel_tag('div') %child% sel_class('aClass') selects elements with aClass who are direct children of div tags.
%or% - Select left hand or right hand, e.g.: sel_id('myId') %or% sel_class('myClass') will select both the element with the id and elements with the class. Ideal to select and apply rules multiple elements at once.
%with% - Left hand selector with right hand selector, e.g.: sel_tag('div') %with% sel_class('aClass') selects a div with a class of aClass. Ideal to narrow down the selection.
# select all paragraph 'p' with "red" class sel_tag("p") %with% sel_class("red") # the other way around works equally well sel_class("red") %with% sel_tag("p") # select multiple elements # where id = "x" or class = "center" sel_id("x") %or% sel_class("center") # select element with id = "x" and parent's id = "y" sel_id("y") %child% sel_id("y")# select all paragraph 'p' with "red" class sel_tag("p") %with% sel_class("red") # the other way around works equally well sel_class("red") %with% sel_tag("p") # select multiple elements # where id = "x" or class = "center" sel_id("x") %or% sel_class("center") # select element with id = "x" and parent's id = "y" sel_id("y") %child% sel_id("y")
Create selectors to select particular elements.
sel_id(value, ns = NULL) sel_input(value) sel_all() sel_class(value) sel_tag(value) sel_attr(attribute, value = NULL, tag = NULL)sel_id(value, ns = NULL) sel_input(value) sel_all() sel_class(value) sel_tag(value) sel_attr(attribute, value = NULL, tag = NULL)
value |
Value of selector. |
ns |
Shiny namespace, only applicable to |
attribute |
Name of attribute. |
tag |
Name of tag. |
The functions will print in the console the CSS selector they compose.
sel_id() - Select an object by its id, e.g.: sel_id('btn') selects shiny::actionButton('btn', 'Button').
sel_all() - Selects everything.
sel_input() - Selects an input by its id, e.g.: sel_id('txt') selects shiny::textInput('txt', 'Text').
sel_class() - Select all elements bearing a specific class, e.g.: sel_class('cls'), selects shiny::h1('hello', class = 'cls').
sel_tag() - Select all tags, e.g.: sel_tag('p') selects p('hello').
sel_attr() - Select all tags with a specific attribute.
%with%, %or%, and %child% as well as
when_active(), when_hover(), and when_focus()
for more sophisticated element selection.
# select element where id = x sel_id("x") # select all elements with class = "container" sel_class("container")# select element where id = x sel_id("x") # select all elements with class = "container" sel_class("container")
Imports dependencies necessary for the inject method to work.
Pace this function in your shiny UI.
useLinne()useLinne()