Reading list Switch to dark mode

    Grid In Lightning Design System

    Updated 28 December 2016

    Salesforce has introduced Lightning Design System which provides built-in styling that allows a developer to focus more on functionality to enhance the developing experience. By using it, when we develop apps in salesforce, the apps are feasible with lightning experience. The focus now is to understand Grid In Lightning Design System.

    Create a customized scoped CSS file to use

    Before acknowledging grid in lightning design system, it is mandatory to create a customized scoped CSS file to get access of the helper classes which are predefined. Following steps are required for the same-

    Step 1: Go to the link https://www.lightningdesignsystem.com/

    Step 2: Click Platform>lightning.
    Step1
    The given link in the snapshot is https://tools.lightningdesignsystem.com/css-customizer

    Step 3: Generate a scoping class. You have to use the name of the class you have just mentioned, further in the code.Step2

    Searching for an experienced
    Salesforce Company ?
    Find out More

    Step 4: Download the zip file.Step3

    Step 5: Include it as static resource.Step4

    Or else,

    You can download the attachment given here and add it as static resource.
    salesforce-lightning-design-system

    Now whenever you need to use the static resource. Use the following Nutshell:

    <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    
        <!--
        /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
        -->
    
        <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
            <head>
                <meta charset="utf-8" />
                <title>Lightning Design System</title>
                <meta http-equiv="x-ua-compatible" content="ie=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}"/><!--Include the stylesheet-->
            </head>
            <body class="wk_static"><!--Always write the name of your scoping class in the outermost div-->
            </body>
        </html>
    </apex:page>

    Grid

    Code:

    <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    
        <!--
        /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
        -->
    
        <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
          <meta charset="utf-8" />
          <title>Lightning Design Grid System </title>
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
        </head>
        <body>
         <div class="wk_static">
            <div class="slds-grid"><!-- Automatic Sizing -->
              <div class="slds-col">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">col</div>
              </div>
              <div class="slds-col">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">col</div>
              </div>
            </div>
            <div class="slds-grid slds-grid--pull-padded" style="margin-top:2rem;">
              <div class="slds-col--padded">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">col--padded</div>
              </div>
              <div class="slds-col--padded">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">col--padded</div>
              </div>
            </div>
            <div class="slds-grid slds-wrap slds-grid--pull-padded" style="margin-top:2rem;"><!-- Manual Sizing -->
    
              <!--This div will be of whole width on any screen-->
              <div class="slds-col--padded slds-size--1-of-1 slds-p-bottom--large">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">1</div>
              </div>
    
              <!--This div will be of 1/2 width on small, 5/6 width on medium and 8/12 width on large screen-->
              <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--5-of-6 slds-large-size--8-of-12 slds-p-bottom--large">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">2</div>
              </div>
    
              <!--This div will be of 1/2 width on small, 1/6 width on medium and 4/12 width on large screen-->
              <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-6 slds-large-size--4-of-12 slds-p-bottom--large">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">3</div>
              </div>
    
              <!--This div will be of whole width on small, 1/2 width on medium and 1/3 width on large screen-->
              <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3 slds-p-bottom--large">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">4</div>
              </div>
    
              <!--This div will be of whole width on small, 1/2 width on medium and 1/3 width on large screen-->
              <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3 slds-p-bottom--large">
                <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">5</div>
              </div>
    
              <!--This div will be of whole width on small and 1/3 width on large screen-->
              <div class="slds-col--padded slds-size--1-of-1 slds-large-size--1-of-3">
                <div class="slds-grid slds-wrap slds-grid--pull-padded">
    
                  <!--This div will be of 1/2 width on small, whole width on medium and 1/2 width on large screen of parent div-->
                  <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2 slds-p-bottom--large">
                    <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">6</div>
                  </div>
                <!--This div will be of 1/2 width on small, whole width on medium and 1/2 width on large screen of parent div-->
                  <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2 slds-p-bottom--large">
                    <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">7</div>
                  </div>          
                </div>      
              </div>
            </div>
          </div>
        </body>
      </html>
    </apex:page>

    Output:

    Output1

     

    Output2

     

    Output3

     

    Support

    That’s all for Grid In Lightning Design System, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you. https://webkul.uvdesk.com/en/customer/create-ticket/

     

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content