An HTML and CSS boilerplate code with built-in Sass support

Get Started

Setup

Useful Commands

Project Structure

Bootstrap

Setup HOME

create a folder for your project

create README.md file

run on Terminal

npm init

(after the command above the package.json file will be created)

edit package.json file

4.1. add your project's name:

{
    "name": "[project name]",
    ...
    "author": "[your name]"
}

4.2. remove this line (inside "scripts"):

{
    ...
    "test": "echo \"Error: no test specified\" && exit 1"
    ...
}

on Linux

4.3. add these lines inside "scripts":

"scripts": {
    "start": "run-p watch watch:styles",
    "build": "run-s clean clean:styles build:styles copy",
    "deploy": "run-s build publish",
    "build:styles": "sass src/scss:src/styles",
    "watch": "live-server src",
    "watch:styles": "sass src/scss:src/styles --watch",
    "clean": "rm -rf dist",
    "clean:styles": "rm -rf src/styles",
    "copy": "mkdir dist && rsync -avr --exclude=\"/scss\" src/ dist",
    "publish": "gh-pages -d dist"
},

4.4. add these lines below ""license": "ISC"":

"devDependencies": {
    "gh-pages": "^2.1.1",
    "live-server": "^1.2.1",
    "npm-run-all": "^4.1.5",
    "sass": "^1.23.0-module.beta.1"
}

package.json

{
  "name": "template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "run-p watch watch:styles",
    "build": "run-s clean clean:styles build:styles copy",
    "deploy": "run-s build publish",
    "build:styles": "sass src/scss:src/styles",
    "watch": "live-server src",
    "watch:styles": "sass src/scss:src/styles --watch",
    "clean": "rm -rf dist",
    "clean:styles": "rm -rf src/styles",
    "copy": "mkdir dist && rsync -avr --exclude=\"/scss\" src/ dist",
    "publish": "gh-pages -d dist"
  },
  "author": "Marcelo Soares Peralta",
  "license": "ISC",
  "devDependencies": {
    "gh-pages": "^2.1.1",
    "live-server": "^1.2.1",
    "npm-run-all": "^4.1.5",
    "sass": "^1.23.0-module.beta.1"
  }
}

on Windows

4.3.1. add these lines inside "scripts":

"scripts": {
    "start": "run-p watch watch:styles",
    "build": "run-s clean clean:styles build:styles copy",
    "deploy": "run-s build publish",
    "build:styles": "sass src/scss:src/styles",
    "watch": "live-server src",
    "watch:styles": "sass src/scss:src/styles --watch",
    "clean": "del-cli dist",
    "clean:styles": "del-cli src/styles",
    "copy": "mkdir dist && xcopy src dist /e /exclude:excludelist.txt",
    "publish": "gh-pages -d dist"
},

excludelist.txt

4.4. add these lines below ""license": "ISC"":

"devDependencies": {
    "gh-pages": "^2.1.1",
    "live-server": "^1.2.1",
    "npm-run-all": "^4.1.5",
    "sass": "^1.23.0-module.beta.1",
    "del-cli": "0.2.1"
}

package.json

{
  "name": "template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "run-p watch watch:styles",
    "build": "run-s clean clean:styles build:styles copy",
    "deploy": "run-s build publish",
    "build:styles": "sass src/scss:src/styles",
    "watch": "live-server src",
    "watch:styles": "sass src/scss:src/styles --watch",
    "clean": "del-cli dist",
    "clean:styles": "del-cli src/styles",
    "copy": "mkdir dist && xcopy src dist /e /exclude:excludelist.txt",
    "publish": "gh-pages -d dist"
  },
  "author": "Marcelo Soares Peralta",
  "license": "ISC",
  "devDependencies": {
    "gh-pages": "^2.1.1",
    "live-server": "^1.2.1",
    "npm-run-all": "^4.1.5",
    "sass": "^1.23.0-module.beta.1",
    "del-cli": "0.2.1"
  }
}

create .gitignore file and skip this folders

dist/

node_modules

src/styles

create a src folder

create the folders below inside src folder

img

scripts

scss

create a index.html inside src folder

edit the index.html file (./src/index.html) to add your project's name
```
...
<head>
  ...
  <title>[project name]</title>
</head>
...
```

create a style.scss inside scss folder

start a new git repository and make an initial commit. this will make sure that you can work on your project with git

git init
git add .
git commit -m "Initial commit"
git push

or (some git versions)

git init
git add . && git commit -m "Initial commit" && git push

install the package.json dependencies

npm install

Useful Commands HOME

Development

Run live-server and Sass in watch mode and start coding!

npm start

Production

Transpile Sass and copy relevant files from src to dist to prepare your website for deployment.

npm run build

Deploy to GitHub Pages

Deploy your code to Github Pages: this script creates a gh-pages branch and publishes the dist folder.

For this to work, make sure you already have a remote repository on GitHub.

npm run deploy

Project Structure HOME

Any project created with this boilerplate will follow the structure below:

Project
|   README.md
|   package.json
|   package-lock.json
└───src
|   |   index.html
|   └───styles
|   └───scss
|   |   └───style.scss
|   └───scripts
|   └───img
└───dist

README.md

The README.md should contain a brief description of your project. Feel free to delete this guide or rename it to add your own description.

package.json & package-lock.json

These files contain various information about you, your project and the project dependencies, as well as useful scripts to help you with the development process.
Please do not edit these files for the time being, except where you are asked to.

src & index.html

The src folder contains any file you would want to add to your website before any processing is done to it. This is the main folder you will be working in.

index.html is the main page for your website which you will be working on. Feel free to add any new html pages you create directly in the src folder.

scripts

The scripts folder will contain any js files you will add to your website. Eventually index.js is the main script file of your project.
Feel free to use this file to add any JavaScript that you want to experiment with.

scss & style.scss

The scss folder will contain any scss or css files (depending on your preference). In order to include additional styles in your project, you must import them to style.scss.

style.scss is your style entry point. Any other scss or css imported to this file can be used, and any styles written directly to this file will be applied.

img & fonts

For the sake of organization and good project structure practices, please use these folders in order to keep your images and fonts respectively.

dist

The dist folder will be automatically generated whenever your run the build script: