Salesforce.com : Design System Unmanaged Package deprecated

I went to download the SLDS to check if there is a new version but “

Salesforce.com : Design System Unmanaged Package deprecated

“. Ohhhhhh…. what does not mean ??? Will we not be able to use Lightning any more ? Ahhh no , there is a different route now to use our cool Salesforce Lightning Design System (SLDS).

You were earlier downloading the unmanaged package and referring the static resource in your pages directly as :

 <apex:stylesheet value="{!URLFOR($Resource.SLDS103, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

SLDS103: you would replace your static resource name here.

and you will start your visualforce page’s first DIV tag as class=”slds” ( <div class=”slds”>).

But now on wards we, may not need to install anything if we are building in an Org where Lightning Experience is already enabled or we are building a page, component for Salesforce 1 app. If you are using classic user interface and need some visualforce pages to look like lightning you will need to follow the below steps.

1. Go to the link : https://tools.lightningdesignsystem.com/css-customizer
2. Enter the scope name you would like (in this example I am using getthekt)
3. Click on “Generate & Download”
4. You will get a zip file containing all the required files
5. Upload it as static resource (for example I have uploaded the generated file as SLDSGETTHEKT)

This is how the link looks like :

Now, while coding the VF page we will use the same stylesheet tag, i.e

  <apex:stylesheet value=”{!URLFOR($Resource.SLDSGETTHEKT, ‘assets/styles/salesforce-lightning-design-system-vf.css’)}” />

Note : the name of the resource you uploaded and the div tag will start with the name that you gave for the scope, i.e instead of class=”slds” , you will write class=”getthekt”  (as per example here)

So, my sample page would look like :

<apex:page standardController="account">
 <apex:stylesheet value="{!URLFOR($Resource.SLDSGETTHEKT, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
 <!-- <div class="slds">  This will no more work-->
<div class="getthekt"> <!-- this will work -->

 <div class="slds-section-title--divider" style="font-size:20px;font-weight:bold;">{!account.name}</div>

<apex:outputText escape="false" value="{!account.Project_Work_Active__c}" ></apex:outputText>  

<div class="slds-section__title">Website</div><h6 class="slds-text-heading--small" >{!account.website}</h6> 
<div class="slds-section__title">Phone</div> <h2 class="slds-text-heading--small" >{!account.phone}</h2> 
<div class="slds-section__title">Revenue</div><h2 class="slds-text-heading--small" >{!account.annualRevenue}</h2> 
</div>
<div > 
 <section class="slds-clearfix">
    <div class="slds-float--right">
    <div class="slds-section__title">Country</div>
      <p>{!account.Billingcountry}</p>
    </div>
  </section>
</div>
</div>

</apex:page>