use lightning design system

How to use lightning design system framework on lightning component !

Lightning Component

Sharing is caring!

[Update] NOTE : After the winter 17 release you can  use the Lightning Design System style in Lightning Apps by extends=”fore:slds”.  The Salesforce Lightning Design System provides a look & feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom applications a UI that is consistent with Salesforce.
What is The Salesforce Lightning Design System ?

Use lightning design system : With the salesforce Lightning Design System(SLDS) we can create custom applications with a look  and feel that is compatible with Salesforce core features. SLDS includes the resources to create user interfaces consistent with the Salesforce Lightning principles. it’s comes with cross-browser compatible CSS.

Lightning technology are using by :-

  • Lightning Experience
  •  Salesforce1
  • Stand-alone Lightning app
  • Lightning Out component
  • Lightning Components for Visualforce

 for full reference : https://www.lightningdesignsystem.com/

How can i use lightning design system CSS(style) on my Lightning component?
 Step 1 : Download (SLDS) platform-agnostic CSS framework.

use lightning design system

  • Save the zip file on your computer.
  • In this zip file includes pre-built CSS framework, font and icons for use in our lightning project.
Step 2 : Upload zip file as a static resources in your salesforce org.

static resource is a file or collection of files that is stored on Salesforce. Once your SLDS zip file is added as a static resource, it can be referenced by any of your lightning component.

  • After successfully download the lightning design system framework zip now we will upload it as a static resources.
  • For upload zip file, from Setup, enter Static Resources in the Quick Find box, then select Static Resources, and click New.
  • In the Name field, enter the name which is use in lightning component.
  • Click Choose File or Browse. , and find zip file you downloaded.
  • In the Cache Control drop-down list, select Public.

use lightning design system

  • Click on the Save button.
Step 3 : Use lightning design CSS framework on lightning component.

By the ltng:require tag in lightning component we can load external CSS and JavaScript libraries after we upload them as static resources.

Output-:

use lightning design system

  • here SLDS24 is name of static resources zip file name
  •  $Resource is a global value provider lets you reference images, style sheets, and JavaScript code you’ve uploaded in static resources.
  • /assets/styles/lightning-design-system-ltng.css’ is path of  CSS  in zip file.

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

Sharing is caring!

(Visited 2,081 times, 5 visits today)

4 comments

  • I believe instead of upload  zip in static resource you can use

    extends=”force:slds” in aura application.

    <aura:application extends=”force:slds” >

    </aura>

     

    • hi Priyankar Pakhira,
      yes this new feature come with winter 17 release and it’s a good way to USE lightning design framework. and if you want to use a specific(old) Lightning Design System version, then you need to download and upload SLDS as static resources and then use it in component or application. i’ll include this topic on above post as well.

      thanks for your feedback 🙂

  • Hi, this feature is not working.

    I get the below error when including the attribute extends=”force:slds”

    No COMPONENT named markup://force:slds found : 

Leave a Reply