---

📌 RECOMMENDED TO USE WITH X-PROJECT COMPONENTS 📌

---

About

X-Project - is starter template with basic tasks for development, which uses Gulp to compile SASS to CSS (with SCSS syntax), add vendor prefixes, group media queries, remove comments and minimise CSS, convert ES6 into ES5 using Babel, optimising images (with creating of webp versions and lazyloading), Browsersync for live-reload while development, favicon generator and project archiving. It includes the following libraries and frameworks (as a starting base):

• jQuery
• Bootstrap 5
• Swiper
• Select2
• Vanilla Lazyload
• Icomoon

A few words about the structure:

src/ - "source" files to build and develop the project. This is where the original source files are located, before being compiled into fewer files to dist/. dist/ - the compiled code ("distribution").

Our project follow SASS guidelines.

Also all HTML/PUG & CSS/SCSS & JS code is linted and formated by Prettier, Stylelint, ESLint, EditorConfig. And by Git pre-commit hooks you cannot commit the changes if the code doesn't pass linting-review.

How to use

1. You must have installed:

• Node.js
• Gulp

2. Download or clone X-Project from Github
3. Install Node Modules:

npm i

4. Run the project:

gulp

Gulp tasks

• gulp - starting default gulp task (build, server, watch) for development
• gulp build - build project
• gulp removeDist - delete dist folder
• gulp img - image compression
• gulp favicon - favicon generator
• gulp zip - project archiving

Additional options:

• --prod - minification js, minification css, add vendor prefixes, group media queries, remove comments, image compression
• --pug - using pug preprocessor to generate html