Download as PDF, PPTX
![<...class="[default]
[x-‐small-‐override]
[small-‐override]
[medium-‐override]
[large-‐override]">](https://image.slidesharecdn.com/slds-and-lightning-components-tdx-160616214107/85/SLDS-and-Lightning-Components-71-320.jpg)
Uploaded bySalesforce Developers
SLDS and Lightning Components
This document discusses Salesforce's Lightning Design System (SLDS) and how it was created to support the development of Lightning Experience and Lightning Components. It describes how SLDS provides standardized UI components, styles, and patterns to help ensure consistency across Salesforce applications. It also discusses how SLDS uses tools like a CSS framework, responsive grid system, and design tokens to make the system flexible and customizable. Finally, it provides examples and guidelines for using SLDS components within Lightning Components.
More Related Content
Similar to SLDS and Lightning Components
![Lect 1 Number systems and base conversions. [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/lect1numbersystemsandbaseconversions-260111134109-67c2d865-thumbnail.jpg?width=640&height=640&fit=bounds)
SLDS and Lightning Components
- 1. SLDS and Lightning Components Stephanie Rewis LeadDeveloper, Design Systems @stefsull Greg Rewis Principal Developer Evangelist @garazi
- 2. Forward Looking Statement Thispresentation 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 Salesforceneed a Design System?
- 4.
- 5. Hundreds of Developers SmallTeam of Designers Smaller Design Systems Team
- 8. How can myapp look like this?
- 9. Can I usethe CSS in my app?
- 11. Lightning Design System Thenext generation of living style guides
- 12. Design System Components CSS Framework+ UI Library
- 13. Design audit andinventory of all components in designer's comps
- 14. Border Colors Shadows Spacing Sizing Animation Durations MediaQueries 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 thecomponents down to their smallest patterns and objects.
- 17.
- 32.
- 33.
- 34.
- 38.
- 39. Let’s build ahouse! .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 modeloptimized for user interface design.
- 42. The SLDS gridsystem provides a flexible, mobile-first, device- agnostic scaffolding system The SLDS grid system provides a flexible, mobile-first, device-agnostic scaffolding system
- 43.
- 44. Advantages of FlexboxGrids 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 alibrary of helpers that can modify the grid container or individual grid regions. We use verbose, human-readable classes.
- 49.
- 50.
- 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 for2,3,4,5,6,8, & 12 Column Grids.
- 61.
- 62.
- 63.
- 64.
- 65. .slds-‐size-‐-‐1-‐of-‐3 { width: 33.3333333333%; } Output
- 66. Responsive Sizing Helpers Sizinghelpers have responsive technology baked into them
- 67.
- 68. Mobile first approach Allresponsive classes are additive.
- 69. Breakpoint Names: x-small =Small phone small = Phone medium = Tablet large = Desktop
- 70.
- 71. <...class="[default] [x-‐small-‐override] [small-‐override] [medium-‐override] [large-‐override]">
- 72.
- 73. 100% width upto 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.
- 76.
- 77.
- 79.
- 80. • Lightning Componentin Lightning Experience • Lightning Component in Visualforce • Lightning Component in a Lightning App • Lightning Component in Lightning Out Lightning Components and SLDS
- 81. Lightning Component inLightning Experience <ltng:require />
- 82. • Lightning Componentin 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 Componentin 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 inLightning Components https://tools.lightningdesignsystem.com/css-customizer
- 85.
- 86.
- 87. Go Social! Salesforce Developers +SalesforceDevelopers Salesforce Developers Salesforce Developers @SalesforceDevs
- 88.