File structure

Learn more about the file structure of Impact Design System

Front

The front/ folder is where you will find all the source files, images, javascript files and pages that are the presentational pages for your business.

Dashboard

The dashboard/ folder is where you will find all the source files, images, javascript files and pages that are the dashboard application part for your business.

Each of these main folders, namely front/ and dashboard/ will have the following subfolders:

Source files

The following folders and files are considered as “source” files as these are which you are supposed to work with when developing. These folders are identical in both the front/ and dashboard/ folders.

Pages

In the pages/ folder you’ll find all of the html templates.

Partials

Files in partials/ are included in other html files with the help of gulp-file-include. Such files are _footer.html, _head.html and so on.

Please check the official gulp-file-include documentation to learn how to use these partials.

Assets

All assets such as CSS, JS, images and fonts can be found in the assets/ folder.

Sass

scss/ is one of the most important files in our product. Here you’ll find two folders and one important file:

scss/bootstrap is the scss code from Bootstrap 4. As our product is an extension of the Bootstrap 4 components, we made use of the variables and mixins provided by them.
scss/front holds the variables, mixins and custom components for Impact.
- front/mixins is where you can find the custom mixins developed by us similar to the ones from Bootstrap 4.
- front/utilities has styles for custom helper classes for spacings, borders, shadows and many more.
- front/vendor is the folder that holds styles for the external libraries we use for Impact. We use them here so that there will be only one minified css file. This way the files will load faster.
- *.scss The remaining files are the styles used for each component from Impact.
front.scss is where all the other scss files are imported. This file is later used in gulpfile.js to compile the code in CSS.

Other files

gulpfile.js is where you’ll find the Gulp functions that generate, compile and serve our code.
index.html is the main html template.
package.json holds the theme dependencies.
README.md can never miss from a project. Here you can find basic information regarding the software we’ve developed.
.gitignore is used to ignore folders such as node_modules or dist if you have a git instance.

Generated files

These folders and files are generated by using based on our gulp commands and npm install.

dist

The dist/ folder will be generated when running the gulp build:dist command. You’ll find html, js and css code in a minified state. Ideally you shouldn’t modify the content of these files, as they are supposed to be the generated code that you’ll use to go live.

html&css

The html&css/ folder can be generated by running gulp build:dev. This folder will have all the necessary files, unminified files of the project. We recommend to use this folder if you want a copy of the theme without Sass, Gulp or npm.

.temp

You might be wondering what the .temp/ folder is all about. Long story short you don’t have to worry about it, as you shouldn’t modify files from there. It is dynamically generated by Gulp to serve the files to a local server through BrowserSync and show you how the product will look when it will finally get generated for production.

CSS

The css/ folder is generated by gulp as it holds the compiled scss files. These files are automatically included by our html templates.

We recommend you to use scss as it is a powerful language where you can change variables to update colors, shadows, font families to your liking. If you choose otherwise, you can modify the main front.css file by writing simple CSS.

Warning: if you write your own CSS in the front.css file and run gulp it will override your file based on what the scss files hold.

Node modules

The node_modules/ folder contains external libraries generated based on package.json.