Beginners - How to use this template
- Extract and copy "docs" folder, this is the only one you'll need.
That's it! Now you can get started:
- open index.html in your browser to visit the homepage
- assets/css/theme.css - add/edit your custom CSS
- assets/js/theme.js - add/edit your custom JS
- assets/img - your images
Developers - How to use this template
The template is built with Sass and Gulp build system with these features:
- Handlebars HTML templates with Panini– Panini is a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON.
- Built-in BrowserSync server - Will automatically reload your page when files are changed. It also live-injects CSS changes when you save a Sass file. This task runs continuously. Defaults to localhost.
To use this template, your computer needs:
- Ruby https://rubyinstaller.org/
- Node.js (0.12 or greater) Node.js is used to run the build processes. https://nodejs.org/en/download/
node -vin the terminal
- Npm (Node comes with npm installed so you should have a version of npm.) Used to manage development dependencies.
npm -vin the terminal
- Sass http://sass-lang.com/install
sass -vin the terminal
- Gulp – task runner
npm install -g gulpTest: run
gulp -vin the terminal
** If you have all of the above installed, open a new terminal window or clear your current window and continue to template installation steps below.
- Clone this repo:
git clone https://github.com/wowthemesnet/template-pintereso-bootstrap-html.git
- Navigate into the repo directory:
- Install all node packages:
- Your site is now viewable at this URL: http://localhost:3000
- To create compressed, production-ready assets run
gulp build. This will delete everything in the dist folder and recreate all of your complied files. Never make updates directly into the dist folder as these files get overridden each time. Note: The dist folder is not kept in source control.
dist/: Compiled files. Note: Do not modify anything in this directory. Your changes will be overridden every time you run the build command.
src/Folder contains all of your core, working files—static assets, pages, templates, etc. These assets are compiled to a distribution folder. This is a completely static HTML site.
src/assets/Sass files, JS files, images, and fonts go here.
src/layouts/HTML layouts (templates).
package.jsonHandles the front-end dependencies.
SRC Folder Structure:
src/assets/scss/_bootstrap.scssBootstrap variables imports.
src/assets/scss/_custom.scssOverride Bootstrap variables.
src/assets/scss/app.scssThis is where you will import your custom component files. Note: Do not write any scss here – every bit of CSS needs a home, more than likely this will be in components. Anything commented out gets ignored and does not get complied.
src/assets/scss/theme.scssThis is where your custom style goes.