Pug-Sass Boilerplate Starter Kit

Pug-Sass Boilerplate Starter Kit is a Front-end web kit and boilerplate for building web apps or sites using Pug(Jade) and Sass

Inspiration

This project is based on a simple workflow for small apps and personal sites. It gives a solid starting point for newcomers who wants a ready-to-deploy local environment setup. The sources used to build this project includes:

• H5BP Project
• React Redux Starter Kit
• Mark Goodyear's Blog
• Web Starter Kit
• Material Design Palette
• Flat UI Colors

Features

• Pug-Sass ready.
• Easy to deploy your production files
• Performance optimization: minify and concatenate JavaScript, CSS, HTML and images
• Live browser reloading with BrowserSync
• Includes:
  • Normalize.css for CSS normalizations and common bug fixes
  • jQuery via Bower installation
  • Bootstrap via Bower installation
  • html5shiv via CDN
  • Respond via CDN
  • gulpfile.js with Gulp presets
  • Sass variables with with popular color palettes

Requirements

• Node.js
• npm
• Gulp
• Bower

Getting Started

After Node.js, npm, Gulp and Bower installation, you can create a new project based on pug-sass-boilerplate-starter-kit by doing the following:

Install From Source

First, clone the project:

$ git clone https://github.com/Errec/pug-sass-boilerplate-starter-kit.git <my-project-name>

Install dependencies

$ npm install

Finally install Bowerdependencies

$ bower install

Running Your Local Server With Gulp

After the installation of all requirements and its dependencies, your local web development environment is ready to run. First run gulp's default task to create your build/ directory: on <my-project-name>:

$ gulp

Now run your local server using the watch task

$ gulp watch

This task will open the browser window with the URL http://localhost:3000/. Any changes made to the project files, will reload automatically the browser.

Project Structure

The structure presented in this boilerplate is grouped primarily by folder content and file type. Please note that this structure is only meant to serve as a guide, it is by no means prescriptive.

.
├── build/                      # Store processed/minified files - your project's deployable output
├── img/                        # Main folder for image files
├── js/                         # Main folder for JS files
│   ├── vendor/                 # Store third part library files (e.g.: jquery, bootstrap)
│   └── main.js                 # Index JS code goes here
├── styles/                     # Main folder for cascade style files
│   ├── modules/                # Store third party modules and initializers (e.g.: normalize, reset)
│   ├── variables/              # Store sass variables files
│   └── main.scss               # Index Sass goes here
├── templates/                  # Main folder for jade template files
│   └── index.pug               # Index pug markup goes here
├── .bowerrc                    # Change bower library destination path from its default
└── gulpfile.js                 # Setup Gulp tasks

The build/ Contents

.
├── build/
    ├── img/                    # Contains the compressed and optimized image files
    ├── css/                    # Contains the concatenated/minimized .css files and .map files
    └── js/                     # Contains the concatenated/uglyfied .js files and .map files
        └── vendor/             # Store third part library non code files (e.g.: fonts)