Manage assets in resource packages
You store and manage your frontend assets in resource packages, located in the root of your project, in folder
For more information, see Resource packages.
By default, Sitefinity CMS uses the Bootstrap4 resource package, based on the Bootstrap frontend framework. You can use it as a starter package to build the design of your website.
For more information, see Bootstrap4 package in the Sitefinity MVC Packages repository.
Alternatively, you can create your own resource package, based on another frontend framework of your choice, using the Minimal package.
For more information, see the Minimal package in the Sitefinity MVC Packages repository.
In this article describes how to manage your frontend assets in your resource packages.
Store widget templates
There are scenarios when you want to store custom widget templates without using resource packages, or you want to share your custom templates among all your packages. In such cases, you place your templates in folder
/MVC/Views in your project's root folder.
If you want to share grid widget templates among resource packages or, if you want to change the grid widgets used in Content » Forms » Create a form or Edit form to use the MVC framework, you move these templates to folder
/GridSystem/Templates, located in your project's root folder.
For more information, see Priorities for resolving views.
Build and manage frontend assets
You generally store all your project-specific frontend assets, such as .scss files, images, scripts, and fonts in folder
. When you use the
npm start command, all source files are processed and moved to folder
assets/dist, from where there are used in the project.
To build your frontend assets, perform the following:
- Open folder
- Open a console and perform
npm install. This command installs all dependencies from the
- Place your assets in folder
- In the
sass folder, place your SASS files and import them in the
- Open folder
- Open a console and run
npm start command.
This command executes the default
npm scripts and subsequently watches for any changes in the files.
NOTE: If you are using Bootstrap 3 or Minimal packages, you need to execute a different command since these packages are using
grunt for their build infrastructure. For more information, see GitHub repository.
Place all your .scss files in folder
RECOMMENDATION: We recommend creating subfolders to organize the project's files. Following is an example of a proper file structure:
Next, you import them in the
main.scss file. For example:
When you run
npm start, all .SCSS files are imported in
assets/src/project/sass/main.scss file and then processed in
If you do not want to include Sitefinity or Bootstrap CSS files or you want to use another Bootstrap version, in assets/src/project/sass/main.scss file, change one of the import rules:
Place all images in folder
assets/src/project/images. When you use
npm start, all images from this folder are compressed and moved to folder
assets/dist/js, perform the following:
- Locate the
EXAMPLE: Following is an example of a
EXAMPLE: To load
project-file-1.js, open the project Razor layout file
and add a reference there in the following way:
@Html.Script(Url.Content("~/ResourcePackages/Bootstrap4/assets/dist/js/project-file-1.js"), "bottom", true)
RECOMMENDATION: We recommend using SVG sprites for your icons. Sitefinity CMS uses Font Awesome SVG sprites for its icons. After you run
npm start, you can find these sprites in folder
assets/dist/sprites. If you need to include additional SVG sprites, perform the following:
- Locate the
- Inside, enter a space-separated list with the SVG files that you want to move.
EXAMPLE: Following is an example of
To use SVG icon in the widget template, add a reference with a
solid.svg is the sprite and
#book is the icon in the following way: