Front End Slicing Starter (LESS or SASS)
This is to get you up and running with Bootstrap 4 and compiling SCSS with live-reload in a matter of seconds.
Includes out-of-the-box:
- Automatically compile
SASS
- Vendor prefix your CSS for maximum browser support
- Auto-minify that CSS
- Auto-minify JavaScript
- Build a local webserver with live-reload to test on in seconds
- Bootstrap 4
- NEW: jumpstart-bootstrap git bash script to automate literally everything for you. Read more below.
Recommended way of installing
Run the jumpstart-bootstrap.sh script. The installer will ask you to name your project. It will then proceed to clone the repo to the current directory with the name you gave it, compile, and start a local webserver with live-reload.
Requirements you'll need before running script
Step 1: Node.JS (easy install)
Install Node.js Node.js is installed (use installer). Skip this is you already have Node on your computer.
Step 2: Install gulp
Just open the terminal and run:
npm install gulp-cli -g
npm install gulp -D
Step 3: Install Browser Sync
npm install -g browser-sync
That's it! Hopefully you already had some of these installed. It shouldn't hurt to re-run any of these if you already installed them.
How to install manually
Clone the Repo
git clone git@github.com:derekbtw/bootstrap-4-jumpstart.git my-project
cd my-project
Note: If you are unsure how to use git
, just skip this and download it manually. Same thing.
How do I turn it on?
You'll need to do this on your first run. This just brings in all the stuff the gulpfile will do for you automatically.
npm install
After that, just activate it with:
gulp
A web server will pop-up. Now, everything inside of the LESS and SASS folders will be automatically compiled to your css files!
How-To Summarized
git clone git@github.com:derekbtw/bootstrap-4-jumpstart.git my-project
cd my-project
npm install
gulp
Debugging
Make sure you have everything installed. If it's still not working, run:
npm cache clean
npm install --save-dev
npm update --save-dev
gulp
Quick Tips
When gulp
is running:
- Any changes to
scss/
will be compiled toCSS/
- Note: You must pick one or the other. They are both provided out-of-the-box.
- Any changes or new files added to
js/plugins
will be compiled tojs/plugins.js
andjs/plugins.min.js
- Any changes or new files added to
js/scripts
will be compiled tojs/scripts.min.js
andjs/scripts.js
License
MIT