6

I've noticed that certain Lightning UI features have equivalents across Base/UI Components and SLDS, such as modals. But, some don't. I haven't seen a base-component equivalent of Checkbox Buttons, for example.

I also think (I'm too lazy to double-check) that Lightning Base Components sometimes look/behave differently from their SLDS equivalents.

What do we think the future is for SLDS? Will it be fully replaced at some point? Maybe some parts will have to stay as but others will be component-based?

2 Answers 2

9

SLDS enables developers to create a uniform look and feel across all Salesforce-related applications while adhering to CSS best practices and conventions.

Think about the folks using visualforce today who make their pages look like lightning via SLDS.

Lightning Base Components are not 'replacing' SLDS, instead they 'inherit' their styling from SLDS. Plus, SLDS is not limited to styling Lightning Base Components, as there are classes/guidelines that simply provide padding, margin, text, floats to name a few. SLDS is here to stay and is very actively managed even today. While it is true that not all Lightning Base Components have an SLDS equivalent today (well, not all will have them), we can certainly expect more equivalents to be added, as necessary, in upcoming releases.

And there is a lightning base component variant for a checkbox:

<lightning:input type="checkbox" label="Required option" name="input2" checked="true" required="true"/>

And, there is a fancier version of checkbox as well:

<lightning:input type="checkbox-button" label="Input Two" name="input2" checked="true" required="true"/>
2
  • Really good answer - I noticed a few months that the way of showing SVG icons is buttons that Lightning Design System website prescribed was actually no longer working, so I began to wonder if the SLDS was no longer being worked on - but that does make sense, especially with using it with other apps. And whoops, I guess I skimmed over that checkbox-button option. Thanks!
    – Lachlan B
    Commented Aug 1, 2018 at 1:30
  • Right, wherever you see <svg> in the docs you should replace it with <lightning:buttonIcon iconName="utility:close" ... There are certain obsolete references like that still in the docs waiting to be corrected... there are too many of them, so perhaps Salesforce put the doc corrections on their back burner. Commented Aug 1, 2018 at 2:01
4

SLDS is a CSS Design System . A design system keeps the experience Unified.Salesforce has created this Lightning Design System so that it can reuse the UI and UX patterns in SLDS across its various products .Hence SLDS is never going to be replaced.Base components leverage SLDS as a dependency

We will see Base Components will keep using the SLDS framework for all its future development .

SLDS is not only used for Base Components but also can be widely used for building any other web application (Like ReactApp ).

Lightning Base component simplify development specially the design since they take the UI design from the SLDS .

In short SLDS will keep improving and lightning base components will try to incorporate all the goodness SLDS will add to it .

1
  • Really good answer - I noticed a few months that the way of showing SVG icons is buttons that Lightning Design System website prescribed was actually no longer working, so I began to wonder if the SLDS was no longer being worked on - but that does make sense, especially with using it with other apps. Thanks!
    – Lachlan B
    Commented Aug 1, 2018 at 1:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .