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.

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.

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:

• dist
  
  • css
  • fonts
  • images
  • js
• fonts
• icons
• src
  • icons
  • images
  • js
  • sass

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 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 also use the packages by downloading them 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.