Boilerplate

Template Boilerplate for building UI designs with Pug and Sass.

Requirements

Make sure Node JS, NPM and Gulp are already installed on your computer.

Install

• Clone and cd into the project directory
• Execute npm install to download dependencies

Run

• Execute npm start or gulp serve.

Build

• Execute gulp build.

Watch and Build

• Execute gulp serve to watch for changes and build whenever files are modified

Folders

+ dist
+ css : This folder contains prebuild files, app.css (main styles) and page-specific styles
+ fonts : Put your font files here, also do not forget to import it in _variables.scss.
+ icons : Put your icon files here.
+ images : Put your image files here.
+ js : This folder contains prebuild scripts, and page-specific scripts.
+ src
+ js
- app.js : Put your js code here.
+ html
+ components
- mixin.pug : Mixin pug file. Includes all component mixins + layouts
- index.pug : Index pug file. Defines the layout
- base.pug : Base pug file. Contains links to external stylesheets, scripts, SEO metas.
+ pages
- index.pug : Index page pug file.
+ partials
- footer.pug : Footer pug file.
+ scss
+ base : Contains resets and sensible defaults for basic html elements.
+ components : Stand-alone reusable components with their modifiers and variations.
+ helpers : Stand-alone helper classes for small layout issues.
+ settings : Settings for colors, breakpoints, typography, etc.
+ vendor : Imported and customized CSS from 3rd party components like fancybox, select2 etc.
- app.scss : Import all scss files. (main file)

Gulp Plugins

• gulp-uglify : Minify your JS.
• gulp-sass : Compile your Sass into CSS.
• gulp-concat : Combines and rename files.
• gulp-pug : Gulp plugin for compiling Pug templates, compile Pug into HTML.
• live-server : Development server with live reload capability.