Salesforce Lightning Design System Node Demo

Last weekend I started playing around with the new Lightning Design System and before I knew it, I had an entire app written!! It was as simple as using Bootstrap!

I have a confession to make... I suck at front-end design. I typically stumble over spans and divs and inject all sorts of silly stuff into the DOM when it shouldn't be there. In turn, my Visualforce pages also look terrible.

Disclaimer: the Design System is not completely baked but I found most of the standard elements were dev ready. The ones marked with prototype should be treated as alpha.

This is the main reason why I love the new Design System. Salesforce has done all of the hard CSS and design work for me so that my apps look beautiful. With the Design System I can now build custom apps with a look and feel that is consistent with Salesforce Lightning Experience core features without hacking up their styles!

The node.js app is using handlebars for logic-less templating so the HTML is really clean. You should be able to port it to your favorite app easily. It also uses bluebird for Promises so there's a good example of getting an account record along with its contacts and opportunities.


The code is available at or you can use the handy-dandy 'Deploy to Heroku' button below to get up and running quickly.