/x-project

🚀 Starter kit for fast HTML / CSS / JS pages layout based on Gulp

Primary LanguageSCSS

Start HTML Template

📌 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, Browsersync for live-reload while development, simple favicon generator and project archiving. It includes the following libraries and frameworks (as a starting base):

  • jQuery
  • Bootstrap 5
  • Font Awesome 5
  • Icomoon
  • Tiny Slider 2
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 Husky you cannot commit the changes if the code doesn't pass linting-review.

How to use

  1. You must have installed:
  1. Download or clone X-Project from Github
  2. Install Node Modules:
npm i
  1. 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