Salesforce Lightning Design System in Ruby on Rails app

Question

I would like to use the Salesforce Lightning Design System (SLDS) in a Ruby on Rails application, but I cannot figure out how to get any of the styles to render. Has anyone had experience using SLDS in a rails applicaiton?

Answer 1

I've never used SLDS, but adapting the basic tutorial I got a basic (static) page with styles going in a few minutes using Sprockets. There's various options documented for installing the framework, so this is just the way I picked as opposed to the only way:

1. Download the pre-built CSS framework from the installation page.
2. Unzip and copy/move the /assets directory into your app under vendor/assets.
3. Edit config/initializers/assets.rb to load assets from the vendor directory (if you don't already):

Rails.application.config.assets.paths << Rails.root.join('vendor/assets')

4. Add the Salesforce CSS to app/assets/stylesheets/application.css:

 *= require_tree .
 *= require_self
 *= require salesforce-lightning-design-system

As I said, this is just a simple way via the Sprockets asset pipeline. If you are installing the framework via yarn and packaging CSS with Webpacker instead of Sprockets, you'll need to import the style into a stylesheet pack and include it with a stylesheet_pack_tag, etc.