shiny.semantic 0.4.0 Update Brings CSS Grid UI Functionality to Shiny Apps
<em><strong>Updated</strong>: January 24, 2023.</em> 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. <blockquote>Do your dashboards look dull? <a href="https://appsilon.com/ux-design-of-shiny-apps-7-steps-to-design-dashboards-people-love/">Here are 7 UX tips for designing dashboards people will love</a>.</blockquote> 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 a 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: <img class="size-full wp-image-17602" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b39d09c7945194bc6871d0_1-5.webp" alt="Image 1 - Shiny Tools homepage" width="1524" height="1391" /> Image 1 - Shiny Tools homepage <h2>shiny.semantic: Version 0.4.0 Update</h2> If you don't have the package already installed, just run the following command through the R console. <pre><code class="language-r">install.package("shiny.semantic")</code></pre> 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 <a href="http://fomantic-ui.com/" target="_blank" rel="noopener noreferrer">FomanticUI</a> 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 style guide. 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 <i>actionButton </i>in a similar way as in standard Shiny, but as an alternative, you may also use <i>action_button</i>, which has even more customization options specific to FomanticUI. <h2>Grid Functionality</h2> Another big change is the introduction of powerful functionality that we are calling "grid." With a 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 <i>my_layout</i>. (You may also style particular grid container elements using parameter areas_style straight from R.) <pre><code class="language-r">library(shiny) library(shiny.semantic) <br>my_layout <- grid_template(default = list( areas = rbind( c("top_left", "top_right"), c("bottom", "bottom") ) )) <br>display_grid(my_layout)</code></pre> <img class="size-full wp-image-17604" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b39d09c7945194bc687204_2-5.webp" alt="Image 2 - CSS grid layout" width="1733" height="1338" /> Image 2 - CSS grid layout And in the Shiny UI pass the template together with the definition of elements of UI in a specific place. For example: <pre><code class="language-r">library(shiny) library(shiny.semantic) <br>my_layout <- grid_template(default = list( areas = rbind( c("top_left", "top_right"), c("bottom", "bottom") ) )) <br>ui <- semanticPage( grid( grid_template = my_layout, top_left = segment(h1("Top left")), top_right = segment(h1("Top right")), bottom = segment(h1("Bottom")) ) ) <br>server <- function(input, output) { } <br>shinyApp(ui = ui, server = server)</code></pre> <img class="size-full wp-image-17606" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b39d0a22566481fed01885_3-5.webp" alt="Image 3 - CSS Grid in shiny.semantic" width="1733" height="1338" /> Image 3 - CSS Grid in shiny.semantic <h3>Semantic Grid for Mobile Devices (Responsive)</h3> The semantic grid is also responsive, since you can easily tweak the stylings for screens narrower than 768 pixels. Here's an example: <pre><code class="language-r">library(shiny) library(shiny.semantic) <br># Here we define the grid_template that we will pass to our grid myGrid <- grid_template( default = list( # Here we define the data.frame describing our layout # The easiest way is to use rbind so that the layout can be 'visualized' in code areas = rbind( c("header", "header", "header"), c("menu", "main", "right1"), c("menu", "main", "right2") ), # Then we define the dimensions of the different elements of the layout # We can use any valid css units to make the layout behave exactly as desired rows_height = c("50px", "auto", "100px"), cols_width = c("100px", "2fr", "1fr") ), # This is optional, but we can define a specific layout for mobile (screen width below 768px) mobile = list( areas = rbind( c("header", "header", "header"), c("menu", "main", "right1"), c("menu", "main", "right2") ), rows_height = c("50px", "2fr", "1fr"), # Notice how we changed the rows heights here cols_width = c("100px", "2fr", "1fr") ) ) <br># We can use nested grids to precisely control the layout of all the elements # Here we define another grid_template to use in one of the elements of the parent grid subGrid <- grid_template( default = list( areas = rbind( c("top_left", "top_right"), c("bottom_left", "bottom_right") ), rows_height = c("50%", "50%"), cols_width = c("50%", "50%") ), # This is optional, but we can define a specific layout for mobile (screen width below 768px) mobile = list( areas = rbind( c("top_left"), c("top_right"), c("bottom_left"), c("bottom_right") ), rows_height = c("25%", "25%", "25%", "25%"), cols_width = c("100%") ) ) <br>ui <- semanticPage( grid(myGrid, # We can define the css style of the grid using container_style container_style = "border: 5px solid #3d7ea6", # We can define the css style of each of the grid elements using area_styles area_styles = list( header = "border: 3px solid #5c969e", menu = "border: 3px solid #5c969e", main = "border: 3px solid #5c969e", right1 = "border: 3px solid #5c969e", right2 = "border: 3px solid #5c969e" ), # Finally, we define the ui content we would like to have inside each element header = div(shiny::tags$h1("Hello CSS Grid!")), menu = div("menu"), main = grid(subGrid, area_styles = list( top_left = "border: 3px solid #ffa5a5;", top_right = "border: 3px solid #ffa5a5;", bottom_left = "border: 3px solid #ffa5a5;", bottom_right = "border: 3px solid #ffa5a5;" ), top_left = div("main top left"), top_right = div("main top right"), bottom_left = div("main bottom left"), bottom_right = div("main bottom right") ), right1 = div("right 1"), right2 = div("right 2") ) ) <br>server <- function(input, output, session) { } <br>shinyApp(ui = ui, server = server)</code></pre> <img class="size-full wp-image-17608" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d62c49b91708eb332493_3a7c9057_4.gif" alt="Image 4 - Shiny semantic responsive grid" width="1612" height="1266" /> Image 4 - Shiny semantic responsive grid <h2>More on Shiny Semantic Grid</h2> 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: <img class="size-full wp-image-17613" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b021f40279bfd4503791d9_shinysemanticgrid.webp" alt="Image 5 - Popular Shiny app layouts" width="1200" height="968" /> Image 5 - Popular Shiny app layouts The shiny.semantic documentation is now rendered with an extremely useful <a href="https://pkgdown.r-lib.org/" target="_blank" rel="noopener noreferrer">pkgdown</a> package: <a href="http://appsilon.github.io/shiny.semantic" target="_blank" rel="noopener noreferrer">http://appsilon.github.io/shiny.semantic</a>. 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 <a href="https://appsilon.github.io/shiny.semantic/articles/index.html" target="_blank" rel="noopener noreferrer">tutorials</a> 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 the effects of shiny.semantic transforming the look of a Shiny dashboard from our work on the Utah Division of Water Quality app: <a href="https://shiny.rstudio.com/gallery/lake-profile-dashboard.html" target="_blank" rel="noopener noreferrer">before</a> and <a href="https://demo.appsilon.ai/apps/water-quality/" target="_blank" rel="noopener noreferrer">after</a>. <img class="size-full wp-image-17615" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b021f6b7757cdfbbab5e09_shinysemanticbeforeafter.webp" alt="Image 6 - Utah division of water app before and after Semantic Grid" width="1024" height="328" /> Image 6 - Utah division of water app before and after Semantic Grid You may get or update the new <i>shiny.semantic</i> from CRAN. If you encounter any problems, please report bugs on our <a href="https://github.com/Appsilon/shiny.semantic/issues" target="_blank" rel="noopener noreferrer">GitHub</a> or contact us directly: <a href="mailto:dev@wordpress.appsilon.com" target="_blank" rel="noopener noreferrer">dev@wordpress.appsilon.com</a>. 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: <a href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">https://github.com/Appsilon/shiny.semantic</a>. We always love receiving feedback on our work. Happy coding! <blockquote>Looking for a shiny.semantic cheatsheet? <a href="https://appsilon.com/shiny-semantic-cheatsheet-semantic-ui-in-r/">Look no more - here's the only one you'll need</a>.</blockquote> <hr /> <h2>Learn More</h2><ul><li><a href="https://appsilon.com/shiny-worker-package/" target="_blank" rel="noopener noreferrer">shiny.worker: Speed Up R Shiny Apps by Offloading Heavy Calculations</a></li><li><a href="https://appsilon.com/create-outstanding-dashboards-with-the-new-semantic-dashboard-package/" target="_blank" rel="noopener noreferrer">Create Outstanding R Shiny Dashboards With The semantic.dashboard Package</a></li><li>Explore more Appsilon Open Source Shiny Packages: <a href="http://shiny.tools" target="_blank" rel="noopener noreferrer">shiny.tools</a></li><li>Need help with building beautiful and scalable enterprise dashboards? <a href="mailto:hello@wordpress.appsilon.com">Reach out</a>.</li></ul>
