html/ folder you'll find all of the html templates in the
assets/img/ holds all of the images and SVG's. Inside this folder there are other folders such as
/assets/img/blog which hold images based on the name of the folder.
gulp build these images will be moved to the
dist/assets/img folder and they will be optimized. Check out our Gulp section if you
want to disable this feature.
assets/js/ folder you'll find two important files. One of the is
jQuery included as well.
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
scss/leaf holds the variables, mixins and custom components developed by Themesberg for Pixel.
leaf/mixins is where you can find the custom mixins developed by us similar to the ones from Bootstrap 4.
leaf/utilities has styles for custom helper classes for spacings, borders, shadows and many more.
leaf/vendor is the folder that holds styles for the external libraries we use for Pixel. 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 Pixel.
leaf.scss is where all the other
scss files are imported. This file is later used in
gulpfile.js to compile the code in
node_modules/ folder contains external libraries based on the dependencies provided in
gulpfile.js is where you'll find the Gulp functions that generate, compile and serve our code.
index.html is the main
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
dist if you have a git instance.
These folders are generated by using Gulp commands. Check them out here.
dist/ folder will be generated when running the
gulp build:dist command. You'll find
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/ 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.
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/ folder is generated by
gulp as it holds the compiled
scss files. These files are automatically included by our
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
leaf.css file by writing simple CSS.
Warning: if you write your own CSS in the
leaf.css file and run
gulp it will override your file based on what the
scss files hold.