The new Salesforce Lightning collection includes a set of open-source user interface design components that were developed by Salesforce Labs. And why would you want to use these? (you might be thinking).
Well, they are built to use the SLDS (Salesforce Design System) which I blogged about in the last post. It is like Bootstrap for Salesforce. Except, that it just provides the CSS and in order to implement the components you also need JavaScript. Well, this is where the SLDSX comes in. With SLDSX you get the following beautifully styled and responsive components installed directly into your org:
- Breadcrumbs
- Button Groups
- Buttons
- Grid System
- Images
- Badges
- Lists
- Media Objects
- Pills
- Tabs
You can check it out at the GitHub repo here. They have a great tutorial that walks you through how to use the components.
If you are designing Lightning applications, you definitely want to be using these. But a big gotcha with trying to use them is that if you have an older Dev org in which you have already setup a namespace (like I had), then they will not work and you will get errors trying to install them.
So, in order to use them, you will have to spin up a new Dev org and make sure you enable My Domain AND that you go back to Domains in Setup and click the Deploy to Users button before you will be able to access them.
And here is one more gotcha: If you spin up a new org, you will get a copy of the SLDS as a static resource in your new org, but it is an older version. You really need to work with the latest version of the SLDS, which you can download here. You will need to first delete the current SLDS static resource and replace it with the latest version, which as of this post is 0.12.1.
Once you have them installed, just checkout the tutorial and if you have used Bootstrap you should find them pretty straightforward.
Let me know what you think.
saramorgan.net 