tl;dr

shiny.semantic is an R package created by Appsilon that brings the Fomantic UI library to Shiny apps. With shiny.semantic, you can rapidly create great looking Shiny apps with non-standard UI components. We have just released version 0.4.0, which includes standardized syntax, a useful grid functionality for easily positioning UI elements, and multiple quality of life improvements. With grid, you can create a single layout that works on mobile, tablet, and computer. shiny.semantic is available on CRAN. To learn more about Appsilon’s open source packages, visit our new shiny.tools landing page. 

Appsilon’s shiny.tools landing page for our open source packages, including semantic.dashboard, shiny.info, shiny.router, and shiny.i18n. To learn how shiny.worker offloads heavy calculations and speeds up Shiny apps, go here. 

shiny.semantic: Version 0.4.0 Update

The shiny.semantic package was released in 2016 and was quickly adopted by the R community as an alternative to Bootstrap UI. At the beginning of 2020, Appsilon decided to migrate the engine of shiny.semantic (all CSS and JS libraries) to the more actively supported FomanticUI project, but we left the name of the package unchanged for legacy purposes.

Today, we are happy to share with you that shiny.semantic has reached version 0.4.0. In the latest edition, we have introduced a couple of breaking changes. First of all, we have standardized the syntax. You can find more information about the new syntax in our styleguide. Briefly, now we use camelCase for all the functions that have equivalence in the regular Shiny syntax, but we stick to snake_case for custom shiny.semantic functions. For example, you can still call the stock Shiny actionButton in a similar way as in standard Shiny, but as an alternative you may also use action_button, which has even more customization options specific to FomanticUI.

Grid Functionality

Another big change is the introduction of a powerful functionality that we are calling “grid.” With grid, you can easily position the elements of your UI on the page. You start by defining the template of your grid. Let’s call it here my_layout. (You may also style particular grid container elements using parameter areas_style straight from R.)

my_layout <- grid_template(default = list(
  areas = rbind(
c("top_left", "top_right"),
c("bottom", "bottom")
  )
))

And in the Shiny UI pass the template together with the definition of elements of UI in a specific place. For example:

ui <- semanticPage(
  grid(my_layout,
    top_left = segment(h1("Top left")),
    top_right = segment(h1("Top right")),
    bottom = segment(p("Lorem ipsum..."))
  )
)

If you want to test how your grid cells look without running the full app, you may use this auxiliary function:

display_grid(my_layout)

But you don’t need to build your own layouts from scratch! We’ve implemented (with grid) some of the most popular layouts that you may know from Shiny: horizontal layout, vertical layout, and sidebar layout that you can see below:

The shiny.semantic documentation is now rendered with an extremely useful pkgdown package: http://appsilon.github.io/shiny.semantic. With very little work, the documentation got a nice fresh look with a number of examples for almost every function. I could tell you about all of the new components that we introduced: counter button, toasts, progress bar, etc. – but it’s better that you visit our new documentation website to explore them all on your own. Furthermore, we’ve added a few short tutorials that will help you to dive into the details of shiny.semantic development. If you are interested in all the details of the latest changes, please refer to our changelog.

You can see yourself the effects of shiny.semantic transforming the look of a Shiny dashboard from our work on the Utah Division of Water Quality app: before and after. 

Utah Division of Water Quality Shiny dashboard before and after a shiny.semantic overhaul

You may get or update the new shiny.semantic from CRAN. If you encounter any problems, please report bugs on our GitHub or contact us directly: [email protected]. Remember that shiny.semantic is fully open-source, so we always welcome new contributors. Feel free to reach out and learn how you can contribute to the development of shiny.semantic.

If you like the new version of the package, please leave us a star on GitHub: https://github.com/Appsilon/shiny.semantic. We always love receiving feedback on our work. Happy coding!

Learn More

• shiny.worker: Speed Up R Shiny Apps by Offloading Heavy Calculations
• Create Outstanding R Shiny Dashboards With The semantic.dashboard Package
• Explore more Appsilon Open Source Shiny Packages: shiny.tools

Article shiny.semantic 0.4.0 Update Brings CSS Grid UI Functionality to Shiny Apps comes from Appsilon Data Science | End­ to­ End Data Science Solutions.