Understand Lightning Design System Key Principles in 25 Minutes

As you know Salesforce provide us two different user interface, salesforce classic and Lightning experience. Salesforce Lightning Experience team working with a great deal of efforts to make Lightning experience smoothly. Because of that you do not need to do reverse engineering the UI as custom CSS. You can easily build applications which are comply with salesforce lightning look and feel. And most important thing, you do not need to write any CSS, just add lightning CSS (<apex:slds />).

 Core Design principles are:

  • Clarity
  • Efficiency
  • Consistency
  • Beauty

 Lightning Design have key benefits than bootstrap or other CSS:

  • It smartly works with Salesforce, so it easily reflects Salesforce lightning look and feel. Because of this, your main focus is on building applications than look and feel.
  • Responsive.
  • It avoids conflicts as it fully namespace with slds- prefix and scoped with slds-scope class.
  • Salesforce team continuously update CSS.
  • It works with all types of browsers and minimum browser requirement.

 Four Types of resources which help you to build applications:

  • CSS Framework
  • Icons
  • Font
  • Design Tokens
So question is where you can use lightning design system?
  • Visualforce pages: Design system is not compatible with this but I will show how to give look and feel to <apex> tags. Design System doesn’t support built-in Visualforce components — the <apex:*>, <chatter:*> and other components.
  • Lightning pages and Lightning components.
  • Standalone web apps and Mobile apps
To include Lightning Design System style sheet into your own page just include <apex:slds />
You can use the Salesforce Lightning Design System together with Bootstrap or any other CSS framework, just prefixed with .slds- to all CSS selectors to prevent any collisions.

SLDS class naming conventions defined based on Block-Element-Modifier syntax (BEM)
  • First Block represent outer i.e. high level component ex .mobile
  • Element represent component after high level component ex. .mobile__cover
  • And last Modifier represents particular block or element ex. .mobile__cover--blue
If you want to design your application responsively using the Salesforce Lightning Design System then I recommend that you make good use of flexible and powerful Grid System, which will help you construct responsive layouts that scale in a graceful and stylish manner across screen sizes. 

 Grid System in Lightning Design System:

Grid is a framework of spaced bars that are parallel to or cross each other. It divides page into row and columns.
Grid contains Grid wrapper (slds-grid class) which is outer element and number of columns (slds-col class) which is child element.

For Example:

<div class="slds-grid">
  <div class="slds-col">Lightning</div>
  <div class="slds-col">Design</div>
  <div class="slds-col">System</div>
</div>

Columns are sized relative to their contents by default. You can specify size manually using slds-size--X-of-Y where X represents a fraction of the total space Y.

For Ex. slds-size--1-of-2 represents a width that is 50% of the available space. So above example div class become:

<div class="slds-col slds-size--1-of-3"> Lightning </div>

