Feather resource packages

Feather provides the ability to base your design on one of the most popular Css/Front-end frameworks like 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 will automatically apply these packages over your templates based on their naming. A package can contain stylesheets, scripts, images or even whole layout templates. For samples, see the feather-packages public repository.

A new 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 Page templates based on layout files with Feather.

When a page template uses a package all resource references that are referred with Url.WidgetContent helper will be overridden by the existing files in the package folder. For more information see Refer to resources inside MVC 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 like this: <link rel="stylesheet" href='@Url.WidgetContent("Mvc/Styles/Css/sitefinity-theme.css")'> (this is the way all default widgets reference their resources). The site can have the following files: ~/Mvc/Styles/Css/sitefinity-theme.css ~/ResourcePackages/My Template/Mvc/Styles/Css/sitefinity-theme.css The WidgetContent helper will ensure that the second file will be retrieved and the first will be ignored.

Build-in Feather packages

Feather comes with an assortment of resource packages meant to easy your work by giving you the ability to base your project on the most popular front-end frameworks out of the box. By default once you install the Feather package, couple of resource packages are added to your project. For more information on installing Feather, see Getting Started.

You can also use the packages by downloading them from the feather-packages 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 are ready to use the selected package.

Bootstrap resource package

This package defines styles for all the widgets created with Feather. Also new page template in Sitefinity is created – Bootstrap.default. See Feather page templates for more details.

Bootstrap resource package introduces a new group of layout elements called Bootstrap widget elements. These widgets are similar to the Sitefinity layout widgets. The main difference is that the Bootstrap based widgets provide responsive design to your templates. Following the Bootstrap design new name convention for widgets is introduced. For example instead of the 100% layout widget in Sitefinity, Bootstrap grid widget have name 12.

Why 12?

Because Feather is wrapping the fluid grid system of the Bootstrap framework. The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as the fixed grid system, ensuring proper proportions for key screen resolutions and devices.

SemanticUI package

This package is similar to the Bootstrap one but it is based on the SemanticUI frontend framework. For more information, see the official website of SemanticUI. After the package is installed a new page template is created called Semantic.default. You can base all your pages on that template to use the Semantic UI framework. Also you can add custom page templates based on layout files as described in Create a layout file.

For more information on the Semantic UI package check the readme here.

Foundation package

Foundation package is similar to the Bootstrap and SemanticUI resource packages. It is based on the Foundation framework. For more information, see the official site for the Foundation framework. Similar to Bootstrap and Semantic UI a new page template is created once you install the package with name Foundation.default.

For more information, see the readme from the feather-packages repository.