Use a framework package

Once you install Feather and choose a frontend framework to use for your website, you can start writing CSS files in the package folder of the respective framework. Another option is to duplicate the package folder of the framework and start working there. Choosing the latter option, however, can affect the upgrade process later on, so make sure you get acquainted with this article: Upgrade a Feather package.

Use the GruntJS infrastructure

Feather uses the GruntJS infrastructure, which is a NodeJS-based task runner used for automating the frontend workflow. For more information, see http://gruntjs.com/. When generating Feather packages, the task runner also compiles SASS files, compresses CSS and _JS_files, creates sprites, and optimizes images.

To use the GruntJS infrastructure, follow this procedure:

1. Install NodeJS from the following link: http://nodejs.org/.
2. Open up a command prompt or a bash terminal and navigate to the package folder (for example, /ResourcePackages/Bootstrap)
3. To install GruntJS and all other npm packages you need to use, type npm install in the command line.
4. To start watching for changes and to run all GruntJS tasks,tType grunt.

Frontend frameworks: Overview

Feather supports the Bootstrap, Foundation, or SemanticUI frontend frameworks. The Bootstrap and Foundation source files are included in the CSS generated for each framework package. This styles.sass file is located in /assets/src/sass. Once you open the file, you can see an @import, having content similar to this: @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss";

This @import will include the whole Bootstrap framework and gives you flexibility in terms of customization. If you know exactly which Bootstrap components you are going to use in your website, you can include just these components that you need. As a result, the generated CSS file will be smaller and take up less space. The same is true for the @import of the Foundation source files.

The source files are located in the:

• /node_modules/bootstrap-sass/ folder for the Bootstrap framework
• /node_modules/zurb-foundation-5/ folder for the_Foundation_ framework

Due to their specific nature, SemanticUI source files cannot be imported in another CSS file.

Override variables of source files

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 in accordance with your design requirements.

You can find the Bootstrap breakpoint variables in the \node_modules\bootstra-sass\assets\stylesheets\bootstrap folder and more specifically, in the _variables.sass file. Breakpoint variables are easily located by searching for //== Media queries breakpoints. Each variable is defined with a !default tag. If you define a variable in your SASS files to have the same name as a Bootstrap framework variable, predefined by default, your new variable overrides the Bootstrap default variable value.

Upgrade frontend frameworks

The Bootstrap, Foundation, or SemanticUI are loaded as packages using the npm command in your command line. As a result, in the packages.json file, you can see a list of all installed npm packages. The .json_ file is located in the root of every Feather package folder. Once you open the package.json file of the Bootstrap package, you can see its version, for example: 3.3.1.

To upgrade to the latest version of Bootstrap once it is released, choose one of the following options:

• When you open the root folder of the package, run the npm update in your command line.
• Open the package.json file, change the package version manually and then run thenpm install command in the command line.

Upgrade the Feather package

To upgrade the Feather package, choose one of the following options:

• Via NuGet by installing the Telerik.Sitefinity.Feather or Telerik.Sitefinity.Feather.StandAlone package. For more information, see Sitefinity NuGet repository.
  NOTE: If you choose to upgrade via NuGet, you need to work in a separate folder (that is, not directly in Bootstrap, Foundation or SemanticUIfolders) because the upgrade process can overwrite your customizes. Make sure you create a backup of your custom templates.
• Via the GitHub repository. Feather is an open source project, meaning that you can see the code changes for every release and apply them manually. Whenever there is a new release, Feather publishes a What's new list on GitHub on the following address: https://github.com/Sitefinity/feather-packages/releases. In addition, you can see all commits in the Feather packages repository on the following address: https://github.com/Sitefinity/feather-packages/commits/master.