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:
- SCSS is compiled to CSS
- CSS is autoprefixed
- CSS is minified
- Resulting CSS files are placed in
/dist/css
Javascript
All JS files from the /src/js
folder are processed as follows:
- JS is concatenated into one
main.js
file - JS is minified
- 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 oneplugins.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}