Frameworks and Layouts

• Replace UI_starting.R with UI_fluid_page.R in the app.R.

• Run the app

• Pretty ugly, right? Now try replacing tagList with fluidPage

fluidPage()

A fluid page layout consists of rows which in turn contain columns

• Rows ensure that items appear on the same line as long as the browser is wide enough (hence the fluid)

• Columns define how much horizontal space elements should occupy. Horizontal space is defined by a 12-unit wide grid

• Adds some Bootstrap styling (framework for designing websites–developed by Twitter)

fluidRow() and column()

Changing tagList to fluidPage didn’t do much

Let’s add some fluidRows() and column() functions to create this:

The solution is in UI_language_soln.R

fluidPage() is responsive

• Try adjusting the size of your browser window.

• The text adjusts so that it all fits within a single window–no need to scroll left and right!

Other Layouts

Check out the Shiny cheatsheet to see other types of layouts

https://shiny.rstudio.com/images/shiny-cheatsheet.pdf

• tabsetPanel() + tabPanel()

• sidebarLayout() + sidebarPanel()/mainPanel()

• splitLayout()

• wellPanel()

• navbarPage()

• navlistPanel()