HTML Boilerplate

A basic HTML template, SASS & JS ready.

Installation

1) Update package.json infos

2) Packages

npm install

3) Reinit Git repository

rm -rf .git
git init
git add .
git commit -m "first commit"
git branch -M main

4) Use it!

gulp

Usually the server starts at : http://localhost:3001/

SVG sprites

Individual icon files are placed in the /icons/ folder. The name of each file, prefixed with icon-, sets the id of the associated <symbol>.

To generate the sprite (/img/icons-sprite.svg) :

gulp svg

Sprite's generation is included in the default task : adding a SVG file in the /icons/ folder leads to a brand new cadillac sprite.

svgstore : generate SVG sprites

GitHub Repository

The following options are set automatically based on file data:

• id attribute of the <symbol> element is set to the name of corresponding file
• result filename is the name of base directory of the first file.

If your workflow is different, please use gulp-rename to rename sources or result.

The only available option is:

• inlineSvg — output only <svg> element without <?xml ?> and DOCTYPE to use inline, default: false.

SVG Optimization with svgmin

• GitHub Repository

Note Relies on SVGO, which is globally installed.

Remove unnecessary fill attributes

Thanks to gulp-cheerio

Cheerio is an implementation of jQuery for the server, it makes it easy to remove SVG attributes :

$("[fill]").removeAttr("fill");

NB: It's also possible to replace the value of every fill attribute with currentColor. Thus the fill color of the path is controlled via CSS with the color property of the parent svg.

Links

Installed plugins :

• @mr-hope/gulp-sass (fully compatible with Dart Sass)
• gulp-rename
• gulp-autoprefixer
• gulp-sourcemaps
• browser-sync