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:
If you want to concatenate and unite js files into one file:
As a result, after you run grunt, all js files listed in the jsfiles.json file, are processed and output to the assets/dist/js/project.min.js folder.
Feather supports the Bootstrap 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 following folder /node_modules/bootstrap-sass/
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
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:
You upgrade the Feather package in one of the following ways:
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.
Back To Top