Once you install Feather and choose a frontend framework to use for your website, you can start to write CSS files in the package folder of the respective framework. The following best practices give you recommendations of how to manage your frontend assets in Feather packages. For more information, see Feather GitHub repository.
NOTE: If you are using Bootstrap or Minimal packages, this file is already referenced in the default.cshtml layout file, located in ~/ResourcePackages /[Name-Of-Package /MVC/Views/Layouts folder. In case you are using another package, make sure to add a reference to the main.min.css file in your layout files. This way all pages and templates, based on those layout files, load main.min.css.
In case you want to store custom widget templates and the default widget templates in different locations, you place the custom templates in the /MVC/Views folder in the root SitefinityWebApp folder of your project. Thus, it is easier to navigate and manage the files. The same applies to grid widget templates. You can move the project-specific grid widget templates to the /GridSystem/Templates folder, located in the root SitefinityWebApp folder of the project.
You generally store all your project-specific frontend assets, such as .SCSS files, images, scripts, and fonts in the assets/src/project folder. When the default Grunt task is run, all source files are processed and moved to the assets/dist folder, from where there are used in the project.
Place all your .SCSS files in the assets/src/project/sass folder. We recommend to create subfolders to organize the project's files. Following is an example of a proper file structure:
Next, you import them in the main.scss file. For example:
When you run Grunt, all .SCSS files are imported in the assets/src/project/sass/main.scss file and then processed in the assets/dist/css/main.css file.
If you do not want to include Sitefinity or Bootstrap CSS files or you want to use another Bootstrap version, in the assets/src/project/sass/main.scss file and change one of the import rules:
Place all images in the assets/src/project/images folder. When you run Grunt, all images from this folder are compressed and moved to the assets/dist/images folder.
To load the project.min.js file, open the Project's Razor layout file default.cshtml, located in the MVC/Views/Layouts/ folder. Add a reference:
Place all .SVG files that you want to use as icons via an icon font in the assets/src/project/icons folder. After you run Grunt for the first time, the icon font is created. If you add new .SVG files, you need to run the Grunt task manually (grunt webfont) or rerun the default Grunt task. After that, two new CSS classes are generated for each icon. For example, if the name of the .SVG file is logo.svg, the names of the generated CSS classes are:
<span class="icon-logo">Company name</span>
<span class="icon-item-logo">Company name</span>
Once you import the source files of a frontend framework, you can change the variables the framework exposes and, thus, customize their predefined values. For example, the Bootstrap framework has variables that define the breakpoints for the responsive design features. Breakpoints depend on the website design and are not universal, so Feather enables you to redefine these variables according to your design requirements.
You can find the Bootstrap breakpoint variables in folder \node_modules\bootstra-sass\assets\stylesheets\bootstrap in file _variables.sass. You can locate breakpoint variables by searching for //== Media queries breakpoints. Each variable is defined with a !default tag. If, in your SASS files, you define a variable with the same name as a predefined Bootstrap framework variable, your new variable overrides the Bootstrap default variable value.
//== Media queries breakpoints
NOTE: You can also override variables of custom frameworks you use.
With Feather you can use your own frontend framework, different than the supported frameworks.
You do this using the Minimal package, which contains all default widget templates, basic CSS, and a basic grunt configuration. You can get the package from the Feather GitHub repository.
NOTE: You can rename the Minimal package, for example, with the name of the framework you are using.
Get the source of your preferred CSS framework and include it in the Minimal package. You can the CSS framework styles through npm or download the styles from the vendor website and manually include them in your package.
The example below demonstrates how to use a custom frontend framework by getting it via npm:
NOTE: You can take a look of how the Bootstrap framework is imported in the main.scss file of the Bootstrap package in the GitHub repository.
Back To Top