kanakferdous/kanak_html_boilerplate

This is Kanak HTML BoilerPlate for start the project from figma to HTML/CSS. It's a awesome Boilerplate. It will help you to work with HTM structure.

Ferdous Boilerplate A boilerplate project for front-end development using Gulp, Sass, and SVG sprites.

Table of Contents

• Installation
• Usage
• Available Scripts
• Gulp Tasks
• Folder Structure
• Additional Notes
• License
• How To Use SVG Icons

Installation

Clone the repository and navigate into the project directory:

git clone https://github.com/kanakferdous/kanak_html_boilerplate.git
cd your-repo

Install dependencies using npm:

Node version should be 18.15.0 If you don't have it please run:

nvm install 18.15.0
nvm use 18.15.0
npm install

This will install all necessary packages defined in package.json, including Gulp and its plugins.

Usage

Development Mode

To start the development environment, run:

npm run watch

This command will compile Sass to CSS, minify JavaScript, generate SVG sprites, start a live-reloading server, and watch for changes in relevant files (scss, js, svg).

Production Build

For a production-ready build (minified and optimized files), run:

npm run build

This command will compile Sass, minify JavaScript, and generate SVG sprites without starting a live server or watching for changes.

Available Scripts

Runs the Gulp build task to compile assets for production.

npm run build

Runs the Gulp task to compile Sass files to CSS.

npm run style

Runs the Gulp task to minify JavaScript files.

npm run script

Runs the Gulp task to generate SVG sprites from icons.

npm run icons

Starts the development environment with live-reloading and watches for changes.

npm run watch

Gulp Tasks

gulpfile.js The Gulp tasks are defined in gulpfile.js. Here’s a breakdown of the main tasks:

• If Gulp SASS not working please run:

npm install gulp-sass --save-dev

• style: Compiles Sass to CSS, adds vendor prefixes, and minifies CSS.
• script: Minifies JavaScript files.
• generateIcons: Generates an SVG sprite from individual SVG icons.
• watch: Starts a live-reloading server and watches for changes in Sass, JavaScript, and SVG files.
• assets/: Contains development and compiled files.
• .gitignore: Specifies files and directories to ignore in version control.
• gulpfile.js: Defines Gulp tasks for compiling Sass, minifying JS, generating SVG sprites, and starting the live server.
• package.json: Lists dependencies and defines scripts for running Gulp tasks.

Additional Notes

Ensure live-server is globally installed

npm install -g live-server

for the live-reloading feature to work. Modify paths and configurations in gulpfile.js as per your project structure and requirements.

How To Use SVG Icons

this will generate the icons id with the name of icons. so try to use proper name that you can understand you are using icons.

<svg class="icon">
  <use xlink:href="assets/icons/sprite.svg#icon-name"></use>
</svg>

License

ISC License. See LICENSE for details.