https://github.com/rafibomb/gulp-sass-handlebars-template
Build your project with this powerful started template. Part Static Site Generator, part build system.
https://github.com/rafibomb/gulp-sass-handlebars-template
autoprefixer browsersync gulp handlebars livereload mixins panini reset sass scss svg-injector webpack
Last synced: 2 months ago
JSON representation
Build your project with this powerful started template. Part Static Site Generator, part build system.
- Host: GitHub
- URL: https://github.com/rafibomb/gulp-sass-handlebars-template
- Owner: rafibomb
- Created: 2020-05-08T15:32:38.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-30T18:47:29.000Z (over 3 years ago)
- Last Synced: 2025-01-09T17:49:09.625Z (over 1 year ago)
- Topics: autoprefixer, browsersync, gulp, handlebars, livereload, mixins, panini, reset, sass, scss, svg-injector, webpack
- Language: SCSS
- Homepage:
- Size: 16.3 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Project Starter Template
[](https://david-dm.org/zurb/foundation-zurb-template#info=devDependencies)
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
## Installation
To use this template, your computer needs:
- [NodeJS](https://nodejs.org/en/) (Version 12 recommended, tested with 12.16.3)
- [Git](https://git-scm.com/)
1. **Download or clone the template.**
```bash
git clone git@github.com:rafibomb/gulp-sass-handlebars-template.git your_project_name
```
2. If you cloned, return (skip this step) :) Else if you downloaded, unzip and rename the file to your project name.
3. Then open the folder in your command line, and install the needed dependencies:
```bash
cd your_project_name
yarn
```
4. Run `yarn start` to run Gulp. Your compiled site will be created in a folder called `dist`, viewable at this URL:
```
http://localhost:8000
```
You're ready to go!
---
To create compressed, production-ready assets, run `yarn run build`.
## Dev Dependencies
#### SVG injector
[npm](https://www.npmjs.com/package/svg-injector)
We are using SVG injector to allow SVG's to be manipulated with CSS from a simple `![]()
` tag. Pretty neat!
**Usage**
Add the `inject-svg` attribute to any `img` where you'd need to manipulate with CSS.
`
`
This will apply the `.injected-svg` class to the SVG. Any class you add to the img tag will be applied to the SVG.
---
#### AOS (Animate on Scroll)
[Website](https://michalsnik.github.io/aos/)
**Usage**
Add `data-aos` along with an animation name to an element. Delay is set in ms.
`
`
# muonspace