Learn R Programming

cascadess

A style pronoun and utilities for {htmltools} tags.

What can I use cascadess for?

  • Change background color
  • Vertically stack action buttons
  • Optimize control panel layout for smaller screens
  • Affix an element to the top of the webpage
  • Increase or decrease space between html elements
  • Force text to upper, lower, or title case

Most importantly, cascadess's styles can be used with any shiny related package and are designed to not clash with or overwrite existing CSS styles.

Why a pronoun?

Cascadess defines a style pronoun, .style, usable inside htmltools::tags HTML builder functions. With .style you can specify styling directly within the builder function call, which helps the reader immediately understand how the HTML tag element is styled. Without the .style pronoun, styling is applied after the function call, e.g div() %>% margin() %>% background().

library(htmltools)
library(cascadess)

div(
  .style %>%
    margin(2) %>%
    border("indigo") %>%
    shadow("medium"),
  p("Fusce sagittis, libero non molestie mollis, magna",
    "orci ultrices dolor, at vulputate neque nulla lacinia eros.")
)

Usage

The cascadess() function must be included in a UI so the necessary CSS files are found.

ui <- list(
  cascadess(),
  h4(
    .style %>%
      font(case = "upper") %>%
      border(bottom = "red"),
    "Etiam vel tortor sodales tellus ultricies commodo."
  )
)

Installation

The stable version may be installed from CRAN.

install.packages("cascadess")

The development version may be installed from the master branch.

## install.packages("devtools")
devtools::install_github("nteetor/cascadess")

Copy Link

Version

Install

install.packages('cascadess')

Monthly Downloads

468

Version

0.1.0

License

MIT + file LICENSE

Issues

Pull Requests

Stars

Forks

Maintainer

Nathan Teetor

Last Published

November 30th, 2020

Functions in cascadess (0.1.0)

gap

Grid element spacing
display

Display
border

Borders
cascadess

Cascadess
shadow

Shadows
align

Inline alignment
background

Backgrounds
flex

Flex
margin

Margins
overflow

Overflow
reexports

Objects exported from other packages
float

Floats
responsive

Understanding responsive arguments
text

Text
visible

Element visibility
style-pronoun

Style pronoun
padding

Padding
position

Position an element
font

Font
height

Height
item

Flex items
local_style

Style pronoun contexts
width

Width