Install the Minimal resource package

The Minimal package contain all default templates of Sitefinity widgets where all classes are replaced with Minimal CSS classes. To use the packages, you need to add the respective package to the ResourcePackages folder of your project.

You can find the Minimal package at Sitefinity's GitHub repository » Minimal package.

If the ResourcePackages folder does not contain any packages, widget templates are loaded from the Embedded resources. The priority for loading templates is as follows:

1. Templates from the resource package
2. Templates from the Embedded resources source

You can install the Minimal resource package using the npm package manager for JavaScript that enables you to assemble packages of reusable code.

Perform the following:

1. Install Node.js from https://nodejs.org/.
2. In Node.js, run the following:
   > npm install
   > npm start

npm start  executes the default npm scritps and subsequently watches for any changes in the files after.
For more information, see npm.

The packages contains Minimal assets and widget templates. Following is a hierarchical list of the major folders and files that come with the packages.

Following is an example of how to structure files hierarchically:

IMPORTANT: We do not recommend renaming the subfolders, because they are used in npm scripts.

The assets folder containing frontend files, such as CSS, JavaScript, images, and SVG sprites.

This folder contains two subfolders – dist and src. All project-specific frontend assets such as SCSS, images, and JavaScript files, must be placed in the src folder. When the npm start is run, all source files are processed and moved to the dist folder, from which they are used in the project.

The assets folder contains the following:

• dist
  This folder contains the processed ready-to-use frontend assets
  
  • css
    This folder containing the processed CSS files.
    • main.css
      This file is the output of the processed main.scss from assets/src/project/sass. This file contains Sitefinity CMS and the project itself.
      
• src
  This folder contains all the source frontend files, which are processed via npm scripts.
  
  • scss
    In this folder, create subfolders to add your SCSS files.
    Sample file and folder structure:

    scss folder

    • main.scss
      In this file import all your SCSS files. This file will be processed to the assets/dist/css/main.min.css folder.
      For example:

      main.scss

      When you run npm start, all SCSS files imported in assets/src/scss/main.scss are processed and output in assets/dist/css/main.css.

      NOTE: If you do not want to include Sitefinity CMS remove the import rule @import "sitefinity"; from the assets/src/scss/main.scss.

This folder contains all layout files and widget templates, as well as scripts that override the default scripts.

It contains the following:

• Default.cshtml
  This is the Razor layout file.
• Components
  This folder contains all widget templates, each placed in its dedicated folder that follows the naming convention.
• Scripts
  This folder contains overrides for default widget scripts.

• The appsettings.json contains a styling configuration per package. 
• The package.json stores metadata that the project requires and all the npm scripts that are used for the build.

By default, all widget templates are included in the Minimal package. To modify a widget template, open and edit it. For example, navigate to
/ResourcePackages/Minimal/Views/Shared/Components/SitefinityNavigation, open the Horizontal.cshtml file, and make your changes.

To create a new template, duplicate an existing one and rename it to NewName.cshtml.

NOTE: For Content list widget, the naming convention for the detail views should be Detail.NewName.cshtml, respectively.

The new template is displayed in the list of templates in the widget designer.

RECOMMENDATION: To facilitate upgrades, we recommend not changing the default widget templates. If you need to make changes to a default template, we recommend creating a new one by duplicating the existing template. You then make the changes on the newly created template.