Install and upgrade resource packages
Sitefinity CMS comes with Bootstrap resource package, installed out-of-the-box and added to your project. For more information, see Overview: Resource packages.
You upgrade the Bootstrap resource package in one of the following ways:
IMPORTANT: In case you modified the default widget templates in the Bootstrap package, make sure you backup your
ResourcePackages folder before upgrading the Bootstrap package from either NuGet or GitHub.
Following are a few upgrade best practices when upgrading your resource package:
- Before starting the upgrade procedure, make a copy of your package to another location
- After completing the upgrade procedure, merge all conflicts:
- If you using a source control, merge the changes using the source control
- If you are not using a source control, merge the changes from the copy of your package to the upgraded package manually
Use a custom frontend framework
You can also use your own frontend framework, different than Bootstrap.
You do this using the Minimal package, which contains all default widget templates, basic CSS, and a basic grunt configuration. You can get the package from the GitHub repository.
NOTE: You can rename the Minimal package, for example, with the name of the framework you are using.
Get the source of your preferred CSS framework and include it in the Minimal package. You can add the CSS framework styles through
npm or download the styles from the vendor website and manually include them in your package.
The example below demonstrates how to use a custom frontend framework by getting it via
- Add the framework
npm package as a dependency in the package .JSON file.
After running npm install,
npm installs the framework in the node_modules folder of the Minimal package.
- Open the main.scss file, located in the ~/ResourcePackages/Minimal/assets/src/project/sass folder.
Import the framework SCSS file(s) from the node_modules folder.
NOTE: You can take a look at how the Bootstrap framework is imported in the main.scss file of the Bootstrap package in the GitHub repository.
- Run grunt to compile the SCSS files to one main.css file and its minified version main.min.css. Both main files are generated in the ~/ResourcePackages/Minimal/assets/dist folder of your package.
As a result, the main.min.css file is referenced in the layout file of the package, located in the ~/ResourcePackages/Minimal/MVC/Views/Layouts folder. Thus, the main.min.css file is loaded on all pages and page templates that use this package.