UI Style Guide

The Freshsales UI is built on a modified version of the Bootstrap v3.3 framework. The user interface of apps that are to be published on the Freshworks Marketplace need to be consistent with the Freshsales UI. We do not enforce this for custom apps but it is highly recommended for better user experience.
Here are a few guidelines that you need to follow.

  1. Import the Freshsales app stylesheet in all templates and ensure that the class names of UI elements used in the app match those used by Bootstrap.
    template.html
    Copied Copy
    1
    <link rel="stylesheet" type="text/css" href="https://static.freshdev.io/fdk/2.0/assets/freshworks_crm.css">
    Note: For an omni app, use:
    template.html
    Copied Copy
    1
    <link rel="stylesheet" type="text/css" href="https://static.freshdev.io/fdk/2.0/assets/freshworks.css">
  2. All template files should contain a div block with class="fs-widget-wrapper" inside the body of the template. This is used to implement styles which are applicable to all elements of the app.

    Copied Copy
    1
    2
    3
    4
    5
    <body> <div class="fs-widget-wrapper"> //template code </div> </body>
  3. A few elements and their usage are listed in the following table.

    ELEMENT USAGE
    Label - Defines a label for an input element <span class="label">Company</span>
    Section Divider - Separates various sections of the app. <div class="fw-divider"></div>
    Links - Allows users to move from one page to another. No class needs to be added. <a href="">First Opportunity</a>
    List - All divs within the parent are placed one after the other. If you are using this template to display field names and values, use the muted class for field names. Copied Copy
    1
    2
    3
    4
    <div class="fw-content-list"> <div class="muted">Email</div> <div>tom@outerspace.com</div> </div>
  4. Crayons

    To build apps that are consistent with the Freshworks UI, you can use our UI component library - Crayons. Crayons leverages the custom CSS properties to provide a default theme and style for the app’s UI components. To include components such as section dividers, links, and lists you can use the FCRM app stylesheet. For more information on how to use the stylesheet, see the UI Style Guide.