Understand Important Visual Design Considerations

Learning Objectives

After completing this unit, you’ll be able to:

Describe two ways to change the styling of built-in Visualforce components.
Describe two differences between Salesforce Classic and Lightning Experience styling that can be changed using CSS stylesheets.
Describe two approaches to applying the Salesforce Lightning Design System to Visualforce pages.

Understanding Important Visual Design Considerations

Visualforce pages look the same whether they are running in Salesforce Classic or Lightning Experience, unless you rework them to adapt to the appropriate user interface context. Built-in Visualforce components that display user interface elements aren’t easily restyled to match the Lightning Experience look-and-feel.

Specifically, the HTML that’s rendered by the built-in Visualforce components doesn’t change when the page displays in Lightning Experience, and the Salesforce Classic stylesheets those components use is, by default, loaded by the page. The effect is that pages that use <apex:inputField>, <apex:outputField>, the <apex:pageBlock> components, and other coarse- and fine-grained components that match the Salesforce Classic visual design, still match that visual design. You get a little slice of Salesforce Classic in the middle of your Lightning Experience.

It’s our general recommendation that—for now, for existing pages—you don’t try to adapt them to match the visual design of Lightning Experience. Lightning Experience is still evolving, and matching its styling yourself means you’re chasing a moving target. That’s work.

Nevertheless, in some cases you’ll want some pages to match more closely with Lightning Experience visuals. For new pages, or if you’re willing to do some work, there are some great tools for creating pages that fit in perfectly with Lightning Experience.

Affecting the Styling of Standard Components

Visualforce provides a range of options for adjusting or overriding the styling of the standard components. If your goal is to make modest changes to the appearance of these components, the effort to use these options is similarly modest. Let’s look at a few of the tools you have available for affecting styling.

Styling Individual Components

Visualforce components that produce HTML have pass-through style and styleClass attributes. These attributes allow you to use your own styles and style classes to control the look and feel of the resulting HTML. style allows you to set styles directly on a component, while styleClass lets you attach classes for styles defined elsewhere. For example, the following code sets the class of the <apex:outputText>and applies a style.

<apex:page>
    <style type="text/css">
        .asideText { font-style: italic; }
    </style>
    <apex:outputText style="font-weight: bold;"
        value="This text is styled directly."/>
    <apex:outputText styleClass="asideText"
        value="This text is styled via a stylesheet class."/>
</apex:page>

Adding a Custom Stylesheet

You can add your own custom stylesheets to any Visualforce page using static resources and the <apex:stylesheet> tag. For example, let's add the stylesheet file app-styles.css to your page.

If app-styles.css is uploaded as a standalone static resource named “AppStylesheet,” add the following to your page:

<apex:stylesheet value="{!$Resource.AppStylesheet}"/>

If app-styles.css is contained in a static resource archive (such as a .zip or .jar file) named "AppStyles," use the URLFOR function. Specify the archive name in the first parameter and the path to app-styles.css within the archive in the second parameter:

<apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}"/>

You can then refer to any of the styles contained in the stylesheet, and reference them in Visualforce tag styleClass attributes, as we did with the asideText style previously.

This is the recommended method for adding CSS style definitions to Visualforce pages, because it shares the stylesheet between pages, and minimizes the markup you need to add to each page.

The exception to this method for adding a stylesheet is the Salesforce Lightning Design System. The Lightning Design System is a fantastic all-new toolkit for styling your pages, and we’ll talk about it in detail shortly.

Although you can upload the Lightning Design System as a static resource and reference it using <apex:stylesheet>, there’s an easier way: Just include <apex:slds /> anywhere in the markup of your page.

Different Styles in Lightning Experience

To load a custom stylesheet only when your page is running in Lightning Experience, use the following markup. This is similar to the Visualforce markup example in Sharing Visualforce Pages Between Classic and Lightning Experience.

