Select a site

Client-side development of add-ons

Use the following guidelines when you do the client-side development of the add-on:

  • You should not use default page templates when creating content that will be exported as part of an add-on.
    Default page templates are not exported. Create new page templates when you want to include them in an add-on.
  • You should structure the HTML in a way that it can be styled via an external file.
    Avoid inline styles.
  • Include the CSS resources for the add-on in the package.
    The consumers of the add-on should be able to override or substitute the included CSS resources with custom ones.
  • When referencing JavaScript libraries, you should use the ones shipped with Sitefinity CMS. For example, JQuery.
  • You should link CSS and JavaScript resources in page templates.
    This will facilitate the process of substituting the resources with custom ones. Avoid linking of resources directly from pages or widget templates.
  • Use BEM naming convention to name CSS classes.
  • Set CSS classes to all HTML tags to ensure the add-on widgets can be easily styled or the add-on widgets’ styles can be easily overridden, if conflicts with client’s styles occur.
  • Style the add-on widget templates using a frontend framework only if you are sure that your clients use this frontend framework.
    Otherwise, you will create an overhead, when your clients need to add a frontend framework to style the add-on widgets. Do not rely on a frontend framework, if you are not sure whether there will be cases, when the add-on will be used in projects that do not use the frontend framework.
  • Do not link CSS file(s) in the add-on widget templates. You should advise your clients to link the CSS file(s) in the <head> tag of the page or add it to the rest of the project’s CSS.
  • If any styling conflicts with the client’s project occur, advice clients to override add-on CSS in a separate file and not directly in the add-on CSS.

Back To Top

Next: Best practices: Testing