Feather: Resource packages overview
Feather provides the ability to base your design on one of the most popular CSS and frontend frameworks - Bootstrap. 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. For more information, see Bootstrap.
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.