Let`s create one visualforce page namely: Visualforce_SLDS:
Copy below code snippets and click on Save Button.
Click on Preview Button. 



<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>
      <title>Salesforce Lightning Design System in Visualforce page</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!-- Import the Design System style sheet -->
      <apex:slds />
    </head>
    <body>
      <!-- REQUIRED SLDS WRAPPER -->
      <div class="slds-scope">
        <p class="slds-text-heading--label slds-m-bottom--small">
           Embed Salesforce Lightning Design System in Visualforce page
        </p>
        <!-- PAGE HEADER -->
        <div class="slds-page-header" role="banner">
          <div class="slds-grid">
            <div class="slds-col slds-has-flexi-truncate">
               <!-- HEADING AREA -->
               <div class="slds-media slds-no-space slds-grow">
                 <div class="slds-media__figure">
                   <span class="slds-avatar slds-avatar--medium">
                    <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="" />
                   </span>
                 </div>
                 <div class="slds-media__body">
                   <p class="slds-text-title--caps slds-line-height--reset">Accounts</p>
                   <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="My Accounts">My Accounts</h1>
                 </div>
              </div>
            <!-- / HEADING AREA -->
            </div>
            <div class="slds-col slds-no-flex slds-grid slds-align-top">
              <button class="slds-button slds-button_brand">New Account</button>
            </div>
          </div>
          <div class="slds-grid">
            <div class="slds-col slds-align-bottom slds-p-top--small">
             <p class="slds-text-body--small page-header__info">Below are your accounts</p>
            </div>
          </div>
        </div>
        <!-- / PAGE HEADER -->
        <!-- PRIMARY CONTENT WRAPPER -->
        <div class="mySampleAccountApp">
          <!-- CREATE NEW ACCOUNT -->
          <div aria-labelledby="newsampleaccountform">
            <!-- CREATE NEW ACCOUNT FORM -->
            <form class="slds-form--stacked" id="add-account-form">
              <!-- Create BOXED AREA -->
              <fieldset class="slds-box slds-theme--default slds-container--large">
                 <legend id="newsampleaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Create a new account</legend>
                 <div class="slds-form-element">
                    <label class="slds-form-element__label" for="account-name">Account Name</label>
                    <div class="slds-form-element__control">
                       <input id="account-name" class="slds-input" type="text" placeholder="New account"/>
                    </div>
                 </div>
                 <button class="slds-button slds-button--brand slds-m-top--medium" type="submit">Create Account</button>
              </fieldset>
              <!-- / BOXED AREA -->
            </form>
            <!-- CREATE NEW ACCOUNT FORM -->
          </div>
           <!-- / CREATE NEW ACCOUNT -->
           <!-- CREATE ACCOUNT LIST VIEW-->
           <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover">
              <thead>
               <tr class="slds-text-heading--label">
                 <th scope="col">Account Name</th>
                 <th scope="col">Active</th>
               </tr>
              </thead>
              <tbody>
               <tr>
                  <th scope="row">Account 1</th>
                  <td>Yes</td>
               </tr>
               <tr>
                  <th scope="row">Account 2</th>
                  <td>No</td>
               </tr>
               <tr>
                  <th scope="row">Account 3</th>
                  <td>Yes</td>
               </tr>
               <tr>
                  <th scope="row">Account 4</th>
                  <td>No</td>
               </tr>
               <tr>
                  <th scope="row">Account 5</th>
                  <td>Yes</td>
               </tr>
               <tr>
                  <th scope="row">Account 6</th>
                  <td>No</td>
               </tr>
               <tr>
                  <th scope="row">Account 7</th>
                  <td>Yes</td>
               </tr>
               <tr>
                  <th scope="row">Account 8</th>
                  <td>No</td>
               </tr>
              </tbody>
           </table>
          <!-- / CREATE ACCOUNT LIST VIEW-->
        </div>
        <!-- / PRIMARY CONTENT WRAPPER -->
        <!-- FOOTER -->
        <!-- / FOOTER -->
        </div>
        <!-- / REQUIRED SLDS WRAPPER -->
        <!-- JAVASCRIPT -->
    <script>
       var accountForm = document.getElementById('add-account-form');
       var accountNameField = document.getElementById('account-name');
      
       var createAccount = function() {
       // Call Apex server method and Create Account
       accountNameField.value = '';
       }
       accountForm.addEventListener('submit', function(e) {
         e.preventDefault();
         createAccount();
       });
    </script>
    <!-- / JAVASCRIPT -->
     </body>
  </html>
</apex:page>




Now click on Preview button which display like below:




Visualforce page code Explanation: 

  • As you know every component to which we have to apply lightning design system, include it in slds-scope.
  • Class slds-page-header applies page header styling. This header contains Grid. Grid contains columns.
  • We have added AVATAR for Account in our visualforce page. slds-media is base class of Media Object component. We can apply it to any element but here we have applied to <div>. Inside the container, we provide a AVATAR (icon) and a body (content).
  • AVATAR is contained inside <span> with the class slds-media__figure. Actual image is applied in <img /> tag.  And the <div> tag with class slds-media__body which wraps the header text.
  • First column contains Title displayed with slds-page-header__title.
  • The second column which New Accounts button have multiple classes applied: slds-col slds-no-flex slds-grid slds-align-top. slds-no-flex. This prevent the column from automatically resizing by removing its flex property. And slds-align-top which align component to top. slds-button_brand creates the brand blue Salesforce style.
  • We have added section which create account easily. Form contains slds-form—stacked which apply vertical stacked layout.
  • Inside that <fieldset> having slds-box, slds-theme--default, and slds-container—large which create a white, boxed, small, area to keep things visually nice.
  • The title in the <legend> tag adds a title at the top of the box.
  • As we have added each label and input pair in wrapper div with slds-form-element to provide optimal spacing. The <input> field itself has the slds-input class.
  • DO NOT forget that the user has to be able to submit the form. We have to provide custom create account functionality to user using javascript. We have added listener to <button> and handle the listener in javascript which take input field value and call apex class to create new account.
  • SVG sprite maps are also why we had you add the xmlns and xmlns:xlink attributes to your <html> element. The reason for this is to configure the SVG and xlink namespaces within Visualforce.
 The Design System supply new icons divided into five categories: 
  • Custom
  • Doctype
  • Standard
  • Utility
  • Action
You can get PNGs and SVGs icons from lightning design system.

Do you want to download icons, design tokens and swatches then go to https://www.lightningdesignsystem.com/downloads/

Don’t forget to like or comment or share the blog.

 Other blogs:

Create Record Home Page Using Advanced Lightning Component In Salesforce

9 Configurations In Lightning Experience Tips You Need To Learn Now. 

Lightning Experience Rollout Strategy that you can`t learn from book 

Learn Salesforce Lightning Experience Basics In 15 Minutes

 
No comments:
Labels: , ,
Subscribe to: Posts (Atom)