Manage assets in resource packages
Overview
You store and manage your frontend assets in resource packages, located in the root of your project, in folder ResourcePackages
.
For more information, see Resource packages.
By default, Sitefinity CMS uses the Bootstrap5 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 Bootstrap5 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 ~/assets/src/project
. 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
~/ResourcePackages/<NameOfPackage>
. - Open a console and perform
npm install
. This command installs all dependencies from the package.json
file. - Place your assets in folder
~/ResourcePackages/<NameOfPackage>/assets/src/project
.
- In the
~/sass
folder, place your SASS files and import them in the main.scss
file. - Open folder
~/ResourcePackages/<NameOfPackage>
.
- 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 Feather GitHub repository.
SCSS files
Place all your .scss files in folder ~/assets/src/project/sass
.
RECOMMENDATION: We recommend creating subfolders to organize the project's files. Following is an example of a proper file structure:
sass
settings
_colors.scss
_typography.scss
...
base
_link.scss
_typography.scss
...
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 ~/assets/dist/css/main.css
file.
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:
@import "../../sitefinity/sass/sitefinity.scss";
@import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss";
Images
Place all images in folder ~/assets/src/project/images
. When you use the npm start
command, all images from this folder are moved to folder ~/assets/dist/images
.
JavaScript files
If you need to place JavaScript files in folder ~/assets/dist/js
, perform the following:
- Open
packages.json
. - Locate the
config.copyJs
section. - Inside, enter a space-separated list of JavaScript files that you want move.
EXAMPLE: Following is an example of a package.json
config section:
To load a JavaScript file in your Razor layout file, you must add a reference to it.
EXAMPLE: To load project-file-1.js
, open the project Razor layout file ~/ResourcePackages/Bootstrap5/MVC/Views/Layouts/default.cshtml
and add a reference there in the following way:
@Html.Script(Url.Content("~/ResourcePackages/Bootstrap5/assets/dist/js/project-file-1.js"), "bottom", true)
Icons
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:
- Open
packages.json
. - Locate the
config.copySprites
section. - Inside, enter a space-separated list with the SVG files that you want to move.
EXAMPLE: Following is an example of package.json
config section:
To use SVG icon in the widget template, add a reference where a solid.svg
is the sprite and #book
is the icon in the following way: