Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Feather: Install and upgrade resource packages

Feather comes with Bootstrap resource package, installed out-of-the-box and added to your project. For more information, see Feather: Resource packages overview.

You upgrade the Bootstrap resource package in one of the following ways:

  • Via the NuGet repository
    You do this by installing the Telerik.Sitefinity.Feather. For more information see Sitefinity CMS NuGet repository.
  • Via the GitHub repository
    Feather packages are open source. You can find the source files in the following GitHub repository: https://github.com/sitefinity/feather-packages. To get the latest packages versions, clone or download the repository and replace the ResourcePackages folder.   

    NOTE: In case you are working with the Minimal package, you can only upgrade it via the GitHub repository. 

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

With Feather you can 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 Feather 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 npm:

  1. 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.
  2. 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.

  3. 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.

Back To Top