lighting experience withour lighting components

Lightning Experience without Lightning Components

If you like new Lightning Experience UI but have a lot of actual projects that, you think, will not work correctly with enabled Lightning Experience, there is an ability to make Classic Salesforce appearance belike Lightning. Maybe Salesforce Lightning Design System (SLDS) will help us solve this problem.

Lightning Design System is a CSS framework like Twitter Bootstrap. It contains a lot of components that you can see in Salesforce with enabled Lightning Experience. Resources of the Design System:

  • CSS framework – components and grid layout system;
  • Icons – PNG and SVG icons;
  • Font – Salesforce Sans font;
  • Design Tokens – customizable variables that includes colors, fonts, spacing, and sizing.

But if you want to use the complete SLDS functionality you must know a few things about it:

  • Apex tags such as <apex:inputField> and <apex:pageBlock> are not supported.
  • For best results you have to use JavaScript Remoting and Remote Objects.
  • If you need to use the standard Salesforce header and sidebar, you cannot use SVG icons.

If these restrictions don’t challenge you, let’s try SLDS in action, because it has only CSS framework without any Javascript. We need also JS to make it fully work as expected. Of course, you can create your own customJS library for SLDS, but also you can use Appiphony Lightning JS (ALJS). It has status Beta, but contains all the main components supporting SLDS.

Before you start to develop Visualforce page, you need to install SLDS and ALJS to your organization. To get SLDS just install the latest unmanaged package from the official web site. Afterwards, download ALJS library and upload aljs.zip file from the “dist” directory to your org’s Static Resources and name it “aljs”.

And now create new VF page to view all projects (custom object) and add new ones:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<!-- xmlns for supporting SVG sprite maps -->
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<head>
<title>Project Manager powered by SLDS with ALJS</title>

<!-- importing SLDS' CSS -->
<apex:stylesheet value="{! URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.min.css') }" />

<script>
// define the assets location for SLDS (this enables to use SLDS' fonts and icons)
var assetsLocation = '{! URLFOR($Resource.SLDS100) }';
</script>
<!-- jQuery required for ALJS -->
<script src="{! $Resource.jQuery }"></script>
<!-- moments.js for ALJS' datepicker -->
<script src="{! $Resource.moments }"></script>
<!-- importing all modules of ALJS -->
<script src="{! URLFOR($Resource.aljs, 'jquery/jquery.aljs-all.min.js') }"></script>
</head>
<body>
<!-- required SLDS wrapper -->
<div class="slds">

</div>
</body>
</html>
</apex:page>

As you can see, we define the SLDS assets location. It is used by ALJS to access SLDS resources. We also add xmlns and xlink attributes to html tag to enable SVG images (if you are going to use Internet Explorer 11, you need to add svg4everybody script on your page.

The .slds class is a main wrapper of Design System. It’s like .container of Twitter Bootstrap. All SLDS classes use standard class naming convention named Block-Element-Modifier Syntax. A block is a high-level component (e.g. .tree), an element is a child component (e.g. .tree__leave) and a modifier is a state of a block or an element (e.g. .tree__leave-yellow).

Now let’s add a header to our page into the SLDS wrapper:

<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<!-- LAYOUT GRID -->
<div class="slds-grid">
<!-- GRID COL -->
<div class="slds-col">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-avatar slds-avatar--large">
<img src="{!$Resource.ProjectIcon}" alt="" />
</span>
</div>
<div class="slds-media__body">
<p class="slds-text-heading--label">Projects</p>
<h1 class="slds-text-heading--medium">All Projects</h1>
</div>
</div>
</div>
</div>
<!-- / LAYOUT GRID -->
</div>
<!-- / PAGE HEADER -->

Grid system of SLDS is a bit like that of the Bootstrap. Inside .slds-grid you can add the required number of columns by adding .slds-col. See the example:

<div class="slds-grid">
  <div class="slds-col">Column 1</div>
  <div class="slds-col">Column 2</div>
  <div class="slds-col">Column 3</div>
</div>

f you need define a column width, you can use sizing helper classes. Use the.slds-size--X-of-Y format where X is a column width and Y is a total column space (it can be 2, 3, 4, 5, 6 or 12). If you want to specify a grid for small screens (>480px) you have to use .slds-small-size--X-of-Y and .slds-medium-size--X-of-Y for larger screens (> 768px).

Add an action button into our header to create a new Project:

<!-- ACTION BUTTON -->
<div class="slds-col slds-no-flex slds-align-middle">
<button class="slds-button slds-button--neutral" data-aljs="modal" data-aljs-show="modal-1">
Add Project
</button>
</div>
<!-- / ACTION BUTTON -->
lighting experience withour lighting components

As you can see, we have added ALJS attributes data-aljs and data-aljs-show to the button tag. The first attribute initializes an element for using it by ALJS and the second one contains element id that will be open. Then we insert body modal div in the end of page:

<!-- A