An HTML CSS boilerplate with built-in sass support:
- Automatic Sass transpilation
- Development server powered by live-server with automatic reload
- Deployments to github pages with gh-pages
- Out of the box bootstrap css support
To learn more about how to add bootstrap javascript features (for modals and image galleries) see the following link: https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
-
Clone this repository into a new project folder (replace
[project name]with your project's name)git clone git@github.com:DigitalCareerInstitute/dci-boilerplate-I.git [project name] -
Delete the boilerplate's git history to ensure that the project history only includes your commits
cd <project name> rm -rf .git -
Edit
package.jsonto add you project's namepackage.json{ "name": "[project name]", ... "author": "[your name]" } -
Edit
src/index.htmlto add your projects name... <head> ... <title>[project name]</title> </head> ...
-
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" -
Install the dependencies
npm install -
Have fun coding :D
Run live-server and sass in watch mode and start coding!
npm start
Transpile sass 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
Any project created with this boilerplate will follow the structure below:
Project
│ README.md
│ package.json
| package-lock.json
└───src
│ │ index.html
│ └───styles
| └───scss
| | └───main.scss
│ └───scripts
│ | └───index.js
| └───images
| └───fonts
└───dist
The README should contain a brief description of your project, feel free to delete this guide or rename it to add your own description.
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're asked to. In the future, you will learn more about project dependencies.
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. 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. You will learn more about JavaScript in the browser in the future.
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 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 buildThis 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.
Boilerplate created by Itamar Givon (@itamargiv)
Edited by Fran Borg (@FranBte)