Lightning Design Experience In Visualforce Pages with Lightning CSS Framework

Salesforce Lighting Design System(SLDS) is a CSS framework introduced by Salesforce to create faster,responsive and beautiful pages even in Salesforce Classic. This css framework is similar bootstrap but have advantages over it if you are working on Salesforce platform.It is a pure css framework that you can use with any front-end development framework like Visualforce, Lightning pages and html pages.

Visualforce page with lightning design system automatically fits to Device size and pages can be create and used across all devices.

To Use SLDS in your Visualforce page, you have to follow these Steps:

• Download the Resource from its website.
• Upload it to your Org's Static Resource and Use that Static Resource in your page.
• Code is Provided for each component in Lightning design system's website.

Here is a sample Page Developed with Lightning Design System:

Using some classes of this framework you can built fully responsive,fast and awesome pages.CSS framework covers almost all components which would be required in webpage development.These Pages are Lightweight and use svg graphics to save loading time.It helps in providing consistent user experience throughout the Salesforce native interface and custom applications.

Looking For Source Code?

Visualforce Page for creating new account:

<apex:page standardstylesheets="false" showheader="false" controller="LightningDesignExperienceController"> 
    <!--Adding Lightning Design Resource-->
    <apex:stylesheet value="/resource/SLDS080/assets/styles/salesforce-lightning-design-system-vf.min.css"/>               
    <apex:form >
        <div class="slds">    
            <div class="slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture" role="alert">
                <span class="slds-assistive-text">Success</span>
                <h2>
                    <span aria-hidden="true" class="slds-button__icon">
                        <img src="/resource/SLDS080/assets/icons/utility/connected_apps.svg" alt="Placeholder" style="max-width: 25px;"/>
                    </span>
                    Lightning Design Experience
                </h2>
            </div>
            <div class="slds-form--compound slds-m-top--xxx-small">
                <div class="slds-form-element">
                    <div class="slds-form-element__row ">
                        <div class="slds-media slds-media--responsive slds-media--center slds-container--left slds-size--1-of-1">
                            <div class="slds-media__figure">
                                <img src="/resource/SLDS080/assets/images/avatar1.jpg" style="height:100px;" alt="Placeholder" />
                            </div>
                            <div class="slds-media__body">
                                <p>Salesforce Lighting Design System(SLDS) is a CSS framework introduced by Salesforce to create faster,responsive and beautiful pages. This css framework is similar bootstrap but have advantages over it if you are working on Salesforce platform.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-grid slds-grid--align-spread ">
                <button class="slds-button slds-button--brand" onclick="save();">
                    <span aria-hidden="true" class="slds-button__icon slds-button__icon--left">
                        <img src="/resource/SLDS080/assets/icons/utility/add.svg" alt="Placeholder" style="max-width: 16px;"/>
                    </span>
                    Save
                </button>
                <button class="slds-button slds-button--neutral" onclick="reset();">
                    Cancel
                    <span aria-hidden="true" class="slds-button__icon slds-button__icon--right">
                        <img src="/resource/SLDS080/assets/icons/utility/refresh.svg" alt="Placeholder" style="max-width: 16px; -webkit-filter: invert(60%);"/>
                    </span>
                </button>   
            </div>
            <div class="slds-form--stacked slds-m-top--small">
                <div class="slds-form-element">
                    <label class="slds-form-element__label" for="sample1">{!$ObjectType.Account.fields.Name.Label}</label>
                    <div class="slds-form-element__control">
                        <apex:inputfield styleclass="slds-input slds-is-required" value="{!acc.Name}"/>
                    </div>
                </div>    
                <div class="slds-form-element">
                    <label class="slds-form-element__label" for="sample1">{!$ObjectType.Account.fields.accountsource.Label}</label>
                    <div class="slds-form-element__control slds-picklist">
                        <apex:inputfield styleclass="slds-select " value="{!acc.accountsource}"/>
                    </div>
                </div>       
            </div>
            <fieldset class="slds-form--compound">                      
                <div class="form-element__group">
                    <div class="slds-form-element__row">
                        <label class="slds-form-element__control slds-size--1-of-1">
                            <span class="slds-form-element__helper">{!$ObjectType.Account.fields.BillingStreet.Label}</span>
                            <apex:inputfield styleclass="slds-input" value="{!acc.BillingStreet}"/>
                        </label>
                    </div>
                </div>
            </fieldset>         
        </div>     
        <apex:actionfunction name="save" action="{!save}" rerender="slda"/>
        <apex:actionfunction name="reset" action="{!reset}" rerender="slds"/>
    </apex:form>
</apex:page>

VisualForce Page Controller

public with sharing class LightningDesignExperienceController{
    public Account acc {get;set;}
    public LightningDesignExperienceController(){
        Account[] accList = [SELECT id, name, accountsource, description, BillingStreet, 
        BillingCity,BillingState 
        FROM Account];
        if(accList.size()>0){
            acc = accList[0];
        }else{
            acc = new Account();
        }
    }
    public void save(){
        upsert acc;
    }
    public void reset(){
        acc = new Account();
    }
}