Salesforce recently introduced a new collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem. The Design System gives you all our CSS, HTML, icons, color palettes, and a custom font. It works across our platforms: Visualforce, Heroku, and the new Lightning components. Finally, it is compatible with modern UI frameworks.
The Lightning Design System is a pure CSS framework that you can use with any front-end development framework you’d like, including Salesforce-specific technologies such as Visualforce and Lightning, as well as third-party frameworks like for instance React or Angular. Although the Design System does not include any JS, it is a great CSS resource that at some point will get closer to what we currently know as Bootstrap or Foundation.
The framework comes with many ready-to-use components such as: activity timeline, badges, breadcrums, buttons, spinners, tabs, tooltips, datepickers, and many more. Also, it includes a great section on Design Principles to help you on your design process. The Lightning Design System focuses in four principles:
- Clarity – Eliminate ambiguity. Enable people to see, understand, and act with confidence.
- Efficiency – Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.
- Consistency – Create familiarity and strengthen intuition by applying the same solution to the same problem.
- Beauty – Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.
We would like to congratulate the UX team at Salesforce for this fantastic framework they put together!
- Source: salesforce-ux on GitHub
- Downloads: lightningdesignsystem.com/resources/downloads
- Website: lightningdesignsystem.com
- On Twitter: @salesforceux