Lightning Design System (SLDS) in Visualforce pages

-

Salesforce Lightning Design System provides a set of CSS classes and design guidelines that allow you to create user interfaces that are consistent with the Salesforce Lightning Experience. 

You can use the Lightning Design System (SLDS) to build Visualforce pages that match the look and feel of the Salesforce mobile app. To use SLDS, it takes some tweaks in your code and a few things to remember.

Visualforce Page with SLDS

<apex:page applyHtmlTag="false" applyBodyTag="false">
    <html lang="en">
    <head>
        <title>SLDS Example in Visualforce</title>
        <apex:slds />
    </head>
    <body>
        <div class="slds-scope">
            <div class="slds-grid slds-grid_vertical">
                <div class="slds-col slds-size_1-of-2">
                    <div class="slds-box slds-box_small">
                        <p class="slds-text-heading_large">Hello, SLDS in Visualforce!</p>
                        <button class="slds-button slds-button_brand">Click Me</button>
                    </div>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <div class="slds-box slds-box_small">
                        <p class="slds-text-heading_large">Another Box</p>
                        <input type="text" class="slds-input" placeholder="Type something...">
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

</apex:page>

In this example:

We include the SLDS stylesheet using <apex:slds />.
We create a simple layout using SLDS grid system with two columns (slds-col slds-size_1-of-2).
Each column contains a box (slds-box) with a heading (slds-text-heading_large) and either a button or an input field styled with SLDS classes.
Make sure to disable the default HTML and body tags generated by Visualforce (applyHtmlTag="false" applyBodyTag="false") when using SLDS, as SLDS provides its own HTML structure.

This example demonstrates how you can leverage SLDS classes to create visually appealing and responsive layouts in Visualforce pages that align with the Salesforce Lightning Experience design guidelines.

A few things to note when working with the Salesforce Lightning Design System in Visualforce

When using the component sample code from this site, be sure to replace all static resource paths with the Visualforce URLFOR syntax, as summarized in the FAQ.

Apex tags such as <apex:pageblock> and <apex:inputField> are not yet supported for use with the Salesforce Lightning Design System. Most likely, enabling Lightning Stylesheets will resolve your legacy code styling requests, but the Trailhead unit on Visualforce development within Lightning explains other options for styling legacy code to look like the new Lightning UI.

For best results with the Salesforce Lightning Design System, use the markup style as outlined in the component examples, and use JavaScript Remoting, Remote Objects or a similar API for data access.

To use the SVG spritemap icons, add the attributes
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
to the <html> element as documented in the Trailhead module. Do not add the attributes to individual <svg> elements as can cause a page rendering bug.

To use SVG spritemap image icons with Internet Explorer, use the svg4everybody script.

Currently, if you need to use the Salesforce header or sidebar, you can not specify the
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
on the <html> element. In this case, the SVG icons are not supported.

Links

Applying SLDS to Visualforce Pages

Using the Lightning Design System

Get the Lightning Experience in Visualforce.


Comments

Post a Comment

Popular posts from this blog

Introduction to Salesforce Agent Script: Build Predictable AI Agents

-
Image
Please visit here for more details - https://ayaninsights.com/guestblogs/introduction-to-agent-script/ In my latest blog, I introduce Salesforce Agent Script and explain how it helps teams build AI agents that are more predictable, controlled, and aligned with business processes. Large language models are flexible, but relying only on natural-language instructions can sometimes produce inconsistent results. Agent Script addresses this challenge by combining the conversational capabilities of an LLM with structured business logic. The blog explains how developers can use conditions, variables, actions, topics, and transitions to control how an Agentforce agent behaves. Agent Script supports familiar logic such as if/else conditions, value comparisons, sequential actions, and checks for missing data. I also cover its core structure, including system settings, configuration, global variables, languages, connections, and topic blocks. The start_agent topic acts as the entry point for each...
Read more

Anti-Patterns in Salesforce Agentforce: What to Avoid When Building AI Agents

-
Image
Salesforce Agentforce is powerful because it allows teams to build AI agents that can understand user intent, retrieve grounded information, execute actions, and support business workflows across Salesforce. But like any powerful platform, the quality of the implementation matters. A good Agentforce implementation does not start with “How many things can the agent do?" It starts with “What problem should the agent solve reliably?” That is where anti-patterns come in. Anti-patterns are common implementation habits that look useful at first but eventually create confusion, poor user experience, inconsistent answers, or hard-to-maintain agents. Below are some of the most common Agentforce anti-patterns and how to avoid them. 1. Trying to Build One Agent That Does Everything One of the biggest mistakes is designing a single agent to handle every business process, every department, and every possible customer question. At first, this feels efficient. One agent, many use cases. Bu...
Read more

MCP vs. Traditional APIs: Choosing the Right Integration Approach

-
Image
Enterprise integration has traditionally been built around APIs. Applications send structured requests, services process them, and predictable responses are returned. This model has supported everything from payment processing and customer portals to mobile applications and large-scale system integrations. The rise of AI agents introduces a different integration challenge. An AI agent does not always follow a fixed sequence designed in advance. It may need to determine which system to use, discover the operations available to it, gather relevant context, and select the appropriate action based on a user’s request. This is where the Model Context Protocol, or MCP, becomes relevant. MCP and traditional APIs are related, but they solve different problems. APIs expose system capabilities. MCP provides a standardized way for AI applications to discover and use those capabilities as tools and contextual resources. Understanding this distinction is important when designing enterprise AI solut...
Read more