R shiny app using golem : how to use existing design system (CSS+JS)?

Question

I'm developing a Shiny App using the golem package. I want to use an existing design system (https://github.com/GouvernementFR/dsfr), full of css & js files.

Let's say my golem Shiny App is just :

app_ui <- function(request) {
  tagList(
    golem_add_external_resources(),
    ui <- fluidPage(
      actionButton("button","Button")
  ))
}
# Useless server
app_server <- function(input, output, session) {
}

I'm struggling with details, like for example in the button.css file, the button is not simply referenced as "btn" as usual but "fr-btn". How do I tell my golem Shiny app that my actionButtons would be called "fr-btn" from now on ?

.fr-btn {
  --text-spacing: 0;
  --title-spacing: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  --idle: transparent;
  color: var(--text-inverted-blue-france);
}

Is there a way to simply drop the whole design system folder in the www folder of my app and get it working ?

Sorry for the naive approach, I'm still learning to use both the golem framework and the custom CSS.

Colin FAY · Accepted Answer · 2023-09-08 13:59:42Z

3

We've started to integrate the dsfr in {shinygouv}:

https://github.com/spyrales/shinygouv

Note that not everything is implemented, but that should do the trick :)

Colin

answered Sep 8, 2023 at 13:59

Colin FAY

5,1291 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DianeBeldame Over a year ago

any feedback (doc, issue...) appreciated, thanks

Collectives™ on Stack Overflow

R shiny app using golem : how to use existing design system (CSS+JS)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related