1.基礎知識
■Lightning Design System
https://lightningdesignsystem.com/
2.実装例
メタデータ構成
📁components
・Comp_Header.component
・Comp_Footer.component
📁pages
・Page_CSS.page
・Page_Javascript.page
・Page_Template.page
・xxx_Page_Test.page
サンプルソース
Comp_Header.component
<apex:component>
</apex:component>
Comp_Footer.component
<apex:component>
</apex:component>
Page_CSS.page
<apex:page >
<style>
</style>
</apex:page>
Page_Javascript.page
<apex:page>
<script language="javascript">
</script>
</apex:page>
Page_Template.page
<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">
<head>
<title>Visualforce SLDS Sample</title>
<meta charset="utf-8" />
<apex:slds />
<apex:include pageName="Page_CSS" />
<apex:include pageName="Page_Javascript" />
</head>
<body>
<div class="slds-scope">
<c:Comp_Header />
<apex:insert name="content"/>
<c:Comp_Footer />
</div>
</body>
</html>
</apex:page>
xxx_Page_Test.page
<apex:page>
<apex:composition template="Page_Template">
<apex:define name="content">
<!-- 画面コンテンツ -->
<ul class="slds-timeline">
<li class="slds-timeline__item">
<span class="slds-assistive-text">Task</span>
<div class="slds-media slds-media--reverse">
<div class="slds-media__figure">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button--icon-border-filled">
<svg aria-hidden="true" class="slds-button__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#switch')}"></use>
</svg>
<span class="slds-assistive-text">Switch</span>
</button>
</div>
</div>
<div class="slds-media__body">
<div class="slds-media slds-media--timeline slds-timeline__media--task">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-task slds-timeline__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#task')}"></use>
</svg>
</div>
<div class="slds-media__body">
<div class="slds-media slds-tile slds-media--small">
<div class="slds-media__figure">
<label class="slds-checkbox" for="mark-complete">
<input name="checkbox" type="checkbox" id="mark-complete" />
<span class="slds-checkbox--faux"></span>
<span class="slds-form-element__label slds-assistive-text">mark-complete</span>
</label>
</div>
<div class="slds-media__body">
<p class="slds-tile__title slds-truncate"><a href="#">Review proposals for EBC deck with larger team and have marketing review this</a></p>
<ul class="slds-tile__detail slds-list--horizontal slds-text-body--small">
<li class="slds-list__item slds-m-right--large">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">Contact:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Lei Chan</a></dd>
</dl>
</li>
<li class="slds-list__item">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">Assigned to:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Betty Mason</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</apex:define>
</apex:composition>
</apex:page>