Understand Important Visual Design Considerations

Learning Objectives

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.

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, to add a stylesheet that’s been uploaded as a static resource named
“AppStylesheet”, add the following to your
page.

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

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.

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.

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, work your way through the Lightning Design
System
badge or 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 Lightning Design System is so big and so
exciting that…we’re not going to go into the details of using the Lightning Design System here. Because we’ve
written a whole module about using it, Lightning Design
System. It explains how to get the Lightning Design System, the basic concepts of
using it to design pages, and how to apply those concepts to building Lightning Experience apps with Visualforce.

Lightning Design
System is a big module—you’ll have to work to earn that badge. While we do want to save the
details for that module, we don’t want to leave you totally hanging here. So, let’s cover how
you use the Lightning Design System with Visualforce in a general way.

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.

The Lightning Design
System module is focused on creating new pages and apps, and scoring that badge is the best way to
learn about it. After finishing that module you’ll have an understanding of both how to use
Lightning Design System and how to plan
development around it.