Step 1: Create A Static Mockup

Create a static mockup in a.app file, which is the entry point for your app. It can contain other components and HTML markup.

The following flowchart summarizes the data flow in the app. The app retrieves data from the records through a combination of client-side controller and helper functions, and an Apex controller, which you’ll create later in this quick start.

This tutorial uses the Salesforce Lightning Design System CSS framework, which provides a look and feel that’s consistent with Lightning Experience.

Go to https://www.lightningdesignsystem.com/resources/downloads and download the latest version of the Lightning Design System zip archive static resource, and install it into your org. If you name the static resource something other than “SLDSv2”, you’ll need to revise the sample code that follows to reflect the name of your static resource.
Open the Developer Console.
1. In Salesforce Classic, click Your Name | Developer Console.
2. In Lightning Experience, click the quick access menu (), and then Developer Console.
Create a new Lightning app. In the Developer Console, click File | New | Lightning Application.
Enter expenseTracker for the Name field in the New Lightning Bundle popup window. This creates a new app, expenseTracker.app.

In the source code editor, enter this code.

1<aura:application>
2    <!-- Include the SLDS static resource (adjust to match package version) -->
3    <ltng:require styles="{!$Resource.SLDSv2 + 
4         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
5    
6    <div class="slds">
7        <div class="slds-page-header">
8          <div class="slds-grid">
9            <div class="slds-col slds-has-flexi-truncate">
10              <p class="slds-text-heading--label">Expenses</p>
11              <div class="slds-grid">
12                <div class="slds-grid slds-type-focus slds-no-space">
13                  <h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">My Expenses</h1>
14                </div>
15              </div>
16            </div>
17          </div>
18        </div>
19    </div>
20</aura:application>

An application is a top-level component and the main entry point to your components. It can include components and HTML markup, such as <div> and <header> tags. The CSS classes are provided by the Lightning Design System CSS framework.

Save your changes and click Preview in the sidebar to preview your app. Alternatively, navigate to https://<myDomain>.lightning.force.com/<namespace>/expenseTracker.app, where <myDomain> is the name of your custom Salesforce domain. If you’re not using a namespace, your app is available at /c/expenseTracker.app.
You should see the header My Expenses.

Lightning Components Developer Guide

Step 1: Create A Static Mockup

See Also: