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>