<apex:page standardController="Account">
    <!-- Base styles -->
    <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}" />
    <!-- Lightning Desktop extra styles -->
    <apex:variable var="uiTheme" value="lightningDesktop"
        rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
        <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'lightning-styling.css')}" />
    </apex:variable>
    <!-- Rest of your page -->
</apex:page>

OK, these are tools. Let’s look at a few techniques for using them next.

Styling Strategies and Recommendations

To create Visualforce pages that match the Lightning Experience visual design, create new pages using the Lightning Design System. There are a couple of ways to use the Lightning Design System in your Visualforce pages.

Before we get to specifics, let’s think at a higher level and consider the different strategies for applying Lightning Experience styling to your pages. In particular, let’s talk about your existing pages.

There are two ways to affect the styling of existing pages to make them look more like Lightning Experience.

Change the markup to apply new styling—make changes in your pages.
Change the styling rules for existing markup—make changes in your stylesheets.

These aren’t either / or. You can use them individually or in combination.

Correctly using the Lightning Design System means using the Lightning Design System stylesheets with all-new markup for your Visualforce pages. Again, this is the only supported method for matching the Lightning Experience visual design.

To do this, you can either download the Lightning Design System stylesheets from their website and use them as you would any other stylesheet, or you can add the <apex:slds> component to the markup of your Visualforce page. The <apex:slds> component allows you to reference Lightning Design System stylesheets without uploading them as a static resource, simplifying the syntax of your page and preventing you from hitting the 250-mb static resource limit.

Using <apex:slds> comes with its own set of guidelines and considerations. If you want to know more, check out the link to the Visualforce Developer Guide in the Resources section.

It’s also possible to add the Lightning Design System stylesheets, and revise your pages to use them. How much work this is depends on how closely you want to match Lightning Experience as well as the specific markup and components in your code. While it’s possible to achieve decent results this way, however, it’s not an approach we recommend. The Lightning Design System was designed to be applied to specific markup, and that’s simply not what Visualforce emits. There’s an “impedance mismatch” that, while not fatal, is definitely a serious rock in your shoe when you take this path.

Finally, there’s the other approach: adding new rules and styles to your existing (or a new) stylesheet to make your existing markup look more like Lightning Experience. If your page is already mostly styled with your own stylesheets, this approach might work well for you. If instead you’re mostly using the built-in Visualforce components and the Salesforce Classic styling, it requires you to override the styles from the Salesforce Classic stylesheet.

While this is technically possible, we want to discourage you from taking this approach. It introduces dependencies into your markup and styles that you don’t want to have. These dependencies are on the structure, IDs, and classes of the HTML rendered by the built-in Visualforce components. We want to be really clear here: the HTML rendered by the built-in Visualforce components is an internal implementation detail, subject to change without notice. If you have dependencies on it in your own stylesheets, your styling will eventually break.

The Salesforce Lightning Design System

The Lightning Design System is a design framework for building enterprise apps that look like Lightning Experience. It includes a sophisticated CSS framework, a collection of graphic assets, and the Salesforce Sans font. You can use the Lightning Design System to build pages and apps that look gorgeous and perfectly match the Lightning Experience user interface.

The Lightning Design System was designed to make it easy for customers and partners to match the Lightning Experience look and feel. It also includes tools that make it possible to customize the look and feel to match your own brand—colors and so on—while still remaining consistent with overall Lightning Experience design.

The first thing to know is that the Lightning Design System assumes a new markup structure and styling classes. For this reason it’s best used with new pages and apps. It’s built around the capabilities of modern browsers, and takes advantage of the latest best practices for markup and styling. As much as we all love it, Visualforce has been around a while. Between the HTML it generates and static code in customer pages, most organizations will find it challenging to apply the Lightning Design System to existing pages.

Resources

Visualforce Developer Guide: Customizing the Appearance and Output of Visualforce Pages
Visualforce Developer Guide: Using the Lightning Design System
Lightning Design System for Developers: Components Overview
Lightning Design System for Developers: Components: Buttons