Styling Apps

An app is a special top-level component whose markup is in a .app resource. Just like any other component, you can put CSS in its bundle in a resource called <appName>.css.

For example, if the app markup is in notes.app, its CSS is in notes.css.

When viewed in Salesforce for Android, iOS, and Lightning Experience, the components include styling that matches those visual themes. For example, the lightning:button includes the slds-button_neutral class to display a neutral style.

Styles added to Lightning components in Salesforce for Android, iOS, and Lightning Experience don’t apply to components in standalone apps.

  • Using the Salesforce Lightning Design System in Apps

    The Salesforce Lightning Design System (SLDS) provides a look and feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom stand-alone Lightning applications a UI that is consistent with Salesforce, without having to reverse-engineer our styles.

  • Using External CSS

    To reference an external CSS resource, upload it as a static resource and use a <ltng:require> tag in your .cmp or .app markup.

  • More Readable Styling Markup with the join Expression

    Markup can get messy when you specify the class names to apply based on the component attribute values. Try using a join expression for easier-to-read markup.

  • Tips for CSS in Components

    Here are some tips for configuring the CSS for components that you plan to use in Lightning pages, the Lightning App Builder, or the Experience Builder.

  • CSS for RTL Languages

    When your Language setting in Salesforce is set to a right-to-left (RTL) language, the framework automatically flips property names, such as left and border-left to right and border-right respectively. The framework also rearranges certain values like padding, margin, and border-radius so that the right and left units are swapped.

  • Styling with Design Tokens and Styling Hooks

    Capture the essential values of your visual design into named tokens or global styling hooks. Reuse these values throughout your Lightning components CSS resources. Tokens and styling hooks make it easy to ensure that your design is consistent, and even easier to update your design as it evolves.

See Also