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.
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.
You have a page template named My Package.My Template.
A page based on this template has a widget on it that references a stylesheet in the following way:
<link rel="stylesheet" href='@Url.WidgetContent("Mvc/Styles/Css/sitefinity-theme.css")'>. All default widgets reference their resources in this way. In this case, the site has files ~/Mvc/Styles/Css/sitefinity-theme.css and ~/ResourcePackages/My Template/Mvc/Styles/Css/sitefinity-theme.css.
The WidgetContent helper ensures that the second file is retrieved and the first file is ignored.
<link rel="stylesheet" href='@Url.WidgetContent("Mvc/Styles/Css/sitefinity-theme.css")'>
Feather comes with an assortment of resource packages meant to ease your work by giving you the ability to base your project on the most popular frontend frameworks out-of-the-box. By default, once you install the Feather package, couple of resource packages are added to your project.
You can also use the packages by downloading them from Sitefinity CMS GitHub feather-packages public repository. In this case, you should copy the package folder and paste it in the SitefinityWebApp, inside the ResourcePackages folder. Then, restart the application and you can use the selected package.
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:
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.
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