Salesforce-Visualforce-8.使用SLDS构建Visualforce App

Salesforce-Visualforce-8.使用SLDS构建Visualforce App
一、Salesforce Lightning Design System (SLDS)发展历史

从 2013 年开始，推出 Lightning Experience 前两年。Salesforce 发展势头迅猛，刚刚收购了 ExactTarget，并且即将发布 Salesforce Platform 的第一个完全移动化版本，Salesforce1。在快速发展过程中，公司的设计师和开发人员意识到需要确保整个 Salesforce 应用程序系列的一致体验，并且为建设一个随着公司和平台的发展而进化的设计系统打下基础。

就这样，随着 Salesforce1 的发布，这个勇敢又有远见的团队开始为设计团队编写图库和第一部风格指南。Salesforce1 工程团队选择用设计令牌这个词来描述风格指南价值观，适用于各种原生操作系统和网络应用程序。

到了 2015 年初，Salesforce 设计师和开发人员将图库和令牌与扩展后的级联样式表 (CSS) 框架相结合，打造 Landmark Design System。

为了确保 Landmark Design System 兼容任何平台，团队使用 HTML 蓝图而不是在设计系统中更常见的全功能组件来打造它。该系统还包含一个扩展后的 CSS 框架以及遵循设计最佳实践的广泛 UI 交互模式。

由此诞生了这样一个设计系统，它的元素结合一起打造一致的高品质用户体验。

但是 Landmark Design System 团队并不满足现状。发布这个新设计系统的时候，团队用一种综合性的可视化语言 Lightning Experience 重新设计了 Salesforce Classic (Aloha) 的用户界面，改变了每个 Salesforce 核心产品的外观和感觉。越来越多产品团队选择用 Lightning Experience 来开发他们的产品。Lightning Experience 的 Landmark Design System 团队的目标是：

帮助销售用户更快销售。
提高服务用户的工作效率。
向所有用户提供现代化的用户界面。
2015 年，设计指引与 CSS 框架相结合，目的是使这个设计系统对于设计师和开发人员来说更好用。随着产品推出，Lightning Experience 从移动设备扩展到了桌面。第一个 Salesforce 设计系统团队还更新了 Landmark CSS 框架，并且在 Salesforce 推广使用。

随着 Landmark 的采用率增加，Salesforce CEO 兼创始人 Marc Benioff 看好它的潜力，把它改名为 Salesforce Lightning Design System (SLDS)。2016 年初，SLDS CSS 框架被加到了 Salesforce 核心代码中。

最早采用 SLDS 的产品包括 Sales Cloud（2015 年冬开始使用令牌和风格指南文档）、Salesforce Mobile 和 Service Cloud（2016 年夏）。随着采用率增加，SLDS 的工程师与 UX 设计师合作，将核心模式和文档标准化。为了响应客户的请求，Salesforce 在 lightningdesignsystem.com 发布全球第一个开源企业设计系统，允许任何人使用 SLDS。

到 2018 年为止，Salesforce Platform 已经完全拥抱 SLDS，它会定期发布更新，影响整个 Salesforce Platform。随着它的发展，这个设计系统在提供一流的支持和治理这个使命上面临着挑战。面对三年 5 倍的增长，SLDS 团队还必须应对多起收购、新产品、技术变革以及优先级的转变。

不过总的来说，SLDS 收到了正面的反响，越来越多客户和合作伙伴采用这个系统，并且在他们自己的组织中复制它的理念和治理模式的元素。这个设计系统团队经常征求反馈意见、更新系统，以满足消费者和投稿人的需求。而且随着新的挑战出现，SLDS 也将不断发展以应对这些挑战。

Salesforce 是设计系统空间领域的行业领导者。SLDS 是全球第一个开源企业设计系统

 二、代码示例
```
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>Salesforce Lightning Design System Trailhead Module</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      
      <apex:slds />
    </head>
    <apex:remoteObjects >
    <apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
    </apex:remoteObjects>
    <body>
      
      <div class="slds-scope">
        
        <p class="slds-text-heading_label slds-m-bottom_small"> Salesforce Lightning Design System Visualforce Workshop </p>
        
        
        
        
        <div class="myapp slds-p-horizontal_medium">
          <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul>
        </div>
        
        
        
      </div>
      
      
      
    </body>
  </html>
</apex:page>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
```
- 代码解析：
  头部的<apex:slds />标记，在 Visualforce页面中导入设计系统样式
- 结果预览：
Resources

Beyond Components: A Design System to Support Multiple Frameworks
Building an Enterprise CSS Framework
Creating Confident Users Through “Clicks, not Code”（通过“点击而不是代码”让用户更自信）
Evolving a Design System at Scale
Lightning Design System website
Lightning Design System open-source GitHub repository
Introduction to SLDS, including resources and guidelines for designers and developers

Web Content Accessibility Guidelines (WCAG) 2.0
SLDS Accessibility Overview
SLDS Blueprint Overview（SLDS 蓝图概述）
SLDS Design Guidelines（SLDS 设计指引）
SLDS Design Tokens（SLDS 设计令牌）
SLDS Voice and Tone（SLDS 语音和铃声）
SLDS Accessibility Overview（SLDS 无障碍概述）
相关阅读:
js数据结构[单项链表]；
【科学计算与可视化】1. Numpy 基础
 “年薪 25 万只是白菜价”已成过去式，AI 岗位年薪下降 8.9%，最新薪酬报告发布
 rabbitmq的confirm模式获取correlationData为null解决办法
 基于ChatGPT+词向量/词嵌入实现相似商品推荐系统
 5G毫米波通信中的关键技术
 几种常用XML文档解析方案的使用操作
 Mysql和Oracle创建日期和修改日期设置为自动生成
 swift的lazy关键字后面还会补充
 2.树莓派4b+ubuntu18.04（ros版本melodic）+arduino mega自制两轮差速小车，实现建图导航功能
原文地址：https://blog.csdn.net/nihaixiao/article/details/125473053

一、Salesforce Lightning Design System (SLDS)发展历史

二、代码示例

Resources