SLDS and Lightning Components

Join us for a deep dive into the presentation layer of the Lightning Experience. Learn the core CSS principles and design patterns behind the Salesforce Lightning Design System, and how you can leverage it within your own Lightning Components. But don’t worry, it’s not all CSS. We’ll also discuss adding Javascript for interactive components.

1. SLDS and
Lightning
Components
Stephanie Rewis
Lead Developer, Design Systems
@stefsull
Greg Rewis
Principal Developer Evangelist
@garazi

2. Forward Looking Statement
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties
materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed
or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-
looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any
statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new,
planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new
functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our
operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of
intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate,
our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of
our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to
larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included
in our annual report on Form 10-Q for the most recent fiscal quarter. This documents and others containing important disclosures are
available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available
and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features
that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

3. Why did Salesforce need a Design System?

4. Lightning Experience

5. Hundreds of Developers
Small Team of Designers
Smaller Design Systems Team

8. How can my app
look like this?

9. Can I use the CSS in
my app?

11. Lightning Design System
The next generation of living style guides

12. Design System
Components
CSS Framework + UI Library

13. Design audit and inventory 

of all components in designer's
comps

14. Border Colors
Shadows
Spacing
Sizing
Animation Durations
Media Queries
z-indexes
Some Design Token Properties
Fonts
Font Sizes
Font Weights
Line Heights
Background Colors
Text Colors

15. .lookup__menu {
position: absolute;
margin-top: t(spacingXxSmall);
border: t(borderWidthThin) solid t(colorBorder);
border-radius: t(borderRadiusMedium) ;
padding: t(spacingXxSmall) 0;
background: t(colorBackgroundAlt) ;
z-index: t(zIndexDropdown);
}

16. We broke the components
down to their smallest patterns
and objects.

17. SLDS Micropatterns

32. /components/utilities/lists#flavor-vertical-dividers

33. /components/utilities/lists#flavor-vertical-dividers

34. /components/utilities/lists#flavor-horizontal-dividers

38. Block
Element
Modifier
BEM Naming Convention

39. Let’s build a house!
.house
block or component name
.house__door

.house__window
element or component part
.house--gray
modifier or component variation
.house__door--fuschia
variation of a component part

41. Flexbox
CSS box model optimized for user interface design.

42. The SLDS grid system provides a flexible, mobile-first, device-
agnostic scaffolding system
The SLDS grid system provides a flexible,
mobile-first, device-agnostic scaffolding system

43. /components/utilities/grid/

44. Advantages of Flexbox Grids
Automatic Sizing 

Lowers the bar for error. Great for component layouts.

Manual Sizing

Great for page layouts and responsive design.

Direction can be Manipulated

Your content can flow from left to right, top to bottom, right to left, bottom to top.

Nested Grids

Nest grids inside grids. It’s fast and efficient.

45. <div%class="slds,grid">%
%%%% % % % % …%
</div>

46. <ul%class="slds,grid">%
%%%% % % % % …%
</ul>

47. <span%class="slds,grid">%
%%%% % % % % …%
</span>

48. Extensible
We provide a library of helpers that can modify the grid container or
individual grid regions.

We use verbose, human-readable classes.

49. <div%class="slds,grid%slds,grid,,vertical">%
…%
</div>

50. <div%class="slds,grid%slds,grid,,vertical">%
…%
</div>

51. Flex-wrap
.slds-wrap { // This is placed on the .grid container
flex-wrap: wrap;
align-items: flex-start
}

52. <ul%class="slds,grid">%
...%
<li>...</li>%
<li>...</li>%
...%
</ul>

54. <ul%class="slds,grid">%
...%
<li%class="slds,col">...</li>%
<li%class="slds,col">...</li>%
...%
</ul>

55. <ul%class="slds,grid">%
...%
<li%class="slds,col">...</li>%
<li%class="slds,col">...</li>%
...%
</ul>

57. <ul%class="slds,grid">%
...%
<li%class="slds,col">...</li>%
<li%class="slds,col%slds,no,flex">...</li>%
...%
</ul>

58. <ul%class="slds,grid">%
...%
<li%class="slds,col">...</li>%
<li%class="slds,col%slds,no,flex">...</li>%
...%
</ul>

60. Sizing Helpers
Support for 2,3,4,5,6,8, & 12 Column Grids.

61. <...class="slds,size,,1,of,3">%

62. <...class="slds,size,,1,of,3">%
Column span numerator.

63. <...class="slds,size,,1,of,3">%
Human friendly delimiter.

64. <...class="slds,size,,1,of,3">%
Total column denominator.

65. .slds,size,,1,of,3%{%
width:%33.3333333333%;%
}%
%%%% % % %
Output

66. Responsive Sizing Helpers
Sizing helpers have responsive technology baked into them

67. /components/utilities/sizing/

68. Mobile first approach
All responsive classes are additive.

69. Breakpoint Names:
x-small = Small phone
small = Phone
medium = Tablet
large = Desktop

70. <...class="slds,large,size,,1,of,3">%

71. <...class="[default]%[x,small,override]%[small,override]%[medium,override]%[large,override] ">

72. <...class="slds+size++1+of+1%slds,small,size,,1,of,2%slds,medium,size,,1,of,4 ">

73. 100% width up to phone
50% width in between a phone and tablet
25% width on tablet and up (desktop)

74. <div%class="slds,grid%slds,wrap">%
<div%class="slds,size,,1,of,1%slds,small,size,,1,of,2%slds,medium,size,,1,of,4">…</div>%
<div%class="slds,size,,1,of,1%slds,small,size,,1,of,2%slds,medium,size,,1,of,4">…</div>%
<div%class="slds,size,,1,of,1%slds,small,size,,1,of,2%slds,medium,size,,1,of,4">…</div>%
<div%class="slds,size,,1,of,1%slds,small,size,,1,of,2%slds,medium,size,,1,of,4">…</div>%
</div>

75. Mobile:

76. Tablet:

77. Desktop:

79. bit.ly/1lJTr3z
Codepen Responsive Grid Example

80. •Lightning Component in Lightning Experience
•Lightning Component in Visualforce
•Lightning Component in a Lightning App
•Lightning Component in Lightning Out
Lightning Components and SLDS

81. Lightning Component in Lightning Experience
<ltng:require />

82. •Lightning Component in Visualforce
•Lightning Component in a Lightning App
•Lightning Component in Lightning Out
Lightning Components and SLDS
<ltng:require
styles="/resource/myScope/assets/styles/salesforce-lightning-design-system.css"
/>
<div class=“myScope”>
// your components/markup here
</div>

83. •Lightning Component in Visualforce
•Lightning Component in a Lightning App
•Lightning Component in Lightning Out
Lightning Components and SLDS
<ltng:require
styles="/resource/myScope/assets/styles/salesforce-lightning-design-system.css"
/>
<div class=“myScope”>
// your components/markup here
</div>

84. Scoping SLDS in Lightning Components
https://tools.lightningdesignsystem.com/css-customizer

85. Demo

86. thank y u

87. Go Social!
Salesforce Developers
+Salesforce Developers
Salesforce Developers
Salesforce Developers
@SalesforceDevs

88. developers