LET'S LEARN TOGETHER. THE BEAUTIFUL THING ABOUT LEARNING IS NOBODY CAN TAKE IT AWAY FROM YOU.

"Lightning Design System" Series || Part 1 || Introduction and Setup your environment to build Visualforce Page with Lightning Design System


The Salesforce User Experience team has come up with a great UI framework called Lightning Design System. The intention is to build application, visualforce pages with this framework which will comply with the new Salesforce lightning look and feel. And the best part is that you don't need to play with CSS.

Now you probably started thinking why I should go for this new Lightning Design System when I have Twitter Bootstrap or Foundation with which also I can achieve the same. The reason is very simple and they are as follows -
  • With the use of this new Lightning Design System, your application or visualforce page will comply with the new Salesforce look and feel.
  • It is a new design system and it is getting improved every day. So as long as you are referring the latest version of design system, you are getting most out of this new framework.
  • The CSS is fully namespaced with slds- prefix which will avoid CSS conflicts.
Ingredients of the Framework:
Salesforce Lightning Design System framework comes with four types of resources.
  • CSS Framework: This will contain UI components, such as page headers, form elements, buttons, grid layout system. This will come up with a single purpose helper class which will assist with spacing, sizing and other visual adjustments.
  • Icons: Includes action, custom, standard and utility icons both in PNG and SVG format.
  • Font: Salesforce designed a new font - Salesforce Sans font. This font is available here.
  • Design Tokens: These are simple variables which will help you design pages, application matching your brand. 
