R/bulma-demo-layout.R

In tjpalanca/bulma.R: Bulma CSS Framework for R

bulma_demo_layout <- function() {

  bulma_demo_nav(
    size = "small",
    "Block"     = bulma_demo_layout_block(),
    "Box"       = bulma_demo_layout_box(),
    "Container" = bulma_demo_layout_container(),
    "Content"   = bulma_demo_layout_content(),
    "Flex"      = bulma_demo_layout_flex(),
    "Level"     = bulma_demo_layout_level(),
    "Media"     = bulma_demo_layout_media(),
    "Hero"      = bulma_demo_layout_hero(),
    "Section"   = bulma_demo_layout_section(),
    "Footer"    = bulma_demo_layout_footer(),
    "Tiles"     = bulma_demo_layout_tiles()
  )

}

bulma_demo_layout_block <- function() {

  bulma_container(
    bulma_title("Block"),
    bulma_subtitle("Bulma's most basic spacer block"),
    bulma_demo_side(div(
      bulma_block("This is a block"),
      bulma_block("This is a second block"),
      bulma_block("This is a third block")
    )),
    bulma_demo_side(div(
      div("This is not a block"),
      div("This is not a second block"),
      div("This is not a third block")
    ))
  )

}

bulma_demo_layout_box <- function() {

  bulma_container(
    bulma_title("Box"),
    bulma_subtitle("A white box to contain other elements"),
    bulma_demo_side(
      bulma_box("I'm inside a box")
    ),
    bulma_demo_side(
      bulma_box(
        bulma_form(
          bulma_form_field(
            bulma_form_label("Email"),
            bulma_form_control(bulma_form_input("email", type = "email"))
          ),
          bulma_form_field(
            bulma_form_control(bulma_form_button("submit", value = "Submit"))
          )
        )

      )
    )
  )

}

