It has a Gulp-powered build system with these features:
- Handlebars HTML templates with Panini
- Sass compilation and autoprefixing
- JavaScript module bundling with webpack
- Built-in BrowserSync server
- For production builds:
- CSS compression
- JavaScript module bundling with webpack
- Image compression
To use this template, your computer needs:
- Download or clone the template.
git clone git@github.com:rafibomb/gulp-sass-handlebars-template.git your_project_name-
If you cloned, return (skip this step) :) Else if you downloaded, unzip and rename the file to your project name.
-
Then open the folder in your command line, and install the needed dependencies:
cd your_project_name
yarn- Run
yarn startto run Gulp. Your compiled site will be created in a folder calleddist, viewable at this URL:
http://localhost:8000
You're ready to go!
To create compressed, production-ready assets, run yarn run build.
We are using SVG injector to allow SVG's to be manipulated with CSS from a simple <img> tag. Pretty neat!
Usage
Add the inject-svg attribute to any img where you'd need to manipulate with CSS.
<img inject-svg src="{{root}}assets/img/icons/test-icon.svg" alt="test icon">
This will apply the .injected-svg class to the SVG. Any class you add to the img tag will be applied to the SVG.
Usage
Add data-aos along with an animation name to an element. Delay is set in ms.
<div data-aos="fade-up" data-aos-delay="50"></div>