Usage of the Framework:
You can use this framework in -
  • Visualforce pages. (You don't need Lightning Experience enabled in your org for this).
  • Lightning pages and components
  • Mobile apps.
  • Standalone web apps.
Ok enough of theory.

Let's start preparing our environment, so that we can play around.
Before we even start we need to install Lightning Design System as static resource. To use this framework in visualforce page, you need to create a CSS file with a custom scoped outer wrapper. Don't worry. Salesforce comes up with CSS Customizer tool for this. You can use that by following the below steps -
  • Click on Design System CSS Customizer Tool.
  • Choose the Salesforce release and scoping class. You need to remember the class name as you are going to refer the same during visualforce page development.
  • Once done, upload the zipped file as static resource in Salesforce. Please name it SLDSXXX where XXX is the version. The day when I am writing this blog post, the latest version is 2.0.3. So my static resource name is SLDS203.
  • Done.
Let's write our first Visualforce page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<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>Salesforce Lightning Design System Trailhead Module</title>
            <apex:stylesheet value="{!URLFOR($Resource.SLDS203,'assets/styles/salesforce-lightning-design-system-vf.css')}"/>
        </head>
        
        <body>
            <div class="suddeb">
                <p class="slds-text-heading--label slds-m-bottom--small">
                    Salesforce Lightning Design System Trailhead Module
                </p>
            </div>
        </body>
    </html>
</apex:page>
After saving this visualforce page, if you execute, you will see that the look and feel in as per the new Salesforce look and feel. Awesome.

Let's now understand the important stuffs here -
  • Line# 3: To use Salesforce Lightning Design System, you need to make sure that you are including the below attribute in html tag, which will enable support for SVG icon sprite maps within Visualforce.
  • Line# 2: We are turning off header, sidebar and built in stylesheet. With this turned on, you can't add extra attribute in html tag(specified above), which means SVG will not be supported.
  • Line# 6: This is the step/way how you are including lightning design system stylesheet from static resource. This is very important to make sure lightning design system CSS stuffs are available in your visualforce page.
  • Line# 10: To use Lightning Design System markup in visualforce page, it should be placed inside an outer wrapper
    with scoping class you created using CSS Customizer tool. In my case,  the name of the scoping class is: "suddeb". 
  • Don't worry about Line# 11 for the time being. I will explain the same in my next post.
Great. So we have created our first visualforce page with Lightning Design System. In my next post, I will get into more details. Till then, please provide your feedback. Thanks.

Share:

No comments:

Post a Comment

Never miss a post. Subscribe to get latest blog posts, right into your email box.

* indicates required

Labels

Salesforce (105) Apex (51) admin (28) visualforce (21) ADM (20) dev 501 (19) lightning (19) integration (18) learn salesforce (18) 501 (16) javascript (14) SOAP (13) tutorial (11) Certification. (10) Advanced Apex (9) Kitchener Developer Group (8) test class (8) Certification (7) Trigger (7) flow (7) security (7) unit testing (7) Advanced Admin (6) Lightning Experience (6) Sharing and Visibility (6) design pattern (6) developer (6) report (6) salesforce release (6) service cloud (6) trailhead (6) use case (6) Lightning Feature (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) formula (5) mobile (5) solution management (5) JSON (4) Kitchener User Group (4) Lightning Web Component (4) New Feature (4) Sales Cloud (4) Salesforce DX (4) Tips (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) event (4) github (4) html (4) map (4) polymer (4) profiles (4) release (4) responsive (4) tdd (4) ui (4) visual studio code (4) Architect (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) REST (3) Role (3) Salesforce Certification (3) Scratch Org (3) Spring 20 (3) Study Notes. (3) Summer15 (3) VS Code (3) Web Technology (3) Winter21 (3) automation tool (3) configuration (3) dynamic apex (3) license (3) mapbox (3) singleton (3) version controlling (3) AppExchange (2) Article (2) Asynchronous Apex (2) Asynchronous callout (2) Aura Framework (2) Bulkify (2) Community (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enhancement (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) Knowledge Management (2) LWC (2) Lightning Design System (2) Live Agent (2) Metadata (2) PD II (2) Price Book (2) Queueable (2) SFDX (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) Virtual Event (2) ant (2) basic (2) chatter (2) code coverage (2) coding (2) communication (2) console (2) controller (2) documentation (2) dreamforce (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) salesforce1 (2) strategy (2) visual workflow (2) xml (2) Action Plan (1) Action Plan Template (1) Activity Timeline (1) Advanced Currency (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) Arrow (1) Batch (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Compare (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) CumulusCI (1) Custom Metadata (1) Custom Object (1) Custom Permission (1) Customer (1) Data Model (1) DataGrid (1) DataTable (1) Dated Exchange Rate (1) Decorator Design Pattern (1) Dev Hub (1) Development (1) Diwali (1) EDA (1) ESLint (1) Education Cloud (1) Email (1) FSC (1) Function (1) Future (1) Global Gathering (1) Goals (1) Guest Access (1) Guest Profile (1) Guest User Sharing Rule (1) Guide (1) HEDA (1) Higher Education (1) Household (1) Husky (1) IDE (1) Ideas (1) Improvement (1) Invocable (1) KPIs (1) Large Data Volume (1) LastModifiedDate (1) Manage Currencies (1) Manual Sharing (1) Metrics (1) Multi Currency (1) New (1) OOPS (1) OWD (1) Omni-Channel (1) Optimize (1) Partner (1) Permission Set (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Platform Developer II (1) Presentation (1) Prettier (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) QuickReference (1) Related records (1) Reports (1) Retrieve (1) Role Hierarchy (1) SAL (1) Salesfor (1) Salesforce Advisor Link (1) Salesforce Labs (1) Salesforce Optimizer (1) SalesforceDx (1) Schedule (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) Tile (1) Timeline (1) Unauthorized Access (1) User License (1) Users (1) Validation Rule (1) Web (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) actionFunction (1) actionPoller (1) actionRegion (1) actionSupport (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) cli (1) code (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) duplicate (1) dynamic (1) dynamic form (1) email template (1) email-to-case (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) solution (1) sub-tab (1) survey (1) tab (1) username (1) workflow (1)

Popular Posts

Total Pageviews

Contact Me

Name

Email *

Message *