0

I'm trying to sue the latest SLDS version 2.1.4 in a Visualforce page, but just including the Static Resource makes whole interface look very different even without including the wrapping "slds" class in any container element.

Has the slds namespaced prefix been removed from core css library? Do we have to recompile the css library to include some sort of namespace so that it does not conflict with existing Visualforce Standard CSS library classes?

As seen below, after including the Status Resource referencing to SLDS CSS file:

  • Buttons have different styling automatically
  • Top bar LOGO disappeared
  • Menu Bar items have font size different than what it was before including the Static Resource

The only code I included in the VF page is:

<apex:stylesheet value="{!URLFOR($Resource.SLDS0214, 'assets/styles/salesforce-lightning-design-system.css')}" />
<apex:outputPanel layout="block" styleClass="slds">
    <div class="slds-wizard" role="navigation">
        <ol class="slds-wizard__list">
            <li class="slds-wizard__item slds-is-active">
                <a href="javascript:void(0);" class="slds-wizard__link">
                    <span class="slds-wizard__marker"></span>
                    <span class="slds-wizard__label slds-text-title--caps slds-truncate" title="Navigation">Navigation</span>
                </a>
            </li>
            <li class="slds-wizard__item slds-is-active">
                <a href="javascript:void(0);" class="slds-wizard__link">
                    <span class="slds-wizard__marker"></span>
                    <span class="slds-wizard__label slds-text-title--caps slds-truncate" title="Actions">Actions</span>
                </a>
            </li>
            <li class="slds-wizard__item slds-is-active">
                <a href="javascript:void(0);" class="slds-wizard__link">
                    <span class="slds-wizard__marker"></span>
                    <span class="slds-wizard__label slds-text-title--caps slds-truncate" title="Compact Layout">Compact Layout</span>
                </a>
            </li>
            <li class="slds-wizard__item">
                <a href="javascript:void(0);" class="slds-wizard__link">
                    <span class="slds-wizard__marker"></span>
                    <span class="slds-wizard__label slds-text-title--caps slds-truncate" title="Review">Review</span>
                </a>
            </li>
            <li class="slds-wizard__item">
                <a href="javascript:void(0);" class="slds-wizard__link">
                    <span class="slds-wizard__marker"></span>
                    <span class="slds-wizard__label slds-text-title--caps slds-truncate" title="Invite">Invite</span>
                </a>
            </li>
        </ol>
        <span class="slds-wizard__progress">
            <span class="slds-wizard__progress-bar" style="width:50%;"></span>
        </span>
    </div>
</apex:outputPanel>

enter image description here

2 Answers 2

3

Did you download it with the custom namespace?

To use the Design System in Visualforce you need to create a CSS file with a custom scoped outer wrapper

https://tools.lightningdesignsystem.com/css-customizer

Note: The download includes scoped files for both the Visualforce and Lightning Components environments. If your component will be included in both, use the Visualforce version of the scoped file.

And you should be using the VF version of the stylesheet: salesforce-lightning-design-system-vf

Kinda hard to tell if your buttons are wrong or not as well as the other stuff you mentioned because you did not include that part of your page in your question. Doh!

1
  • That was it. Didn't realized we have a new way to generate CSS library with custom scoped namespace :-) .. Thanks for pointing me in right direction. I got it figured out and with custom scoping it is working fine now.
    – VarunC
    Nov 30, 2016 at 8:29
-2

I have added style, it works fine:

<span class="slds-wizard__progress" **style="z-index: 0;">
 <span class="slds-wizard__progress-bar" style="{!'width:'+v.percentDone+'%'}"</span>
</span>

You must log in to answer this question.

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