With Spring 17, we dont have to download SLDS framework and include them as static resources in Salesforce. They released apex:SLDS tag to make it hassle free for developers.
Below is a sample code to get started to develop a simple Visualforce page that leverages SLDS framework. You can add custom controller to expand the logic. This examples helps you get started with basics. To learn more features of SLDS framework, please visit https://www.lightningdesignsystem.com/
Sample Visualforce Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page standardController="Account" showHeader="false" sidebar="false" docType="html-5.0" applyHtmlTag="false" applyBodyTag="false" language="{!$CurrentPage.parameters.lang}"> | |
| <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <head> | |
| </head> | |
| <!-- Import the Design System style sheet --> | |
| <apex:slds /> | |
| <body> | |
| <div class="slds-scope"> | |
| <apex:form id="acctForm" html-novalidate="novalidate"> | |
| <div class="slds-scope slds-p-left--medium slds-p-right--medium"> | |
| <div class="slds"> | |
| <div class="body-content"> | |
| <div id="loader" style="display:none;" class="slds-spinner_container"> | |
| <div class="slds-spinner slds-spinner--small" aria-hidden="false" role="alert"> | |
| <div class="slds-spinner__dot-a"></div> | |
| <div class="slds-spinner__dot-b"></div> | |
| </div> | |
| </div> | |
| <!--page header--> | |
| <div class="slds-page-header is-fixed" role="banner"> | |
| <div class="slds-media"> | |
| <div class="slds-media__figure"> | |
| <span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed"> | |
| <svg class="slds-icon" aria-hidden="true"> | |
| <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use> | |
| </svg> | |
| <span class="slds-assistive-text">Description of icon</span> | |
| </span> | |
| </div> | |
| <div class="slds-media__body slds-clearfix"> | |
| <div class="slds-col slds-size--1-of-2 slds-float--left"> | |
| <p class="slds-page-header__title slds-truncate slds-align-middle" title="Add Account"> | |
| <apex:outputText value="Add Account"></apex:outputText> | |
| </p> | |
| </div> | |
| <div class="slds-float--right"> | |
| <apex:commandButton styleClass="slds-button slds-button--neutral" action="{!save}" value="Save"/> | |
| <apex:commandButton styleClass="slds-button slds-button--neutral" action="{!URLFOR($Action.Account.Tab,$ObjectType.Account)}" value="Cancel" immediate="true"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slds-grid"> | |
| <div class="slds-col slds-size--1-of-2"> | |
| <h2 class="slds-text-heading--medium slds-m-bottom--small">Quick Create</h2> | |
| </div> | |
| </div> | |
| <div class="slds-grid"> | |
| <div class="slds-col slds-size--1-of-1"> | |
| <apex:pageMessages id="pgMsg"/> | |
| </div> | |
| <br/> | |
| </div> | |
| <!--end page header--> | |
| <!--main form fields--> | |
| <div class="slds-grid slds-wrap slds-grid slds-wrap slds-grid--pull-padded slds-form--stacked"> | |
| <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-2"> | |
| <div class="slds-form-element"> | |
| <label class="slds-form-element__label" for="city"> | |
| <abbr class="slds-required" title="required">*</abbr> {!$ObjectType.Account.Fields.Name.Label}</label> | |
| <div class="slds-form-element__control"> | |
| <apex:inputField value="{!Account.Name}" styleClass="slds-input" id="Name" required="true"/> | |
| </div> | |
| </div> | |
| <div class="slds-form-element"> | |
| <label class="slds-form-element__label" for="street"> | |
| <abbr class="slds-required" title="required">*</abbr> {!$ObjectType.Account.Fields.BillingStreet.Label}</label> | |
| <div class="slds-form-element__control"> | |
| <apex:inputField value="{!Account.BillingStreet}" styleClass="slds-input" id="BillingStreet" required="true"/> | |
| </div> | |
| </div> | |
| <div class="slds-form-element"> | |
| <label class="slds-form-element__label" for="city"> | |
| <abbr class="slds-required" title="required">*</abbr> {!$ObjectType.Account.Fields.BillingCity.Label}</label> | |
| <div class="slds-form-element__control"> | |
| <apex:inputField value="{!Account.BillingCity}" styleClass="slds-input" id="BillingCity" required="true"/> | |
| </div> | |
| </div> | |
| <div class="slds-form-element"> | |
| <label class="slds-form-element__label" for="Country"> | |
| <abbr class="slds-required" title="required">*</abbr> {!$ObjectType.Account.Fields.BillingCountry.Label}</label> <div class="slds-form-element__control"> | |
| <div class="slds-select_container"> | |
| <apex:inputField value="{!Account.BillingCountryCode}" styleClass="slds-select" id="countryBillingPicklist" required="true"/> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slds-form-element"> | |
| <label class="slds-form-element__label" for="stateBillingPicklist"> | |
| <abbr class="slds-required" title="required">*</abbr> {!$ObjectType.Account.Fields.BillingState.Label}</label> <div class="slds-form-element__control"> | |
| <!--<div class="slds-select_container">--> | |
| <div class="slds-form-element__control"> | |
| <apex:inputField value="{!Account.BillingStateCode}" styleClass="slds-select" id="stateBillingPicklist" required="true"/> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slds-form-element"> | |
| <label class="slds-form-element__label" for="BillingPostalCode"> | |
| {!$ObjectType.Account.Fields.BillingPostalCode.Label}</label> | |
| <div class="slds-form-element__control"> | |
| <apex:inputField value="{!Account.BillingPostalCode}" styleClass="slds-input" id="BillingPostalCode"/> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-2"> | |
| <div class="slds-form-element"> | |
| <label class="slds-form-element__label" for="website">{!$ObjectType.Account.fields.Website.Label}</label> | |
| <div class="slds-form-element__control"> | |
| <!--<input type="text" class="slds-input" id="direct_line"/>--> | |
| <apex:inputField value="{!Account.Website}" styleClass="slds-input" id="website"/> | |
| </div> | |
| </div> | |
| <div class="slds-form-element"> | |
| <label class="slds-form-element__label" for="phone">Phone</label> | |
| <div class="slds-form-element__control"> | |
| <!--<input type="text" class="slds-input" id="direct_line"/>--> | |
| <apex:inputField value="{!Account.Phone}" styleClass="slds-input" id="Phone"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--end main form fields--> | |
| </div> | |
| </div> | |
| </div> | |
| </apex:form> | |
| </div> | |
| </body> | |
| </html> | |
| </apex:page> |
Output
