Feather provides the ability to base your design on one of the most popular CSS and frontend frameworks - Bootstrap. You do this with the help of resource packages. With packages you have the ability to group your resources in separate packages and Sitefinity CMS automatically applies these packages on your templates, based on their naming. A package can contain style sheets, scripts, images, or entire layout templates.
A folder structure is introduced in the web application to enable packaging of resources:~/ResourcePackages/[Package Name]/
You can have several packages with different package names. A page template can use one package. For more information on Feather page templates, see Feather: Base page templates on layout files.
NOTE: When a page template uses a package all resource references that are referred with Url.WidgetContent helper are overridden by the existing files in the package folder. For more information, see Feather: Refer to resources inside views.
Feather comes with Bootstrap resource package, installed out-of-the-box and added to your project. The Bootstrap package frontend assets, widget templates, based on the framework, such as News, Blogs, Images, and so on. The package also contains Sitefinity CMS Bootstrap theme, and grunt configuration. Below are listed some of the folders and files.
Contains the processed ready-to-use front-end assets:
IMPORTANT: We do not recommended renaming the subfolders because they are used in gruntfile.js file.
Following is an example of a file structure:
IMPORTANT: We do not recommend renaming the subfolders since they are used in the gruntfile.js file.
The Razor Layout files, which are equivalent to master pages, are located in Mvc folder. By default, this folder contains the default.cshtml file, which creates a page template in the UI of Sitefinity CMS with the same name - default. To create another page template, add a new file in that folder and it will appear in Sitefinity CMS UI automatically.
Bootstrap package contains a new type of layout elements, named Grid widgets, which are similar in usage to the Sitefinity CMS layout widgets. They are located in the GridSystem folder. Bootstrap based pages are responsive out-of-the-box. Following the Bootstrap design, a new naming convention for grid widgets is introduced. For example, instead of the 50%+50% layout widget in Sitefinity CMS, Bootstrap grid widget is named 6+6. This is because Feather is wrapping the fluid grid system of the Bootstrap framework. The default Bootstrap grid system utilizes 12 columns.
Minimal is a basic package, which contains all default templates of the frontend widgets, such as News, Blogs, and Images, as plain HTML, minimal CSS, and a basic grunt configuration. It can be used as a foundation for custom Feather packages, as well as packages that are based on frontend frameworks of your choice.
You can download the Minimal package from Sitefinity CMS GitHub feather-packages public repository. To use the package, you need to add it to the ResourcePackages folder of your project. If the ResourcePackages folder does not contain any packages, widget templates are loaded from Feather or from the Mvc folder of SitefinityWebApp, if the folder contains files with names, matching the naming convention.
The structure of the Minimal resource package is the same as that of the Bootstrap package, as it also contains minimal front-end assets, widget templates, grid widget templates and grunt configuration.
Back To Top