Intro to Salesforce’s lightning design system

style-guide-blog_img_1

With the recent release of Salesforce’s own style guide, Lightning Design System, we thought we would write up a brief overview of the guide and show how style guides can be really useful for creating awesome apps fast. First things first…

So what is a style guide?

Essentially a style guide is a reference point. A point where, through collaboration usually, a brand can present its styling in a consistent way.

With the term’s origin in writing this has evolved over the years to encompass much more than that and is used in a much broader sense for the web.

What a modern style guide does is set the tone with a list of styles to be used within the brand schema and present all of this in a modular fashion for ease of use, pulling out components and using them straight inside your app.
A good comparison for this particular style guide would be Zurbs Foundation, or Twitter’s Bootstrap frameworks. But for Salesforce apps.

“With the Design System you can build custom applications with a look and feel that is consistent with Salesforce core features.”

Sounds great right?

How can we use this?

If you’re building apps to be used with the Salesforce platform (and if you’re using MobileCaddy to do this already, kudos) then this style guide is perfect. Utilizing design patterns that fit in with the Salesforce UI, you can make sure your app is consistent with its look and feel. And with apps, consistency is key.

Just like Foundation and bootstrap you can download the style guide here

With that you get all the icons, the fonts and the CSS framework to get going.

style-guide-blog_img_2

As well as being well documented, the style guide is also platform agnostic as well as device agnostic, meaning you can use it with whichever stack you prefer, for whichever device your users require (be it Android or IOS). This is always a really nice touch.

So using the Salesforce style guide we get a modular, reusable set of components straight out of the box for use in Salesforce apps, all great things, leading to making great apps. A methodology close to our hearts here at MobileCaddy.

Wrap up

If you would like to learn more about style guides we really recommend this podcast. Hosted but Anna Debenham and Brad Frost this is great podcast series and with some really cool guests. The website has tons of resources to be picked over too. In particular this episode with Jina Bolton, Senior Product Designer with the Salesforce UX team. Very insightful.