Developing simple application in Salesforce using Lightning Design System

Lightning Experience is a modern, productive user experience designed to help you do more and be more efficient.

1. Introducing the Lightning Design System

Lightning Design System is quite a mouthful, so we’re referring to it here as the "Design System." You might have used other similar design systems, such as Twitter Bootstrap or Foundation for building websites. The key benefits of this Design System are:

• It's tailored for building Salesforce apps. Using the Design System markup and CSS framework results in UIs that reflect the Salesforce Lightning look and feel. The focus on building applications is an important one to keep in mind. The Design System does not over-enforce defaults such as padding and margins, in contrast to some other frameworks which are focused on building marketing pages. The Design System lets you easily specify the exact layouts you require, whilst conforming to the new Lightning UI.
• It's continuously updated. As long as you’re using the latest version of the Design System, your pages are always up to date with Salesforce UI changes.
• Accessibility is baked in to the CSS framework behind the components.
• The CSS is fully namespaced with the slds- prefix to avoid CSS conflicts.

2. Including Design System library to static resources

Download the Design System zip from the downloads page and upload it yourself as a static resource. If you go this route please name it SLDSXXX where XXX is the version number (e.g. SLDS090) for consistency with the code examples, and so you can track your current version.

3. Adding Custom Logic and Preview

After you've created the page, use your favorite authoring tool to include the following markup in the page:

    
 
 
 
 
 
    

 
 
Salesforce Lightning Design System Trailhead Module
     

 
 


 
 


 
 


 
 
 


 

 
 

 

 
Account
 
SLDS Inc.
 

 
 
 

 
 

 
 

 

 
 
 
 
 

 
 

 
 

 
     

 
 

 
     

 
 

 
 

 
Salesforce Lightning Design System Example
 
© Your Name Here