Get Started

Source: vignettes/get-started.Rmd

Introduction

There are two core actions to linne: first you select an element (e.g.: a button) then apply changes (e.g.: change the colour).

At its core the package consists of a family of selectors and a reference class. This reference class is instantiated from the Linne object with the new method.

linne <- Linne$new()

Almost every method returns the Line object (self) so it can be easily piped.

Select

A core concept is that of selecting elements (to subsequently change their style). This is done mainly via the sel_* family of functions.

shiny::p("Hello Linne", id = "myId")
#> <p id="myId">Hello Linne</p>

For instance, were one want to change the style of the element above, one could select it using its id with:

sel_id("myId")
#> ℹ CSS selector: #myId

Note that this prints the console the actual CSS selector it generates. There are many such sel_* functions, one could also select all p() and change them all at once.

sel_tag("p")
#> ℹ CSS selector: p

The selectors are not useful on their own, they are meant to be used together with the rule method where they indicate the element(s) one wants to change.

Rule

With elements selected one can change the way they look. There are way too many such attributes to list, you will find a comprehensive list on w3schools.

linne <- Linne$
  new()$
  rule(
    sel_id("myId"),
    fontSize = 20,
    color = "blue"
  )

Two things to note on the above, linne automatically converts integers and numerics into pixels: the above changes the size of the font of the element with id = "myId" to 20 pixels. Second, linne accepts camelCase, where the CSS uses hyphens: above we use fontSize instead of font-size. Note that you may pass the original CSS attributes but have to do so with backticks.

Show CSS

In order to learn and understand more about CSS you can use the show_css method to print the generated CSS to the console.

Linne$
  new()$
  rule(
    sel_tag("p"),
    fontSize = 30,
    fontStyle = "italic",
    color = "darkblue"
  )$
  show_css()
#> p{
#>  font-size:30px;
#>  font-style:italic;
#>  color:darkblue;
#> }

Include

Thus far we have generated CSS with linne but are yet to include it anywhere, below we show how to include it in a shiny application.

library(shiny)
library(linne)

linne <- Linne$
  new()$
  rule(
    sel_tag("p"),
    fontSize = 30,
    fontStyle = "italic",
    color = "darkblue"
  )

ui <- fluidPage(
  linne$include(),
  p("Hello {linne}!")
)

server <- function(input, output) {}

shinyApp(ui, server)
Output with linne

Output with linne

Use in R markdown

Example

Below using child to only apply changes to the h2 tag within the container.

library(shiny)
library(linne)

# change color fo h2 inside container.
linne <- Linne$
  new()$
  rule(
    sel_class("container") %child% sel_tag("h2"),
    color = "#2a9d8f"
  )

ui <- fluidPage(
  linne$include(), # include CSS
  h2("Linne in action!"),
  div(
    class = "container",
    h2("This is a different color")
  )
)

server <- function(input, output){}

shinyApp(ui, server)
Select child

Select child