Category: Lightning Design System

Kitchener Canada Developer Group Event: Using Styling Hooks to Customize Your LWC by Kirupa Chinnathambi

Special thanks to our speaker, Kirupa Chinnathambi, for the session on “Using Styling Hooks to Customize Your LWC”.You can register for all the upcoming sessions from the Kitchener Developer Group here.You can get details (presentation and recording) of all the earlier sessions from the Kitchener Developer Group here.Presentation: Using Styling Hooks to Customize Your LWC from Sudipta Deb ☁...

Read More

Kitchener Canada Developer Group Event: Shadow DOM, CSS and Styling Hooks in LWC by Alba Rivas

Special thanks to our speaker, Alba Rivas, for the session on “Shadow DOM, CSS and Styling Hooks in LWC”.Presentation: Shadow DOM, CSS and Styling Hooks in LWC what you need to know from Sudipta Deb ☁ Recording:Reference Links:SLDS Design TokensGithub Repo: shadow-domGithub Repo:...

Read More

Winter 18 – Automatically Styling of Existing Visualforce Pages in Lightning Experience

Salesforce Winter’18 release came with lots of surprises to all of us. Before Winter’18 release, one of the biggest pain to switch to Lightning was – How to migrate existing VisualForce pages? We all tried to use the standard VisualForce component in our VisualForce pages as a best practice till date. The reason was Salesforce’s backward compatibility. We all knew that using standard VisualForce component is safe because even if Salesforce enhances those components, we don’t need to change our VisualForce pages.But with the introduction of Lightning, things changed. People all over the world started investing in changing their existing VisualForce pages into Lightning and it is a not a very straightforward task.Salesforce realized the problem and in Winter’18 release came as a savior to all of us. With very minimum changes now, we can keep our existing VisualForce pages and it will still work in Lightning experience. This feature is still in beta mode as there are so many things to improve. But it is really a good starting point and good to know. I am quite sure Salesforce will support more and more components in coming releases. It is definitely a game changer.In this post, I will explain with an example what you need to do in your existing VisualForce page to make it work in both Lightning and Classic.I have written this below VisualForce page containing PageBlock,...

Read More

“Lightning Design System” Series || Part 1 || Introduction and Setup your environment to build Visualforce Page with Lightning Design System

The Salesforce User Experience team has come up with a great UI framework called Lightning Design System. The intention is to build application, visualforce pages with this framework which will comply with the new Salesforce lightning look and feel. And the best part is that you don’t need to play with CSS.Now you probably started thinking why I should go for this new Lightning Design System when I have Twitter Bootstrap or Foundation with which also I can achieve the same. The reason is very simple and they are as follows -With the use of this new Lightning Design System, your application or visualforce page will comply with the new Salesforce look and feel.It is a new design system and it is getting improved every day. So as long as you are referring the latest version of design system, you are getting most out of this new framework.The CSS is fully namespaced with slds- prefix which will avoid CSS conflicts.Ingredients of the Framework:Salesforce Lightning Design System framework comes with four types of resources.CSS Framework: This will contain UI components, such as page headers, form elements, buttons, grid layout system. This will come up with a single purpose helper class which will assist with spacing, sizing and other visual adjustments.Icons: Includes action, custom, standard and utility icons both in PNG and SVG format.Font: Salesforce designed a new font – Salesforce...

Read More
Loading