Feather: Work with framework packages

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. Another option is to duplicate the package folder of the framework and work there. If you choose the latter, you can affect the upgrade process later on. Make sure you follow the instructions in Upgrade the Feather package below.

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, perform the following:

1. Install NodeJS from 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 that you need to use, in the command line, type npm install .
4. To start monitoring for changes and to run all GruntJS tasks, type grunt.

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

The @import includes the whole Bootstrap framework and gives you flexibility in terms of customization. If you know which Bootstrap components you are going to use in your website, you can include only the 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.

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 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.

You load the Bootstrap as a package by 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. When 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, perform one of the following:

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

Upgrade the Feather package

You upgrade the Feather package in one of the following ways:

• Via NuGet
  You do this by installing Telerik.Sitefinity.Feather or Telerik.Sitefinity.Feather.StandAlone package.
  For more information, see Sitefinity CMS NuGet repository.
  

  NOTE: If you choose to upgrade via NuGet, you must work in a separate folder - not directly in the Bootstrap folder. This is because the upgrade process can overwrite your customizations. Make sure you create a backup of your custom templates.

• Via the GitHub repository
  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: https://github.com/Sitefinity/feather-packages/releases. In addition, you can see all commits in the Feather packages repository: https://github.com/Sitefinity/feather-packages/commits/master.