How to Style your apps with CSS
You can give your Shiny app a special look with cascading style sheets (CSS).
CSS is a style language which gives HTML documents a sophisticated look. Since the Shiny app user-interface (UI) is an HTML document, you can use CSS to control how you want your Shiny app to look.
The CSS language is easy to learn and widely used. If you would like to learn CSS code, I recommend the free interactive codecademy tutorial. There is also a free concise tutorial at udemy.com.
In this article, I describe the three ways Shiny works with CSS. To get CSS into your Shiny App, you can:
- Add style sheets with the
wwwdirectory - Add CSS to your HTML header
- Add styling directly to HTML tags
These methods correspond to the three ways that you can add CSS to an HTML document. In HTML, you can:
- Link to a stylesheet file
- Write CSS in the document’s header, and
- Write CSS in the style attribute of an HTML element.
Recall that the C in CSS refers to “cascading”. CSS in a style attribute will overrule CSS in a document’s header, which will overrule CSS in an external file. This cascading arrangement lets you create global style rules (in an external file, or header), and special cases (elements that have their own style attribute).
1. Add style sheets with the www directory
These two ‘New Application’ Shiny apps are identical, except for the appearance of the UI. The basic one on the left is the default Shiny App. The one on the right uses a CSS file to enhance its look.
You can apply a CSS file to your entire Shiny app by linking to it from within your Shiny App.
- Create a subdirectory named
wwwin your Shiny app directory. This subdirectory namewwwis special. Shiny makes every file inwwwavailable to your user’s browser. Thewwwsubdirectory is a great place to put CSS files, images, and other things a browser needs to build your Shiny App. - Place your CSS file in the
wwwsubdirectory.
For this UI change, I am using a CSS file named bootstrap.css. I downloaded it from Bootswatch, a great place to get free CSS themes for bootstrap webpages.
Note: The Shiny UI is built with the Bootstrap 3.3.1 HTML/CSS framework. CSS files designed to work with Bootstrap 3.3.1 will work best with Shiny.
After you get bootstrap.css and put it in your www subdirectory, your Shiny app directory should look like mine:
Once your Shiny app directory is set, you have two choices to link to your CSS file (your app won’t use the CSS until you do). You can:
- set the theme argument of
fluidPageto your document’s name or - include the file with the
tagsobject.
The theme argument
The simplest choice is to set the theme argument of fluidPage to your document’s name (as a character string). Your ui.R script will look like the following code:
shinyUI(fluidPage(theme = "bootstrap.css",
headerPanel("New Application"),
sidebarPanel(
sliderInput("obs", "Number of observations:",
min = 1, max = 1000, value = 500)
),
mainPanel(plotOutput("distPlot"))
))
I used this code to make the ‘New Application’ Shiny app on the right. To make the default Shiny app (the one on the left), remove theme = "bootstrap.css".
Link to a stylesheet with tags
You can link to the CSS file with the tags object too. tags recreates popular HTML tags, and has its own article here.
The standard way to link to a CSS file in an HTML document is with a link tag embedded inside a head tag. For example, you might write an HTML document like the one below:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bootstrap.css"/>
</head>
<body>
</body>
</html>
You can recreate this arrangement in Shiny with:
shinyUI(fluidPage(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "bootstrap.css")
),
headerPanel("New Application"),
sidebarPanel(
sliderInput("obs", "Number of observations:",
min = 1, max = 1000, value = 500)
),
mainPanel(plotOutput("distPlot"))
))
This code will make the ‘New Application’ Shiny app on the right.
Notice that bootstrap.css is stored in the www subdirectory. You do not need to add www/ to the file path that you give href. Shiny places the files in your Shiny App’s home directory before sending them to your user’s browser.
Remember that I said www is a special subdirectory name and important to use. Shiny will share a file with your user’s browser if the file appears in www. Shiny will not share files that you do not place in www.
Both the theme argument of fluidPage and the href argument of tags$link can point to a URL (that contains a CSS file). You may find this method a convenient way to share the same CSS file across many Shiny apps.
2. Add CSS to your HTML header
You can also add add CSS directly to your Shiny UI. This is the equivalent of adding CSS to the head tag of an HTML document. This CSS will override any CSS imported from an external file (should a conflict arise).
As before, you have two options for adding CSS at this level. You can
- Add CSS with
tags, or - Include a whole file of CSS with
includeCSS
Add CSS to the header with tags
Use tags$style instead of tags$link to include raw CSS. Write the CSS as a character string wrapped in HTML() to prevent Shiny from escaping out HTML specific characters.
As with tags$link, nest tags$style inside of tags$head.
shinyUI(fluidPage(
tags$head(
tags$style(HTML("
@import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
h1 {
font-family: 'Lobster', cursive;
font-weight: 500;
line-height: 1.1;
color: #48ca3b;
}
"))
),
headerPanel("New Application"),
sidebarPanel(
sliderInput("obs", "Number of observations:",
min = 1, max = 1000, value = 500)
),
mainPanel(plotOutput("distPlot"))
))
This code makes the following Shiny App. Note that I changed only the title’s appearance.
Add CSS to the header with includeCSS
If you have CSS saved in a file, you can add it to the header of your Shiny app with includeCSS.
Shiny will place the contents of the file into the header of the HTML document it gives to web browsers, as if you had used tags$style. You do not need to save the file in www. Shiny will expect it in your Shiny app directory unless you specify otherwise.
For example, I’ve placed a lightweight style sheet named styles.css in my app directory below.
This CSS file changes the title of a Shiny app and nothing else. Here is the actual CSS saved in the file.
@import url("//fonts.googleapis.com/css?family=Lobster|Cabin:400,700");
h1 {
font-family: 'Lobster', cursive;
font-weight: 500;
line-height: 1.1;
color: #ad1d28;
}
body {
background-color: #fff;
}
The code below includes styles.css to make the app in the next image.
shinyUI(fluidPage(
includeCSS("styles.css"),
headerPanel("New Application"),
sidebarPanel(
sliderInput("obs", "Number of observations:",
min = 1, max = 1000, value = 500)
),
mainPanel(plotOutput("distPlot"))
))
3. Add styling directly to HTML tags
You can add CSS styling directly to individual HTML elements in your UI, just as you add styling directly to HTML tags in a web document. CSS provided at this level takes precedence over any other sources of CSS (should a conflict occur).
To add CSS to an individual element, pass it to the style argument of the Shiny function that you use to create that element.
In the script below, I set the style of the title of the Shiny app with the style argument of h1 in headerPanel. The style relies on a font that I import with tags$style in tags$head.
shinyUI(fluidPage(
tags$head(
tags$style(HTML("
@import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
"))
),
headerPanel(
h1("New Application",
style = "font-family: 'Lobster', cursive;
font-weight: 500; line-height: 1.1;
color: #4d3a7d;")),
sidebarPanel(
sliderInput("obs", "Number of observations:",
min = 1, max = 1000, value = 500)
),
mainPanel(plotOutput("distPlot"))
))
Here’s what the Shiny app looks like with this code:
Recap
Add CSS to a Shiny UI just as you would add CSS to a web page.
To get CSS into your Shiny App, you can:
- Link to an external CSS file
- Include CSS in the header of the web page that the app is built on, or
- Pass style information to individual HTML elements in your app.
My examples give a glimpse into the options CSS offers your Shiny App. Explore more at Bootswatch and see what you can create.
Web designing company in Hyderabad, India
Vivid Design Consultants (VDC) are a small team of web designing company in Hyderabad, india. They have a serious passion for Interactive Web Design, Mobile Apps, eCommerce websites and are able to manage all kinds of web related projects. They just don't make or build websites we craft them patiently each pixel refined and every line of code considered.
There professional and creative team of web developers are continuous learners and constantly expanding the skill sets and keep up to date with with current trends and developments. There team always strive to provide creative, user friendly and search engine loved websites with highest standards and un compromised quality to finally add the value to the brands.
Creative Web Design Company offering Web Design , Mobile Apps, eCommerce websites and SEO
Vivid design Consultants are specialised in Responsive Website designing and developing, designing the best Mobile Apps, developing user friendly eCommerce websites and we use latest Search Engine Optimized (SEO) techniques to increase website's visibility on Search Engine Results Page (SERP), there way of working is based on direct communication between clients and developers with keen focus on developing best possible user experience. The important thing to them is building websites which clients love and people admire.
As a Web Design Company there single motto is to provide there Customers Memorable Services
They understand website is spine to your brand identity, reputation and how customers perceive companies. VDC take time and conduct in-depth research on your business performance online and understand clients business to the core and online competition it has and finally they start coding and designing from the ground up, exhaustively planning every aspect of website. thus ensures all possibilities are explored, considered and implemented correctly allowing nothing to fall through the cracks.
Angular JS Documentation & Architecture
Spring MVC & Angular Js Coneptulisation
Spring MVC and AngularJs together make for a really productive and appealing frontend development stack for building form-intensive web applications.
In this blog post we will see how a form-intensive web app can be built using these technologies, and compare such approach with other available options. A fully functional and secured sample Spring MVC / AngularJs web app can be found in this github repository.
We will go over the following topics:
- The architecture of a Spring MVC + Angular single page app
- How to structure a web UI using Angular
- Which Javascript / CSS libraries complement well Angular?
- How to build a REST API backend with Spring MVC
- Securing a REST API using Spring Security
- How does this compare with other approaches that use a full Java-based approach?
The architecture of a Spring MVC + Angular single page web app
-intensive enterprise class applications are ideally suited for being built as single page web apps. The main idea compared to other more traditional server-side architectures is to build the server as a set of stateless reusable REST services, and from an MVC perspective to take the controller out of the backend and move it into the browser:
The client is MVC-capable and contains all the presentation logic which is separated in a view layer, a controller layer and a frontend services layer. After the initial application startup, only JSON data goes over the wire between client and server.
How is backend Built?
The backend of an enterprise frontend application can be built in a very natural and web-like way as a REST API. The same technology can be used to provide web services to third-party applications - obviating in many cases the need for a separate SOAP web services stack.
From a DDD perspective, the domain model remains on the backend, at the service and persistence layer level. Over the wire only DTOs go by, but not the domain model.
How to structure frontend of web app using Angular JS
The frontend should be built around a view-specific model (which is not the domain model), and should only handle presentation logic, but no business logic. These are the three layers of the frontend:
The View Layer
The view layer is composed of Html templates, CSS, and any Angular directives representing the different UI components. This is an example of a simple view for a login form:
The Controller Layer
The controller layer is made of Angular controllers that glue the data retrieved from the backend and the view together. The controller initializes the view model and defines how the view should react to model changes and vice-versa:
angular.module('loginApp', ['common', 'editableTableWidgets'])
.controller('LoginCtrl', function ($scope, LoginService) {
$scope.onLogin = function () {
console.log('Attempting login with username ' + $scope.vm.username + ' and password ' + $scope.vm.password);
if ($scope.form.$invalid) {
return;
}
LoginService.login($scope.vm.userName, $scope.vm.password);
};
});
One of the main responsibilities of the controller is to perform frontend validations. Any validations done on the frontend are for user convenience only - for example they are useful to immediately inform the user that a field is required.
Any frontend validations need to be repeated in the backend at the service layer level due to security reasons, as the frontend validations can be easily bypassed.
Source: Blog.Angular.University.
7 Trends That Will Shape Web Design Come 2017
Web designers in 2017 have to deliver an interactive, personalized and relevant user experience.
One size no longer fits all, and design teams need to address this reality. But how do web designers rise to the challenge?
Here are some fast emerging web design trends you can expect to see more of in the year ahead3 — trends that will propel your website to the top in user.
1.Material Design & Material Motion
Material design is a visual language developed by Google to create a unified experience across platforms and device sizes.
Bold, graphic and intentional material design creates hierarchy, meaning and focus. It makes flexible use of grid-based layouts, padding, responsive transitions and animations, lighting and shadow depth effects.
Motion in material design provides meaning. Material can be spontaneously generated or destroyed anywhere in the environment and you can make it move along any axis.
Google wanted to give unified experience to all users regardless of screen size. It has applied material design to all of its Android mobile applications including Gmail, Google Docs, Google Drive, YouTube, Google Maps, and, to a certain extent, its Chrome browser.
Google design has become standard and will continue shaping many web applications in 2017. Earlier this year, Google removed paid right hand side ads from search results.
2.Grids, frameworks and pre-made themes
As CSS frameworks and grids mature, more and more coders use them as a basis for their web development work. They allow beginner coders to step up their game and they help digital agencies to streamline their production. Frameworks might sometimes contribute to bloated code but they cut down development time and take care of responsiveness, which makes them a good choice for many digital projects.
In addition to Bootstrap, UIKit and Foundation, which have been around for a while, new front-end development frameworks such as Suzy, Jeet and Breakpoint are also getting traction.
Pre-made themes from EnvatoMarket and TemplateMonster can also be a valid choice. Developers of paid templates tend to respond to customer feedback and continuously iterate their product, so some of the most popular themes have now gone through many improvements, to become what they are today.
3.Flat Colors
Google Material Design was first introduced in 2014. It’s a set of principles and best practices for web designers and mobile app developers. Google Material Design is about going back to basics, focusing on what’s important, but still accounting for multiple resolutions and devices – an over-engineered simplicity, if you like.
Google Material Design with its flat colours isn’t the only approach to web and mobile app design but it continues to be popular and trendy. Fabulous app, Google Material Design Awards winner, is a remarkable example of Google Material Design principles at its best.
4.Custom Explainer Videos
Big and small companies alike have taken to the trend of custom explainer videos. These are often created with animation like the Crazy Egg example. But other videos rely on real-life footage like Instagram Direct.
The purpose of an explainer video is to demonstrate how a product or service works. Visitors may skim a list of features and still have no idea how the product operates. Videos clarify everything visually and cover the important stuff in just a few minutes.
If you want to try your hand at making a custom explainer video check out this Udemy course. It’s an in-depth study focusing on videos for landing page design.
5.Performance and intelligent analytics insight
Average weight of the homepage across the websites reviewed in this article is approximately 3.5MB. With all the high resolution images, interactive scripts, font replacement techniques, webpage performance requires special consideration. “If you can make the site load a second faster, you can drive engagement by 5%" according to Financial Times. Note the use of engagement as website metrics in this quote. Intelligent insight that goes beyond page views and unique visitors is increasingly important for understanding what works and what doesn’t on your website.
6.Greater Focus on UX Design
The field of user experience design will continue to grow rapidly with more designers and developers taking notice. UI design is part of UX design but it’s not the final goal. UI is a means to an end, with the end being a fantastic user experience.
7.Server-Side JavaScript
While there have been past options for server-side JS, none have permeated as quickly as Node.js. JavaScript devs have fallen in love with this library and watched it rise into direct competition with other backend languages such as Python or PHP.
Conclusion
Looking over these trends it should be clear that we’re seeing a real concerted effort from the web community to make the process of building websites easier. We all want to save time in our day-to-day workflow.
Since the web’s inception we’ve seen many technologies rise, only to be replaced by better alternatives. These 2016 trends are pushing for a more uniform set of design techniques that will make building websites easier and much less complex.
Expected New Features in HTML6
HTML5 has been with us for some time now and many people are looking forward to HTML6 and what the possibilities may include. In this article we look at some of the more popular predictions by several software providers and magazine writers.
1. Automatic Image Resizing in the Browser: The issue at hand is ‘how many pixels does an image need to look good on a screen’? This varies with each image, each platform and the window size of each device. Part of the problem is the standard <img> tags and the SRC. The challenge is for the HTML protocol to determine when to increase/decrease image sizes for the best viewing result. Unfortunately, each <img> tag only works with one image.
One option is to make use of srcset, which allows the browser to choose between different images, but that increases overhead in terms of using multiple images.
HTML6 code sample from ‘A Look into HTML6’
2. Express Tags: These are tags such as <logo></logo> for the log on your pages, or something like <navigation></navigation>, <sidebar></sidebar>, etc. In addition to this, instead of having to write something like <div id=’container’>, you could just write <container>.
Here is a current sample of the code for HTML5 video.
3. Additional Control over the Video Object: Some of the features that users are looking for are how the video frames display on a page, callback hooks and synchronization mechanisms. All of these will improve the video experience.
4. Dedicated Libraries: jQuery is used with JavaScript libraries, however the amount of energy necessary to load these libraries is high, especially if these are offsite. The solution is a cacheable version. If many designers want to use a specific library, the effect can be diffused with the browsers. Developers are hoping for a new HTML solution.
5. More Annotation Options: HTML structure supports annotation with paragraphs, sentences, words, etc. Developers also want the ability to annotate images and videos.
Standardizing this system would be a wise approach. That way, all websites and browsers offer annotations equally. The W3C has a group studying this and they are offering some recommendations.
6. Integrated Camera: The camera is an important part of our interactions, at home, on a tablet or cellphone. HTML6 will allow us to access all media content on our devices and repurpose it in a variety of ways, whether that’s through the browser, forms, or other systems. HTML6 could offer more control over the camera such as how images are captured, on-the-fly filtering, effects and more. Another option would be to allow for multiple formats for both video and photography and the ability to easily create panoramic images, HDR, etc.
7. Stronger Authentication. While authentication exists, browsers could offer more. Some examples would be making use of encryption with keys stored off-site to prevent people from gaining access. One option so to create better digital signatures. Another option is to use embedded keys, rather than cookies, important in web services
8. HTML6 proposal for Single-Page Apps without Javascript: This idea was submitted by Bobby Mozumder, Editor-in-Chief of FutureClaw Magazine. Here’s what he had to say: “There’s a standard design pattern emerging via all the front-end JavaScript frameworks where content is loaded dynamically via JSON APIs. This is the single-page app web design pattern. Everyone’s into it because the responsiveness is so much better than loading a full page – 10-50ms with a clean API load vs. 300-1500ms for a full HTML page load. My goal would be a high-speed responsive web experience without having to load Javascript.”
“This could probably be done by linking anchor elements to JSON/XML (or a new definition) api endpoints, having the browser internally load the data into a new data structure, and the browser then replaces DOM elements with whatever data that was loaded as needed. The initial data (as well as standard error responses) could be in header fixtures, which could be replaced later if desired.”
9. Stronger Micro-formats: Micro-formats are a standard used to define general information such as an address or phone number. This would make it easier for search engines to find your information. Developers can create detailed information for locations, dates, times, products, etc.
Other Feature Requests
Some other feature requests/ideas are:
· CSS4 for more graphics control
· Bluetooth support
· Cloud storage options
· Peer to peer file transfer abilities
· Being able to connect to other users through voice and chat system
· Malware protection built-in
