Why using SLDS version 2.x updated standard visualforce layout even without "slds" wrapper container element?

Question

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>

Answer 1

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!

Answer 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>