slds and lightning components
TRANSCRIPT
![Page 1: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/1.jpg)
SLDS and Lightning Components
Stephanie Rewis Lead Developer, Design Systems
@stefsull
Greg Rewis Principal Developer Evangelist
@garazi
![Page 2: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/2.jpg)
Forward Looking StatementThis 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.
![Page 3: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/3.jpg)
Why did Salesforce need a Design System?
![Page 4: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/4.jpg)
Lightning Experience
![Page 5: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/5.jpg)
Hundreds of Developers Small Team of Designers
Smaller Design Systems Team
![Page 6: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/6.jpg)
![Page 7: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/7.jpg)
![Page 8: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/8.jpg)
How can my app look like this?
![Page 9: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/9.jpg)
Can I use the CSS in my app?
![Page 10: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/10.jpg)
![Page 11: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/11.jpg)
Lightning Design System The next generation of living style guides
![Page 12: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/12.jpg)
Design System Components CSS Framework + UI Library
![Page 13: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/13.jpg)
Design audit and inventory of all components in designer's comps
![Page 14: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/14.jpg)
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
![Page 15: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/15.jpg)
.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); }
![Page 16: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/16.jpg)
We broke the components down to their smallest patterns and objects.
![Page 17: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/17.jpg)
SLDS Micropatterns
![Page 18: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/18.jpg)
![Page 19: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/19.jpg)
![Page 20: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/20.jpg)
![Page 21: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/21.jpg)
![Page 22: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/22.jpg)
![Page 23: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/23.jpg)
![Page 24: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/24.jpg)
![Page 25: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/25.jpg)
![Page 26: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/26.jpg)
![Page 27: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/27.jpg)
![Page 28: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/28.jpg)
![Page 29: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/29.jpg)
![Page 30: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/30.jpg)
![Page 31: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/31.jpg)
![Page 32: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/32.jpg)
/components/utilities/lists#flavor-vertical-dividers
![Page 33: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/33.jpg)
/components/utilities/lists#flavor-vertical-dividers
![Page 34: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/34.jpg)
/components/utilities/lists#flavor-horizontal-dividers
![Page 35: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/35.jpg)
![Page 36: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/36.jpg)
![Page 37: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/37.jpg)
![Page 38: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/38.jpg)
Block Element Modifier
BEM Naming Convention
![Page 39: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/39.jpg)
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
![Page 40: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/40.jpg)
![Page 41: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/41.jpg)
FlexboxCSS box model optimized for user interface design.
![Page 42: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/42.jpg)
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
![Page 43: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/43.jpg)
/components/utilities/grid/
![Page 44: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/44.jpg)
Advantages of Flexbox Grids
Automatic Sizing Lowers the bar for error. Great for component layouts.
Manual SizingGreat 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 GridsNest grids inside grids. It’s fast and efficient.
![Page 45: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/45.jpg)
<div class="slds-‐grid"> …
</div>
![Page 46: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/46.jpg)
<ul class="slds-‐grid"> …
</ul>
![Page 47: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/47.jpg)
<span class="slds-‐grid"> …
</span>
![Page 48: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/48.jpg)
Extensible
We provide a library of helpers that can modify the grid container or individual grid regions.
We use verbose, human-readable classes.
![Page 49: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/49.jpg)
<div class="slds-‐grid slds-‐grid-‐-‐vertical"> …
</div>
![Page 50: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/50.jpg)
<div class="slds-‐grid slds-‐grid-‐-‐vertical"> …
</div>
![Page 51: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/51.jpg)
Flex-wrap
.slds-wrap { // This is placed on the .grid container flex-wrap: wrap; align-items: flex-start }
![Page 52: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/52.jpg)
<ul class="slds-‐grid"> ...
<li>...</li> <li>...</li>
... </ul>
![Page 53: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/53.jpg)
![Page 54: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/54.jpg)
<ul class="slds-‐grid"> ...
<li class="slds-‐col">...</li> <li class="slds-‐col">...</li>
... </ul>
![Page 55: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/55.jpg)
<ul class="slds-‐grid"> ...
<li class="slds-‐col">...</li> <li class="slds-‐col">...</li>
... </ul>
![Page 56: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/56.jpg)
![Page 57: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/57.jpg)
<ul class="slds-‐grid"> ...
<li class="slds-‐col">...</li> <li class="slds-‐col slds-‐no-‐flex">...</li>
... </ul>
![Page 58: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/58.jpg)
<ul class="slds-‐grid"> ...
<li class="slds-‐col">...</li> <li class="slds-‐col slds-‐no-‐flex">...</li>
... </ul>
![Page 59: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/59.jpg)
![Page 60: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/60.jpg)
Sizing Helpers Support for 2,3,4,5,6,8, & 12 Column Grids.
![Page 61: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/61.jpg)
<...class="slds-‐size-‐-‐1-‐of-‐3">
![Page 62: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/62.jpg)
<...class="slds-‐size-‐-‐1-‐of-‐3">
Column span numerator.
![Page 63: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/63.jpg)
<...class="slds-‐size-‐-‐1-‐of-‐3">
Human friendly delimiter.
![Page 64: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/64.jpg)
<...class="slds-‐size-‐-‐1-‐of-‐3">
Total column denominator.
![Page 65: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/65.jpg)
.slds-‐size-‐-‐1-‐of-‐3 { width: 33.3333333333%;
} Output
![Page 66: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/66.jpg)
Responsive Sizing Helpers Sizing helpers have responsive technology baked into them
![Page 67: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/67.jpg)
/components/utilities/sizing/
![Page 68: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/68.jpg)
Mobile first approach
All responsive classes are additive.
![Page 69: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/69.jpg)
Breakpoint Names:
x-small = Small phone small = Phone
medium = Tablet large = Desktop
![Page 70: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/70.jpg)
<...class="slds-‐large-‐size-‐-‐1-‐of-‐3">
![Page 71: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/71.jpg)
<...class="[default] [x-‐small-‐override] [small-‐override] [medium-‐override] [large-‐override]">
![Page 72: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/72.jpg)
<...class="slds-‐size-‐-‐1-‐of-‐1 slds-‐small-‐size-‐-‐1-‐of-‐2 slds-‐medium-‐size-‐-‐1-‐of-‐4">
![Page 73: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/73.jpg)
100% width up to phone
50% width in between a phone and tablet
25% width on tablet and up (desktop)
![Page 74: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/74.jpg)
<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>
![Page 75: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/75.jpg)
Mobile:
![Page 76: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/76.jpg)
Tablet:
![Page 77: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/77.jpg)
Desktop:
![Page 78: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/78.jpg)
![Page 80: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/80.jpg)
• Lightning Component in Lightning Experience
• Lightning Component in Visualforce
• Lightning Component in a Lightning App
• Lightning Component in Lightning Out
Lightning Components and SLDS
![Page 81: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/81.jpg)
Lightning Component in Lightning Experience
<ltng:require />
![Page 82: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/82.jpg)
• 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>
![Page 83: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/83.jpg)
• 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>
![Page 84: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/84.jpg)
Scoping SLDS in Lightning Components
https://tools.lightningdesignsystem.com/css-customizer
![Page 85: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/85.jpg)
Demo
![Page 86: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/86.jpg)
thank y u
![Page 87: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/87.jpg)
Go Social!
Salesforce Developers
+Salesforce Developers
Salesforce Developers
Salesforce Developers
@SalesforceDevs
![Page 88: SLDS and Lightning Components](https://reader035.vdocument.in/reader035/viewer/2022062412/587198c81a28ab044e8b53d1/html5/thumbnails/88.jpg)
developers