bulma_demo_layout_content <- function() {

  bulma_container(
    bulma_title("Content"),
    bulma_subtitle("A single class to handle WYSIWYG generated content, where
                   only HTML tags are available."),
    bulma_demo_side(
      bulma_content(
        tags$h1("Hello world!"),
        tags$p(stri_rand_lipsum(1L)),
        tags$ol(
          tags$li("Item 1"),
          tags$li("Item 2")
        )
      )
    ),
    bulma_demo_side(
      bulma_content(
        size = "small",
        tags$h1("Hello world!"),
        tags$p(stri_rand_lipsum(1L)),
        tags$ol(
          tags$li("Item 1"),
          tags$li("Item 2")
        )
      )
    ),
    bulma_demo_side(
      bulma_markdown(
        "### Header 3",
        "This is in **markdown**."
      )
    ),
    bulma_demo_side(
      bulma_code({
        bulma_assets() # nocov
      })
    )
  )

}

bulma_demo_layout_container <- function() {

  bulma_container(
    bulma_title("Container"),
    bulma_subtitle("A simple container to center your content horizontally"),
    bulma_demo_down(div(
      bulma_container(
        style = css(background_color = "gray"),
        bulma_content("Default")
      ),
      bulma_container(
        style = css(background_color = "gray"),
        bulma_content("Widescreen"),
        breakpoint = "widescreen"
      ),
      bulma_container(
        style = css(background_color = "gray"),
        bulma_content("Full HD"),
        breakpoint = "fullhd"
      ),
      bulma_container(
        style = css(background_color = "gray"),
        bulma_content("Max Desktop"),
        breakpoint = "max-desktop"
      ),
      bulma_container(
        style = css(background_color = "gray"),
        bulma_content("Max Widescreen"),
        breakpoint = "max-widescreen"
      ),
      bulma_container(
        style = css(background_color = "gray"),
        bulma_content("Fluid"),
        fluid = TRUE
      )
    ))
  )

}

bulma_demo_layout_flex <- function() {



  bulma_container(
    bulma_title("Flex"),
    bulma_subtitle("Helpers for all Flexbox properties"),
    bulma_demo_side({
      demo_box <- bulma_box(
        div("First"),
        div("Second"),
        div("Third")
      )
      div(
        bulma_flex(demo_box, direction = "column"),
        bulma_flex(demo_box, direction = "row")
      )

    })
  )

}

bulma_demo_layout_level <- function() {

  bulma_container(
    bulma_title("Level"),
    bulma_subtitle("A multi-purpose horizontal level, which can contain almost
                   any other element"),
    bulma_demo_down(
      bulma_level(
        bulma_level_left(
          bulma_level_item(
            bulma_subtitle(tags$strong("123"), "posts", size = 5L)
          ),
          bulma_level_item(
            bulma_form_field(
              attach = TRUE,
              bulma_form_control(
                bulma_form_input(name = "text", placeholder = "Find a post")
              ),
              bulma_form_control(
                bulma_button("Search")
              )
            )
          )
        ),
        bulma_level_right(
          bulma_level_item(tags$strong("All")),
          bulma_level_item(tags$a("Published")),
          bulma_level_item(tags$a("Drafts")),
          bulma_level_item(tags$a("Deleted")),
          bulma_level_item(bulma_button("New", color = "info"))
        )
      )
    ),
    bulma_demo_down(
      bulma_level(
        bulma_level_item(
          class = "has-text-centered",
          div(
            bulma_heading("Tweets"),
            bulma_title("3456")
          )
        ),
        bulma_level_item(
          class = "has-text-centered",
          div(
            bulma_heading("Following"),
            bulma_title("123")
          )
        ),
        bulma_level_item(
          class = "has-text-centered",
          div(
            bulma_heading("Followers"),
            bulma_title("456")
          )
        )
      )
    )
  )

}

bulma_demo_layout_media <- function() {

  bulma_container(
    bulma_title("Media Object"),
    bulma_subtitle("The famous media object prevalent in social media
                   interfaces, but useful in any context"),
    bulma_demo_side(
      bulma_media(
        bulma_media_left(
          bulma_image(square = 64, src = "https://via.placeholder.com/128")
        ),
        bulma_media_content(
          bulma_content(
            tags$p(
              tags$strong("Juan dela Cruz"),
              tags$small("@juandelacruz"),
              tags$small("31m"),
              tags$br(),
              stri_rand_lipsum(1L)
            )
          ),
          bulma_level(
            bulma_level_left(
              class = "has-text-link",
              bulma_level_item(bulma_icon("fas fa-reply")),
              bulma_level_item(bulma_icon("fas fa-retweet")),
              bulma_level_item(bulma_icon("fas fa-heart"))
            )
          )
        ),
        bulma_media_right(bulma_button_delete())
      )
    ),
    bulma_demo_side(
      bulma_media(
        bulma_media_left(
          bulma_image(square = 64, src = "https://via.placeholder.com/128")
        ),
        bulma_media_content(
          tags$p(
            tags$strong("Juana de la Corazon"), tags$br(),
            str_sub(stri_rand_lipsum(1L), 1, 100), tags$br(),
            tags$small(tags$a("Like"), " - ",
                       tags$a("Reply"), " - ",
                       tags$a("3 hrs"))
          ),
          bulma_media(
            bulma_media_left(
              bulma_image(square = 64, src = "https://via.placeholder.com/128")
            ),
            bulma_media_content(
              tags$p(
                tags$strong("Reply Guy 1"), tags$br(),
                str_sub(stri_rand_lipsum(1L), 1, 100), tags$br(),
                tags$small(tags$a("Like"), " - ",
                           tags$a("Reply"), " - ",
                           tags$a("3 hrs"))
              ),
              bulma_media(
                bulma_media_content(
                  str_sub(stri_rand_lipsum(1L), 1, 100)
                )
              )
            )
          )
        )
      )
    )
  )

}

bulma_demo_layout_hero <- function() {

  bulma_container(
    bulma_title("Hero"),
    bulma_subtitle("An imposing hero banner to showcase something"),
    bulma_demo_down(
      bulma_hero(
        bulma_hero_body(
          bulma_title("A really cool website"),
          bulma_subtitle("Cooler than you")
        )
      )
    ),
    bulma_demo_down(
      bulma_hero(
        color = "primary",
        bulma_hero_body(
          bulma_title("Primary hero title"),
          bulma_subtitle("Cooler than you")
        )
      )
    ),
    bulma_demo_down(div(
      bulma_hero(
        size = "small", color = "info",
        bulma_hero_body(
          bulma_title("Small Hero"),
          bulma_subtitle("Cooler than you")
        )
      ),
      bulma_hero(
        size = "medium", color = "link",
        bulma_hero_body(
          bulma_title("Medium Hero"),
          bulma_subtitle("Cooler than you")
        )
      ),
      bulma_hero(
        size = "large",  color = "warning",
        bulma_hero_body(
          bulma_title("Large Hero"),
          bulma_subtitle("Cooler than you")
        )
      )
    )),
    bulma_demo_down(
      bulma_hero(
        size = "halfheight",
        color = "danger",
        bulma_hero_body(
          div(
            bulma_title("Halfheight hero"),
            bulma_subtitle("Get moving")
          )
        )
      )
    ),
    bulma_demo_down(
      bulma_hero(
        size = "fullheight",
        color = "warning",
        bulma_hero_body(
          div(
            bulma_title("Fullheight hero"),
            bulma_subtitle("Get moving now")
          )
        )
      )
    ),
    bulma_demo_down(div(
      bulma_navbar(
        bulma_navbar_brand(
          bulma_navbar_burger(style = css(display = "block")),
          bulma_navbar_burger(style = css(display = "block"))
        )
      ),
      bulma_hero(
        size = "fullheight",
        color = "link",
        fullheight_with_navbar = TRUE,
        bulma_hero_body(
          div(
            bulma_title("Fullheight hero with navigation bar"),
            bulma_subtitle("Get moving now")
          )
        )
      )
    )),
    bulma_demo_down(
      bulma_hero(
        color = "primary",
        bulma_hero_head(
          bulma_navbar(
            bulma_navbar_brand(
              bulma_navbar_burger(style = css(display = "block")),
              bulma_navbar_burger(style = css(display = "block"))
            )
          )
        ),
        bulma_hero_body(
          div(
            bulma_title("Combination with tabs"),
            bulma_subtitle("Nice little thing")
          )
        ),
        bulma_hero_foot(
          bulma_tabs(
            align = "centered", boxed = TRUE,
            bulma_tabs_item("Overview", active = TRUE),
            bulma_tabs_item("Modifiers"),
            bulma_tabs_item("Grid"),
            bulma_tabs_item("Elements")
          )
        )
      )
    )

  )

}

bulma_demo_layout_section <- function() {

  bulma_container(
    bulma_title("Section"),
    bulma_subtitle("A simple container to divide your page into sections,
                   like the one youre currently reading"),
    bulma_demo_down(
      bulma_section(
        bulma_title("Section Title"),
        bulma_subtitle("Section subtitle")
      )
    ),
    bulma_demo_down(
      bulma_section(
        spacing = "medium",
        bulma_title("Section Title"),
        bulma_subtitle("Section subtitle")
      )
    ),
    bulma_demo_down(
      bulma_section(
        spacing = "large",
        bulma_title("Section Title"),
        bulma_subtitle("Section subtitle")
      )
    )
  )

}

bulma_demo_layout_footer <- function() {

  bulma_container(
    bulma_title("Footer"),
    bulma_subtitle("A simple responsive footer which can include anything:
                   lists, headings, columns, icons, buttons, etc."),
    bulma_demo_down(
      bulma_footer(
        bulma_content(
          class = "has-text-centered",
          tags$p(tags$strong("Bulma"), " by ", tags$em("Jeremy Thomas"))
        )
      )
    )
  )

}

bulma_demo_layout_tiles <- function() {

  bulma_container(
    bulma_title("Tiles powered by Flexbox"),
    bulma_subtitle("A single tile element to build 2-dimensional Metro-like,
                   Pinterest-like, or whatever-you-like grids"),
    bulma_demo_down(
      bulma_tile_ancestor(
        bulma_tile(
          vertical = TRUE,
          size = 8,
          bulma_tile(
            bulma_tile_parent(
              vertical = TRUE,
              bulma_tile_child(
                class = "notification is-primary",
                bulma_title("Vertical..."),
                bulma_subtitle("Top tile")
              ),
              bulma_tile_child(
                class = "notification is-warning",
                bulma_title("...tiles"),
                bulma_subtitle("Bottom tile")
              )
            ),
            bulma_tile_parent(
              bulma_tile_child(
                class = "notification is-info",
                bulma_title("Middle tile"),
                bulma_subtitle("With an image")
              )
            )
          ),
          bulma_tile_parent(
            bulma_tile_child(
              class = "notification is-danger",
              bulma_title("Wide tile"),
              bulma_subtitle("Aligned with the right tile"),
              bulma_content("Content of this tile")
            )
          )
        ),
        bulma_tile_parent(
          bulma_tile_child(
            class = "notification is-success",
            bulma_content(
              bulma_title("Tall tile"),
              bulma_subtitle("With even more content"),
              bulma_content("Content")
            )
          )
        )
      )
    )
  )

}