Salesforce Lightning Design System - SLDS

Salesforce Lightning Design System : 

Salesforce has 2 desktop user interface.
1) Salesforce classic
2) Lightning Experience

 Salesforce lightning Design System use to design responsive webpages compatable to all the devices.

we know the Salesforce classic very well because we already working from long back.Now we will learn about what is Lightning Experience in Salesforce.
Lightning Experience is a easy way to Design application userinterface and develop the functionality. it is completely modern way of designing.
What we are doing in salesforce Classic, we can do it in salesforce lightning.
but everyone thinking why we need to switch to Lightning ???

1) We can track sales, services easily and close deals fastly.
2) More user friendly design using SLDS.
3) Less Design and Development Efforts.

Salesforce Lightning Design System
Lightning design system


Salesforce lightning Design System helps to desing beautiful and powerful user friendly applications.It helps to build applications easily.
We can design attractive webpages using SLDS.SLDS provided Predefined webpage elements like divs,tabs,accordions,icons,sections,animations and more..
Lets start learning Salesforce lightning Design System.

Use Lightning Design System in visualforce page we have to add <apex:slds/> to your page.
if we want lightning experience to the visualforce page we need to include lightningStyleSheets="true" in the apex:page.


Salesforce lightning Design System Naming :

1) Block represent using .className
2) Element represent using .Classname__element
3) Modifier represent using .Classname__element--modifier

SLDS Grid System :
Salesforce lightning Design System given some Predefined classes to divide visualforce page into multiple coloumns and rows.these are responsive classes
so these divs/sections will divide the space accordingly based on devices hight and width,portrait/landscape.

The Outer Wrapper class name is "slds-grid". we can use like <div class="slds-grid">

Avatar Image from SLDS :

<span class="slds-avatar slds-avatar--x-small">
  <img src="/assets/images/avatar1.jpg" alt="meaningful text" />
</span>

By using Salesforce lightning Design System we can keep Animations,colors,Layouts,Loading images,Markups,styles,Navigations,icons and more....

Ref : https://www.lightningdesignsystem.com/

Comments

Post a Comment

Popular posts from this blog

Community/Experience Cloud Interview Questions

  Community Cloud /Experience Cloud: 1) What is community cloud/Experience Cloud ? Community cloud is a platform to connect with customers, partners, and employees.customers can view records (case,order), share documents, images etc.We can directly communicate with Agents to resolve problems. Community cloud renamed as Experience Cloud in Spring 21. From now community Builder,community workspace called as Experience Builder and Experience workspace. 2) May i know Spring 21 major updates about terminology in community/Experience cloud? Below are the major updates given by salesforce in Community cloud. Community cloud changed to Experience Cloud Community changed to Site or Experience Cloud site Lightning community changed to Experience Builder Site Lightning community template changed to Experience Builder template Lightning community theme changed to Experience Builder theme Lightning community page changed to Experience Builder page Salesforce Tabs + Visualforce community chang
Read more

Script to delete multiple records using Apex salesforce

Delete multiple records from salesforce anonymous block using some script.find the below script just paste the script in the anonymous vlock and select the code and click on Execute Highlighted. Before that if any conditions need to check add it in SOQL Query or if condition then it will filter the records and delete the records. If there are more records we have to run this script multiple times .if we try to delete all the records at a time we might get the DML and limit exceptions.so adding limit in SOQL query and executing. Example :  Object : ABC__c Fields : field1__c, field2__c list<ABC__c> abclist = new list<ABC__c>(); List<ABC__c > alltldroles = [SELECT id,name,field1__c,field2__c                              FROM ABC__c LIMIT 1000]; if(alltldroles.size()>0){     for(ABC__c tldroleslist : alltldroles) {          if(tldroleslist.field1__c != null && tldroleslist.field2__c!=null )  {           abclist.add(tldroleslist);       }
Read more

Change Owner / Update record using Lightning Custom Button Salesforce

Image
This post is related to changes the Owner or update the record from detail page in lightning. Actually we have standard button to change the owner of the record but when we click on the lighting button it will populate the popup and ask for user to change. But here the requirement is change the logged in user direcly when we click on the button. So here we created Custom lightning component with custom Quick action to complete this task. Standard Change Owner in Lightning In classic saleforce we used custom javascript buttons to execute the functionalites but lighting not support the javascript so here we created custom component with Quick action and added in the pagelayout so we can see it in lighting.and add the button in "Salesforce Mobile and Lightning Experience Actions" section. Add caption Lightning Button Pagelayout Change owner Lightning Button  <!--change owner lighting Component --> Component Name : changeowner.cmp <aura
Read more