Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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.

SLDS and Lightning Components

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

×