Why should I build and develop a page with Salesforce Lightning Design System? (SLDS).

Hello There !

200.gif

Before Developing my first page with Salesforce Lightning Design System, there were several questions buzzing my mind. The first question that pops up in every developer’s mind is, “Why should I build and develop a page with Salesforce Lightning rather than Salesforce Classic?” After designing and developing my first Lightning page I discovered the following reasons….

  • Lightning is the future – Salesforce is highly promoting Lightning as the future of the platform for building web and mobile apps. Classic and Visualforce will be supported but not upgraded in future releases.
  • Using the Lightning Design System markup and CSS framework results in UIs that reflect the Salesforce Lightning look and feel.
  • Lightning is much faster than the Salesforce Classic interface.
  • Lightning is tailored to work wherever you do: on desktop browsers, tablets, the Salesforce1 mobile app, even smart watches.
  • Visualforce elements are page-centric and most of their operations are done on the server, rendering the page and controlling the logic of both user and data interaction. Where as, Lightning takes modern approach allows Lightning framework to respond much more quickly to user interactions on the client (be it your desktop browser, mobile browser, the Salesforce1 mobile app, or a standalone custom app), where most of the operation is done.
  • As long as you’re using the latest version of the Lightning Design System, your pages are always up to date with Salesforce UI changes.
  • With the Design System, you get access to all of the Salesforce core visual and interaction design patterns so that you can follow established best practices and build apps that have a consistent look and feel with the Salesforce user experience.
  • The Design System is built around the capabilities of modern browsers and has some minimum browser requirements. Modern versions of Chrome, Safari and Firefox are fully tested. For Microsoft Internet Explorer (MSIE), the Design System supports only version 11 as well as Microsoft Edge.
  • The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.
  • All CSS selectors are prefixed with .slds- to prevent any collisions, so you can use other CSS framework as well.
  • The Lightning Design System is a design framework for building enterprise apps that looks similar to Lightning Experience. It includes a sophisticated CSS framework, a collection of graphic assets, and the Salesforce Sans font. We can use the Lightning Design System to build pages and apps that look gorgeous and perfectly match the Lightning Experience user interface.
  • If we find limitations in  Lightning Design System, we can always use other frameworks like Bootstrap for some or all components.

To capture lightning in a bottle, we need to take care of following points :

stealyourthunder_800x600

Example :

<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>

Replace href path with Visualforce URLFOR syntax,

<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
     <use xlink:href="{!URLFOR($Resource.LightningDesignSystem,'assets/icons/utility-sprite/svg/symbols.svg#check')}" ></use>
</svg>
  • Design System doesn’t support built-in Visualforce components — the <apex:*>,<chatter:*>  and other components you know and used to — for developing pages and accessing data. So don’t get shocked when you apply the Design System to your legacy Visualforce pages and it will not transform into the most beautiful UI.
  • Difference between VF and SLDS – 

capture

  • If you started using the Design System, keep in mind that it is a living design system and receives frequent updates. I will recommend that you regularly update so you have the latest version.
  • If something still not working? Ummmmmm… I recommend opening the browser’s Web Developer console when you are coding. The errors that appear here are often useful in diagnosing issues.
  • For Microsoft Internet Explorer (MSIE), the Design System supports only version 11 as well as Microsoft Edge
    • If you are using MSIE, make sure to use a recent version and include the svg4everybody script in your page.

IMPORTANT NOTE For Developers : SVG sprite maps supports latest versions of Google Chrome, Safari and Firefox. To use SVG spritemap image icons with Microsoft Internet Explorer 11 you will need to download and add a small script called svg4everybody to static resource. After you Add svg4everybody, include it in your pages, and call it in a tag. Please refer to the full instructions on the svg4everybody website for more details.

  • The icons are supplied both as individual PNGs and SVGs, as well packaged up inside SVG sprite maps. Sprite maps are recommended technique for including icons in pages. The advantages of SVG sprite maps over traditional icon fonts include more fine-grained CSS control and easier positioning in components, as well as better re-sizability of vector-based SVGs.
  • Relatively new technology and Salesforce Safe harbor rules applies.

Where You Can Use the Design System – 

  1. When you have requirement to create page that should work on all the devices starting from desktop to all the mobiles, tabs and ipad running on IOS, Windows, Android platform.
  2. Mobile App VF page.
  3. Standalone web apps served by Heroku or a similar platform.

Explore the Amazing Design System Library Here and start creating gorgeous and perfectly match Lightning Experience user interface 😀

I am planning to write series of blogs on Lightning Design System and would also be sharing few of the POC’s which I have done on the same.

I would appreciate if you could share your thoughts in the comments section.

Happy Learning ! Thank you.

Advertisements

20 thoughts on “Lightning is the Future …. Making the Move to Salesforce Lightning Design System (SLDS)

  1. Very informative post Jiten. Well written and nicely compiled….looking forward to get some more,likewise feeds.. !!

    All the very best in your upcoming endeavours and Congrats on your first successful post….what a start man !!

    Way to go Jiten !!

    Liked by 1 person

  2. Hi Jitu,
    Thanks for the brief and informative post on LDS.
    Please write a blog on how to add multiple rows at once (which includes ‘add row’, ‘delete’ and save functionality).
    On click of save the records get created in SFDC.
    Thanks

    Like

    • HI Nirosha,

      I had already Implemented add/remove record functionality while developing product for ET hackathon 2 challenge, please mention your Email Id, I will email you the related code snippet.

      Thank you.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s