Install the Foundation resource package

Overview

The Foundation package contain all default templates of Sitefinity widgets where all classes are replaced with Foundation CSS classes. To use the packages, you need to add the respective package to the ResourcePackages folder of your project.

Priority for loading templates

If the ResourcePackages folder does not contain any packages, widget templates are loaded from the Embedded resources. The priority for loading templates is as follows:

1. Templates from the resource package
2. Templates from the Embedded resources source

Install

You can install the Foundation resource package using the npm package manager for JavaScript that enables you to assemble packages of reusable code.

Perform the following:

1. Install Node.js from https://nodejs.org/.
2. In Node.js, run the following:
   `> npm install

   npm start`

npm start  executes the default npm scritps and subsequently watches for any changes in the files after.
For more information, see npm.

Package structure   

The packages contains Foundation assets and widget templates. Following is a hierarchical list of the major folders and files that come with the packages.

Following is an example of how to structure files hierarchically:

| ResourcePackages
|--- Foundation
|------ assests
|--------- dist
|--------- src
|------------ scss
|--------------- sitefinity
|--------------- main.scss
|------------ images
|------------ js

IMPORTANT: We do not recommend renaming the subfolders, because they are used in npm scripts.

The assets folder structure

The assets folder containing frontend files, such as CSS, JavaScript, images, and SVG sprites.

This folder contains two subfolders – dist and src. All project-specific frontend assets such as SCSS, images, and JavaScript files, must be placed in the src folder. When the npm start is run, all source files are processed and moved to the dist folder, from which they are used in the project.

The assets folder contains the following:

• dist This folder contains the processed ready-to-use frontend assets
  • images
    This folder contains compressed images from the project's src folder. These images are usually used as background images in the CSS.
  • js
    This folder contains a JavaScript file, which is listed in the config.copyJs section of the package.json file. You can use this file by adding a reference to it in the layout file /Views/Shared/Default.cshtml.
  • css This folder containing the processed CSS files.
    • main.css
      This file is the output of the processed main.scss from assets/src/project/sass. This file contains Sitefinity CMS and the project itself.
    • main.min.css
      This file is the minified version of the main.css file. The main.min.css file is the distributed CSS file that is linked in the  /Views/Shared/Default.cshtml layout file.
    • sitefinity.css
      This file is the output of the processed sitefinity.scss from assets/src/sitefinity/sass. This file contain CSS added by Sitefinity CMS
    • sitefinity.min.css
      This file is the minified version of sitefinity.css
• src
  This folder contains all the source frontend files, which are processed via npm scripts.

  • images
    Place all images in this folder. After npm start is run, these images will be compressed and output to the assets/dist/images folder.

  • js
    Add JavaScript files in this folder that will be moved to the assets/dist/js folder. You will need to extend the file paths listed in package.json file in config.copyJs section to include in a space-separated list all JavaScript files that need to be moved to assets/dist/js.

  • scss
    In this folder, create subfolders to add your SCSS files.
    Sample file and folder structure:

    scss folder

    `|-- scss

|---- settings |------ _colors.scss |------ _typography.scss ... |---- base |------ _link.scss |------ _typography.scss `

    - `main.scss`  
        In this file import all your SCSS files. This file will be processed to the `assets/dist/css/main.min.css` folder.  
        For example:
        
        **main.scss**

        ```CSS
        // Sitefinity CSS
        @import "sitefinity";
        
        //Import .scss files here
        @import "setting/colors";
        @import "setting/typography";
        ...
        @import "base/link";
        @import "base/typography";
        ```

        When you run `npm start`, all SCSS files imported in `assets/src/scss/main.scss` are processed and output in `assets/dist/css/main.css`.

        > info  **NOTE**: If you do not want to include Sitefinity CMS remove the import rule `@import "sitefinity"`; from the `assets/src/scss/main.scss`.
    - `sitefinity`  
        This folder contains the SCSS files for Sitefinity CMS styling.

The Views/Shared folder

This folder contains all layout files and widget templates, as well as scripts that override the default scripts.

It contains the following:

• Default.cshtml
  This is the Razor layout file.
• Components
  This folder contains all widget templates, each placed in its dedicated folder that follows the naming convention.
• Scripts
  This folder contains overrides for default widget scripts.

The appsettings and package JSONs

• The appsettings.json contains a styling configuration per package.
• The package.json stores metadata that the project requires and all the npm scripts that are used for the build.

Modify widget templates

By default, all widget templates are included in the Foundation package. To modify a widget template, open and edit it. For example, navigate to
/ResourcePackages/Foundation/Views/Shared/Components/SitefinityNavigation, open the Horizontal.cshtml file, and make your changes.

Create a new template

To create a new template, duplicate an existing one and rename it to NewName.cshtml.

NOTE: For Content list widget, the naming convention for the detail views should be Detail.NewName.cshtml, respectively.

The new template is displayed in the list of templates in the widget designer.

RECOMMENDATION: To facilitate upgrades, we recommend not changing the default widget templates. If you need to make changes to a default template, we recommend creating a new one by duplicating the existing template. You then make the changes on the newly created template.