Rudimentaries of SLDS
- johnsontitus
- Jun 1, 2020
- 2 min read
Updated: Jun 6, 2020
<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" />
<!-- Import the Design System style sheet
load the CSS in the document-->
<apex:slds />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER
Every time you use Design System markup in Visualforce,
it should be placed inside an outer wrapper <div>
with the slds-scope scoping class.-->
<div class="slds-scope">
<!-- MASTHEAD
slds-text-heading_label, applies Text Heading styling.
slds-m-bottom_small is a spacing utility class to add some padding underneath the heading.-->
<p class="slds-text-heading--label slds-m-bottom--small">
Salesforce Lightning Design System Trailhead Module
</p>
<!-- / MASTHEAD -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- SECTION - BADGE COMPONENTS
slds-m-vertical_large spacing utility class to add top and bottom padding.-->
<section aria-labelledby="badges">
<!--SLDS Class Naming convention: called Block-Element-Modifier syntax
A block represents a high-level component (e.g. .car)
An element represents a descendant of a component (e.g. .car__door)
A modifier represents a particular state or variant of a block or element (e.g. .car__door_red)
-->
<h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
<div>
<!--slds-badge to create a badge component-->
<span class="slds-badge">Badge</span>
<span class="slds-badge slds-theme--inverse">Badge</span>
</div>
</section>
<!-- / SECTION - BADGE COMPONENTS -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
</html>
</apex:page>
To display grid(ie columns and rows) using slds-grid
<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" />
<!-- Import the Design System style sheet -->
<apex:slds />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<!-- MASTHEAD -->
<p class="slds-text-heading_label slds-m-bottom_small">
Salesforce Lightning Design System Trailhead Module
</p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<!-- PAGE HEADER -->
<!--The outer wrapper <div> has the class slds-page-header which applies page header styling. -->
<div class="slds-page-header" role="banner">
<!-- this grid has got two columns - indicated by slds-col in it-->
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<!-- HEADING AREA -->
<p class="slds-text-title_caps slds-line-height_reset">Accounts</p>
<h1 class="slds-page-header__title slds-truncate" title="My Accounts">My Accounts</h1>
<!-- / HEADING AREA -->
</div>
<!-- slds-no-flex indicates no resizing-->
<div class="slds-col slds-no-flex slds-grid slds-align-top">
<button class="slds-button slds-button_neutral">New Account</button>
</div>
</div>
<div class="slds-grid">
<div class="slds-col slds-align-bottom slds-p-top_small">
<p class="slds-text-body_small">COUNT items</p>
</div>
</div>
</div>
<!-- / PAGE HEADER -->
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<ul class="slds-list_dotted slds-m-top_large slds-container_small">
<li>Account 1</li>
<li>Account 2</li>
<li>Account 3</li>
<li>Account 4</li>
<li>Account 5</li>
<li>Account 6</li>
<li>Account 7</li>
<li>Account 8</li>
<li>Account 9</li>
<li>Account 10</li>
</ul>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around_large">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid_align-spread">
<p class="slds-col">Salesforce Lightning Design System Example</p>
<p class="slds-col">© Your Name Here</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>
Comments