5

In reading through the release notes I was excited to discover the introduction of a new <apex:slds> tag. That should help lower the barriers to entry! However, the release notes do not specify what the name of the scoping class should be. And since there doesn't yet appear to be any documentation on this tag, we're left guessing.

To be explicit about what I'm trying to understand, take Getting Started with the Design System for example:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            ...
            <apex:stylesheet value="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
        </head>
        <body>

            <!-- REQUIRED SLDS WRAPPER -->
            <div class="REPLACE_WITH_NAME_OF_CUSTOM_SCOPING_CLASS">
            ...
        </body>
    </html>
</apex:page>

If I replace the <apex:stylesheet> with <apex:slds>, what should I specify for REPLACE_WITH_NAME_OF_CUSTOM_SCOPING_CLASS?

Improve this question

3 Answers 3

Reset to default
4

Here is the quote from the VF Developers Guide in Using the Lightning Design System:

In general, the Lightning Design System is already scoped. However, if you set applyBodyTag or applyHtmlTag to false, you must include the scoping class slds-scope. Within the scoping class, your markup can reference Lightning Design System styles and assets.

Improve this answer
5

If you look at the stylesheet that gets loaded onto the page, it looks like:

/*Copyright*/
/*fonts*/
@font-face {
    font-family: 'Salesforce Sans';
    src: url(../fonts/webfonts/SalesforceSans-BoldItalic.woff2) format("woff2"), url(../fonts/webfonts/SalesforceSans-BoldItalic.woff) format("woff");
    font-style: italic;
    font-weight: 700
}
.slds-scope {
    /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
    /*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */
}
.slds-scope {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    margin: 0
}
.slds-scope article,
.slds-scope aside,
.slds-scope details,
.slds-scope figcaption,
.slds-scope figure,
.slds-scope footer,
.slds-scope header,
.slds-scope hgroup,
.slds-scope main,
.slds-scope menu,
.slds-scope nav,
.slds-scope section,
.slds-scope summary {
    display: block
}

So it seems that we should be able to use slds-scope as the scoping class.

Just to verify this scoping class works, I copied the entire page from the module linked in the OP, replaced <apex:stylesheet ... /> with <apex:slds />, and replaced REPLACE_WITH_NAME_OF_CUSTOM_SCOPING_CLASS with slds-scope. It works like a charm.

Basic demo page

Improve this answer
2
0

However, the release notes do not specify what the name of the scoping class should be.

To clarify, you first go to the Design System CSS Customizer where you can customize the Lightning CSS for your org to style it however you'd like. You save that CSS to a file with the name of your choice (eg MyOrgsCustomStyles.css). Whatever name you choose to save your custom CSS file as, will be the scoping name you'll assign to it in the line containing !URLFOR. That statement allows MyOrgsCustomStyles to replace the SLDS styles that would otherwise apply to your page:

!URLFOR($Resource.MyOrgsCustomStyles.css 
   //replaces the standard styles in:
'assets/styles/salesforce-lightning-design-system-vf.min.css'

When you do this, all the lightning SLDS styles names are used without needing to change them, while also allowing your custom styles to be applied. Your custom styles will use the exact SAME SLDS style names as the standard Lightning SLDS style names with NO change to your page code. This is a feature of SASS that Lightning takes advantage of.

EDIT:

As for the SCOPE, if you look the example CSS file you posted in your own answer to your question, any place in the custom CSS where it doesn't vary from the standard CSS is what affect the definition of the SCOPE of the variations from the standard lightning CSS varies.

EDIT 2:

I suspect that what you're referring to is that when you add <APEX:SLDS> to a Visualforce page, you're enabling the Lightning SLDS CSS for that page without having to add it to the page as a linked static resource since it's now available in the Visualforce Domain just as the Standard CSS is currently available without having to load it as a resource. You can set the scope to which it's applied by wrapping the mark-up in <body class="slds-scope">.

There are limitations on it's use. SVG icons aren’t supported on your page if you don’t have showHeader, standardStylesheets, and sidebar set to false. Also, if you are using the Salesforce sidebar, header, or built-in stylesheets, you can’t add attributes to the html tag. That being said, I believe there's a workaround for the latter. In the LDS system, on components and Flexipages I know you can add the following CSS to your markup to allow HTML to pass through and work as expected: class="slds-text-longform". It might possibly work with Visualforce pages as well.

Improve this answer
3
  • Are you addressing the <apex:slds> tag or just general SLDS usage? I know you can specify a scoping class when you roll your own Static Resource.
    – Adrian Larson ♦
    Feb 6, 2017 at 13:30
  • See my edits related to SCOPE
    – crmprogdev
    Feb 6, 2017 at 13:39
  • I still don't quite see how this answer relates to the new <apex:slds> tag.
    – Adrian Larson ♦
    Feb 6, 2017 at 13:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .