Currently, I am in the process of creating a Shiny App using the golem package. My intention is to incorporate an established design system (located at https://github.com/GouvernementFR/dsfr), which includes numerous css and js files.
Suppose my golem Shiny App is as follows:
app_ui <- function(request) {
tagList(
golem_add_external_resources(),
ui <- fluidPage(
actionButton("button","Button")
))
}
# The server section is not needed for now
app_server <- function(input, output, session) {
}
I am encountering difficulties with certain specifics, such as in the button.css file, where the button is named "fr-btn" instead of the usual "btn". How can I inform my golem Shiny app that my actionButtons should now be referred to as "fr-btn"?
.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 simple method to copy the entire design system folder into my app's www folder and have it operational?
Apologies for any simplistic queries, I am still learning to utilize both the golem framework and custom CSS.