Workflow

Use Identity by modifying the source code, or simply by using the predefined style and addding your own content.

Source directory

The source directory is the /src folder. All your assets such as SCSS, CSS, Javascript, HTML and images go in there. Files such as JSON, fonts or PSD/AI files may also go in there. Gulp will selectively process and synchronize the contents of the /src folder to the distribution directory. For example, PSD files will not be ignored.

Distribution directory

Files that are ready for distribution end up in the /dist folder. Here you will find the exact same directory and file structure as in your source directory, but the files will have been processed. All CSS and JS files will be compiled, minified and concatenated into one file and files that are not needed in distribution such as SCSS and PSD files are filtered out.

Processing

Gulp processes the files in your source directory according to the configuration in Gulpfile.js. Here, various processing pipelines are defined that take files from a source directory, apply various functions to them and spit them out in the distribution directory. You can easily modify the Gulpfile yourself to change the workflow to your needs.

CSS

All CSS and SCSS files from the /src/css folder are processed as follows:

1. SCSS is compiled to CSS
2. CSS is autoprefixed
3. CSS is minified
4. Resulting CSS files are placed in /dist/css

Javascript

All JS files from the /src/js folder are processed as follows:

1. JS is concatenated into one main.js file
2. JS is minified
3. Resulting main.js file is placed in /dist/js

Plugins & libraries

The /src directory contains two folders that are separated from the standard processing pipeline. These folders are the lib and plugins folder.

• The lib folder contains libraries such as jQuery and Popper.js. They are simply copied to /dist/lib and are not concatenated with other JavaScript files, giving you more control over these libraries.
• The plugins folder contains sub-folders for each JavaScript plugin, such as Font Awesome. These folders may contain both a JavaScript file as well as a CSS file. All JavaScript plugin files are concatenated and minified into one plugins.js file, which ends up in /dist/js. Each plugin CSS file has to be manually imported in the source of the stylesheet in order to include them in /dist/css/solid.css. For more information on controlling plugins, check the plugins page.

Other files

Other files that are part of your website may also be placed in the source directory. They will be copied to the distribution directory if they are added to the configuration in the Gulpfile. For example, font and HTML files will be copied to the distribution directory, keeping the folder or path structure they had in the source directory. The following files are excluded in this copy:

• src/css/**/*.*
• src/js/**/*.*
• src/**/*.{psd}