Create a website with Timer Bootstrap template: Setup project and pages

Default Feather resources, such as widget views and grid widgets, reside in the <root>/Mvc folder and Bootstrap package-specific resources reside in the <root>/ResourcePackages/BootstrapTimer folder. Therefore, you need to make sure the resources are located in the proper locations and folders.

1. In Sitefinity CMS Project manager, create a Sitefinity CMS project.
2. Install the latest Feather version, following the instructions in the article Feather: Get started.
3. Make a copy of the Bootstrap package folder under <root>/ResourcePackages and rename it BootstrapTimer.
   Thus, a default page template is automatically created in Sitefinity CMS. The template is located in Design » Page Templates. The template is based on the default.cshtml view, located in the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Layouts folder.
4. Copy the Bootstrap Timer template frontend assets to the <root>/ResourcePackages/BootstrapTimer/assets/ folder.

   NOTE: The template does not use pre-processors, such as LESS, SASS, and Stylus. Therefore, files are located in the dist folder, as opposed to the src folder.

5. Under <root>/ResourcePackages/BootstrapTimer/assets/dist, create a folder and name it Timer after the template.
   Copy all frontend assets in this new <root>/ResourcePackages/BootstrapTimer/assets/dist/Timer/ folder.
6. Navigate to <root>/ResourcePackages/BootstrapTimer/Mvc/Views/.
   This is the folder that contains all widget views.
   Move all folders from <root>/ResourcePackages/BootstrapTimer/Mvc/Views/ (except the Layouts folder) and paste them in the <root>/Mvc/Views/ folder.
   The Layouts folder, located in <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Layouts/, contains the Razor view, on which the Bootstrap Timer page template is based. The template is located in Sitefinity CMS under Design » Page Templates. For more information about priorities, see Feather: Priorities for resolving views.

   NOTE: In case a folder with a name that corresponds to the name of a widget, for example, Blog post, does not exist in the custom BootstrapTimer package under <root>/ResourcePackages/BootstrapTimer/Mvc/Views/, Sitefinity CMS takes the view from the <root>/Mvc/Views folder.

7. All grid widgets reside in the <root>/ResourcePackages/BootstrapTimer/GridSystem/ folder. To preserve the default grid widgets and leave only the custom ones in the BootstrapTimer folder (as with the widget views):
   Move all files from the <root>/ResourcePackages/BootstrapTimer/GridSystem/ folder to the <root>/GridSystem/

   IMPORTANT: You must preserve the same hierarchy, as in the package, so that the GridSystem folder is on the same level as the MVC folder. Default grid widgets are pulled from <root>/GridSystem/ and the package-specific grid widgets are pulled from <root>/ResourcePackages/BootstrapTimer/GridSystem/.

8. Create a custom grid widget Section.html and place it in the <root>/ResourcePackages/BootstrapTimer/GridSystem/ folder.

   NOTE: Most HTML pages in the Bootstrap Timer template consist of sections, that is, <section> HTML tags, therefore you need a custom grid widget to contain these sections.

9. Create a custom grid widget, called row.html and place it in the <root>/ResourcePackages/BootstrapTimer/GridSystem/ folder.

   NOTE: In some cases, a <div> HTML tag with CSS class row is used to wrap a section, therefore you need a custom grid widget for it.

   IMPORTANT: Put a sf_colsIn class to the <div> HTML tag to create a placeholder in the Sitefinity CMS user interface.

10. Add the references:
    1. Open the default.cshtml view, located in the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Layouts/ folder.
    2. Add all references to .CSS and .JS files. To do so, follow the instruction the article Feather: Refer to resources inside views and by using the @Html.Script and @Html.StyleSheet helper methods.
11. Place the favicon.ico file in the root of the project (under <root>).
12. Restart the Sitefinity CMS application.