Generate dynamic css for a given gridlayout

Generate dynamic css for a given gridlayout

to_css(layout, container_key)

Arguments

layout

Object of class "gridlayout".

container_key

The unique key used to identify the container to be targeted for the layout. If left blank it will default to applying grid styling to the whole app (aka the body element) for whole page grids. If plain character string is given, then it is assumed to be a gridlayout-key and the targeting is done using an attribute query for data-gridlayout-key. If container contains css selector characters such as a dot, the selector will not be transformed into an id automatically. E.g. container = ".main-content".

Value

Character string of css used to setup grid layout and place elements (referenced by id) into correct locations

Examples

grid_obj <- md_to_gridlayout(
  layout_table = "
    |      |120px   |1fr    |1fr    |
    |:-----|:-------|:------|:------|
    |100px |header  |header |header |
    |1fr   |sidebar |plot_a |plot_c |
    |1fr   |sidebar |plot_b |plot_b |"
)

cat(to_css(grid_obj))
#> 
#> body {
#>   display:grid;
#>   grid-template-rows:100px 1fr 1fr;
#>   grid-template-columns:120px 1fr 1fr;
#>   grid-template-areas:
#>     "header  header header"
#>     "sidebar plot_a plot_c"
#>     "sidebar plot_b plot_b";
#>   --grid-gap:12px;
#>   grid-gap:var(--grid-gap);
#>   padding:var(--grid-gap);
#>   height:100%;
#> }
#> 
#> 
#> 
#> @media (max-width:500px) {
#>   body {
#>     display:grid;
#>     grid-template-rows:85px 350px 350px 350px 350px;
#>     grid-template-columns:1fr;
#>     grid-template-areas:
#>       "header "
#>       "sidebar"
#>       "plot_a "
#>       "plot_b "
#>       "plot_c ";
#>     --grid-gap:12px;
#>     grid-gap:var(--grid-gap);
#>     padding:var(--grid-gap);
#>     height:auto;
#>   }
#> }
#>