This is a starter workflow for building vanilla JavaScript applications using Sass.
It includes all the necessary scripts to develop and deploy an application on Github Pages.
The boilerplate uses SASS and follow the 7-1 architecture pattern and sticking to Sass Guidelines writing conventions.
Each folder of this project has its own README.md
file to explain the purpose and add extra information. Be sure to browse the repository to see how it works.
1 - Installing all the necessary dependencies
The following dependencies will be installed.
- Automatic Sass transpilation
- Development server powered by live-server with automatic reload
- Deployments to github pages with gh-pages
- Prefixier CSS using Autoprefixier
npm install
Run live-server and sass in watch mode and start coding!
npm start
Remove dist folder
npm run clean
Transpile sass, add CSS prefixs and copy relevant files from src to dist to prepare your website for deployment.
npm run build
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
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.
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.
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.
The scss
folder already contain a sample project using the 7-1 architecture pattern. In order to include additional styles in your project, you must import them to main.scss
.
main.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.
For the sake of organization and good project structure practices, please use these folders in order to keep your images and fonts respectively.
The dist
folder will be automatically generated whenever your run the build script:
npm run build
This folder will contain your built project, ready to be deployed online. It is excluded from git
tracking since it is not customary to include compiled code in a development project.