18.1 What is CSS

CSS

• “Cascading style sheets”
• Encodes webpage design
  • View a page without CSS (“Web Developer” -> CSS -> Disable All Styles)

18.1.1 Default CSS for {shiny}

Without fluidPage:

library(shiny)

my_tags <- tagList(
  h1("Hey"), 
  h2("You"), 
  p("You rock!"), 
  selectInput("what", "Do you", unique(iris$Species))
)

ui1 <- function(){
  my_tags
}

ui2 <- function(){
  fluidPage(my_tags)
}

empty_server <- function(input, output, session){}

shinyApp(ui1, empty_server)

shinyApp(ui2, empty_server)

Show the HTML

print(ui1())

## <h1>Hey</h1>
## <h2>You</h2>
## <p>You rock!</p>
## <div class="form-group shiny-input-container">
##   <label class="control-label" id="what-label" for="what">Do you</label>
##   <div>
##     <select id="what"><option value="setosa" selected>setosa</option>
## <option value="versicolor">versicolor</option>
## <option value="virginica">virginica</option></select>
##     <script type="application/json" data-for="what" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
##   </div>
## </div>

print(ui2())

## <div class="container-fluid">
##   <h1>Hey</h1>
##   <h2>You</h2>
##   <p>You rock!</p>
##   <div class="form-group shiny-input-container">
##     <label class="control-label" id="what-label" for="what">Do you</label>
##     <div>
##       <select id="what"><option value="setosa" selected>setosa</option>
## <option value="versicolor">versicolor</option>
## <option value="virginica">virginica</option></select>
##       <script type="application/json" data-for="what" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
##     </div>
##   </div>
## </div>