SLDS is Bootstrap for Salesforce

I have been immersing myself in the new world of Lightning and one (note the word “one”, because there is more than one) of the most impressive parts about it is the new SLDS or Salesforce Lightning Design System.

You can just think of it as Bootstrap for Salesforce since it works very much the same as Bootstrap does for regular HTML-based apps. It just incorporates all the best Salesforce specific design options you can use into one very easy to use package.

Adding it to your Lightning app is a breeze and requires only that you use the <ltng:require> tag such as this:

<ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system-ltng.css"/>

Once you have included this, then you just reference the library in your HTML code like this:

<button class="slds-button">New Button </button>

Notice the class tag? That is how you reference it. And that is how you get a nice stylized button that has the latest style that will always be updateable and current

One big gotcha to be aware of thought is that you must wrap all your HTML that uses SLDS in one div tag that uses the the class name of “slds”. For example, the button component I had listed above would not work until I added the surrounding div (NOTE: I cannot include this as formatted code because some weird WordPress issue keeps deleting the code):

That’s it. Easy peasy!

If you have not already checked it out, I strongly encourage you to do so. Every Lightning application should be using it!

Enjoy!