Feather: Resource packages overview
Feather provides the ability to base your design on one of the most popular CSS and frontend frameworks, such as Bootstrap, Foundation, SemanticUI, etc. This is achieved by the introduction 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.
EXAMPLE:
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.
Built-in Feather packages
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.
Bootstrap resource package
This package contains all frontend widgets templates based on the Bootstrap frontend framework, such as News, Blogs, Images, etc. It also contains Bootstrap, Sitefinity CMS Bootstrap theme, and grunt configuration.
Frontend resources are organized in assets folder. The CSS source files are in SASS, located under assets/css. The compiled CSS is located under assets/dist. The assets folder and has the following structure:
The Razor Layout files, which are equivalent to master pages, are located in Mvc/Views/Layouts. 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 resource package
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.
SemanticUI resource package
This package is similar to the Bootstrap one but it is based on the SemanticUI frontend framework.
After the package is installed a new page template is created called Semantic.default. To use the Semantic UI framework, you can base all your pages on that template . Also you can add custom page templates, based on layout files. For more information, see Feather: Create layout files.
Foundation resource package
Foundation package is based on the Foundation framework. Similar to Bootstrap and Semantic UI, once you install the package, a new page template is created named Foundation.default.