Designing App UI

Design your app's UI by including markup in the .app resource. Each part of your UI corresponds to a component, which can in turn contain nested components. Compose components to create a sophisticated app.

An app’s markup starts with the <aura:application> tag.

Note

Note

Creating a standalone app enables you to host your components outside of Salesforce1 or Lightning Experience, such as with Lightning Out or Lightning components in Visualforce pages. To learn more about the <aura:application> tag, see aura:application.

Let's look at a sample.app file, which starts with the <aura:application> tag.

<aura:application extends="force:slds">
    <lightning:layout>
        <lightning:layoutItem padding="around-large">
            <h1 class="slds-text-heading--large">Sample App</h1>
        </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout>
        <lightning:layoutItem padding="around-small">
            Sidebar
            <!-- Other component markup here -->
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            Content
            <!-- Other component markup here -->
        </lightning:layoutItem>
    </lightning:layout>
    
</aura:application>

The sample.app file contains HTML tags, such as <h1>, as well as components, such as <lightning:layout>. We won't go into the details for all the components here but note how simple the markup is. The <lightning:layoutItem> component can contain other components or HTML markup.