Feather: Frameworks integration

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
    

With Feather you can use your own frontend framework, different than the supported frameworks.

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 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 our package .JSON file.
   After running npm install, npm installs the framework in the node_modules folder of our 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 of 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, which 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.