Created: 2017-03-03 Fri 14:13
An open source, platform-agnostic CSS framework that welcomes contributions from developers & partners (reporting issues & submitting pull requests)
Build custom applications with a look and feel that is consistent with Salesforce core features
Follow our detailed guidelines to confidently design excellent apps that fit right into the Salesforce ecosystem.
Access to the Salesforce core visual and interaction design patterns and follow established best practices
In Visualforce Pages you could effectively use what ever frameworks you like, from simple Bootstrap based sites to more involved Angular.js frameworks.
Had to include things as static resources - no longer the case for SLDS
This gave fexibilty, but didn't provide much in the way of a standard UI or UX.
Did anyone actually follow the Salesforce style guide for Visualforce?
Both are frameworks that are composed of pre-designed buttons, labels, grids and other presentation artefacts.
Both help speed up the development of any web based (or hybrid mobile) UI and provide a form of responsive design (Bootstrap more so than SLDS)
SLDS is the only framework that provides the artefacts to create UI's and UX that match Salesforce Lightning Experience.
LDS - Latter Day Saints, also known as the Mormons
A replacement for Lightning Components (its a complementary technology)
Download a zip file of the latest release and add it like any other CSS library to your projects
For node.js projects use npm or bower to add SLDS to your project
A way to build mock applications really quickly
Start by editing the `src/views/index.html` file as this is the main page of the running website.
Barry Hughes showing Starter Kit in action: https://youtu.be/oJm2nQz-tKM
When building the real app, re-use all the styles and layouts from the Starter Kit
Use Starter Kit as the basis of building your own prototypes
See the license conditions of the project before distributing in source code and binary form.
tem - goo.gl/7RHDrX
MacOSX only tool - a plugin for https://www.sketchapp.com/ which is also commercial ($99)
sketch UK kit also available from SLDS downloads: https://www.lightningdesignsystem.com/downloads/
Demo: Code examples from the demo are at
Check out the bristol-dg branch for my changes
Introduction to SLDS https://trailhead.salesforce.com/modules/lightning_design_system
SLDS with VisualForce https://trailhead.salesforce.com/projects/workshop-lightning-design-system-visualforce
SLDS Github repository https://github.com/salesforce-ux/design-system
> I am unsure about Salesforce font license (assumed it was still for employees only)
SLDS with React.js