CSS Grid and flexbox layouts for R/Shiny
Imola (named after the first city ever to be given a technical blueprint by Leonardo da Vinci) aims at giving more layout creation options directly in R/shiny, without the hassle of having to create custom CSS every time.
CSS Layouts in shiny, made simple
Leverage typical CSS layout techniques (grid and Flexbox) directly in your UI functions, including support for media breakpoints to fit different screen sizes and devices.
Use built in templates, or create your own
Save your favorite layouts for later use via the templating system and reuse them as many times as you need.
If layout creation isn’t your thing, imola comes with a built in collection of templates for traditionally used web layouts, making it even easier to spice up your dashboards!
Browse all available templates here: https://sparktuga.shinyapps.io/imolatemplates/
Examples to get you started
Example applications showcasing some of the power of imola:
- Usage examples: https://sparktuga.shinyapps.io/imola-examples/
- Built in templates preview: https://sparktuga.shinyapps.io/imolatemplates/
- UA Migration Tracker (Full code available): http://uaborder.com/
installation
1 - Install the package:
# Install released version from CRAN
install.packages('imola')
# Or the most recent development version from github:
devtools::install_github('pedrocoutinhosilva/imola')
Usage
Check vignette("imola")
on how to get started, and other follow up vignettes for even more information regarding CSS flexbox and grid and their imola equivalents.
Looking for a specific topic? Use the following vignettes for a quick start:
-
vignette("imola-flexbox")
for details onflexPanel()
andflexPage()
. -
vignette("imola-grid")
for details ongridPanel()
andgridPage()
. -
vignette("imola-templates")
for information on using imola’s templating engine. -
vignette("imola-breakpoints")
for information on using imola’s breakpoint systems.