In the post, we are about to learn how to master in the Salesforce lightning design system grids and lightning layouts. So, first things first, what is a Salesforce lighting design system? One of the core pieces of Salesforce lightning is the Salesforce lightning design system. The design system is a collection of design patterns, components, and guidelines that allow a developer to create such innovations that create beautiful applications on every device and platform.
The design system incorporates a few types of resources:-
CSS framework – The framework includes most of the UI components such as page headers, labels and form elements. Moreover, it also contains a grid layout system and single-purpose helper classes to work well when it comes to spacing, sizing and other visual adjustments.
Icons – A wide range of icons like PNG and SVG in both individual as well as sitemap versions, custom, doctype, standard, and utility icons included in the design system can improve the look and feel of the entire Salesforce development task.
Font – The Salesforce design team has enter a unique font named “Salesforce Sans” which represents unique Salesforce identity.
Design Tokens – These variables allow you to tailor aspects of visual design to match your brand. Customizable variables include colors, fonts, spacing, and sizing.
Now whatever web applications we create must be both desktops as well as mobile friendly. With responsive design frameworks like SalesForce lightning design system (SLDS), a Salesforce development company can develop an interactive and engaging app and deploy across numerous platforms.
What is SLDS grid?
A professional is always benefitted from the power of SLDS grid each and every time he uses the SalesForce lightning experience. The grid is based on Flexbox, provides a flexible, mobile-first, device-agnostic scaffolding system. Moreover, it also includes helper classes that one can use to alter the look and behavior of your grid especially in terms of alignment, order, flow and padding. Basically, grid system allows a Salesforce developer to create responsive pages by defining specific layout variations for small, medium and large screens.
A few technical terms to keep in mind especially when it comes to SLDS in a Salesforce development task
Flexbox – Flexbox is short for flexible boxes. It is a layout mode that is part of CSS3. It lets a developer build responsive pages without relying on custom JS code.
Flexible – the SLDS grid allows a web developer to build responsive pages with concepts quite similar to bootstrap. In addition to this, one can position components on columns and rows with specific settings for different screen resolutions.
Mobile-first – Built-in mobile support
Device-agnostic – Due to the use of HTML and CSS standards, SLDS is not bound to any device or platform in particular.
Scaffolding system – The framework provides building blocks of various granularity upon which rich and complex UI’s are created.
Understand the working of SLDS grids
SLDS grids divide the screen width into 12 virtual columns which mean components can be placed across these columns and rows can be created by applying specific SLDS CSS classes. Besides, a Salesforce development company can specify the column span of components for each of these screen resolution.
- Small for phone (page width between 480px and 767px)
- Medium for a tablet (page width between 768px and 1023px)
- Large for a laptop or desktop (width above 1024px)
Things to notice :-
- As the screen resolution changes, content automatically expands across columns or wraps and pushes itself onto new rows.
- The layout changes responsively as the resolution of the page enters a new category.
- It is not always necessary to define the component sizes for a small resolution, a Salesforce developer can also think of using default size to handle that.
Whether you choose to go for a combination of HTML and SLDS classes/lightning components, just make sure that you work after considering the user experience on different devices.
There are basically two approaches:-
Lightning design system – it includes the basic of SLDS and also has a unit dedicated to grids with visual force.
UX prototyping basics – This guides you through prototyping best practices. Besides, it also saves time when choosing application layouts.
Although the syntax may differ between these two approaches, the responsive capabilities tend to remain the same.