Salesforce lightning design system

download Salesforce lightning design system

of 12

  • date post

    16-Apr-2017
  • Category

    Software

  • view

    347
  • download

    1

Embed Size (px)

Transcript of Salesforce lightning design system

  • Lightning Design SystemBy Shermal Warnakula

  • Lightning Design System?

    A collection of Design

    Patterns, Components,

    and Guidelines for

    creating unified UIs on

    Salesforce ecosystem.

  • Style with Ease

    You might have used similar design systems, such as

    Twitter Bootstrap or Foundation for building websites.

    With the Lightning Design System you can build

    custom applications with a look and feel that is

    consistent with Salesforce core features.

  • Key Benefits

    Tailored for building Salesforce apps with Salesforce

    Lightning look and feel.

    Continuously updated.

    Accessibility is baked into the CSS framework behind

    the components.

    The CSS is fully namespaced with the slds- prefix to

    avoid CSS conflicts.

  • Bundles Four Types of Resources

    CSS framework

    Icons

    Font

    Design Tokens - allows you to tailor aspects of the

    visual design to match your brand.

  • Core Design Principles

    The Lightning Experience UI, which the Design System

    represents, was crafted using four core design principles.

    Clarity

    Efficiency

    Consistency

    Beauty

  • How to Setup ?

    Install as an unmanaged package - Go to the Design

    System downloads page, and install the latest version.

    The unmanaged package will contain a single static

    resource.

    Download the Design System zip from the downloads

    page and upload it yourself as a static resource.

    https://www.lightningdesignsystem.com/resources/downloadshttps://www.lightningdesignsystem.com/resources/downloads

  • Where Can We Use ?

    Visualforce pages

    Lightning pages and components (Salesforce1,

    Lightning Experience)

    Mobile apps accessing Salesforce.

    Standalone web apps

  • Responsiveness ?

    A flexible and powerful Grid System, is provided to

    construct responsive layouts that scale elegantly across

    screen sizes.

    https://www.lightningdesignsystem.com/components/grid-system/

  • Browser Compatibility

    Browser Version

    Google Chrome Latest

    Mozilla Firefox Latest

    Safari Latest

    Internet Explorer 11 and above

  • References

    Information Central :

    https://www.lightningdesignsystem.com/

    Learn with Experience :

    https://developer.salesforce.com/trailhead/en/module/lig

    htning_design_system

    https://developer.salesforce.com/trailhead/en/module/lightning_design_systemhttps://developer.salesforce.com/trailhead/en/module/lightning_design_system

  • Design SystemDemo