Locate gulpfile.js in /gulp/ and run npm install --save-dev
then gulp
.
Update December 14th, 2018:
* Updated Bootstrap base to v4.1.3
* Rewritten script for Gulp v4 compatibility
* More polished script and useful features
This kit contains the latest version of Bootstrap and gulpfile.js with SCSS compiler, PostCSS support, auto-reloading browser, auto-prefix for cross-platform and device compatibility, and combining CSS files to a singular minified CSS file.
This repo is for front-end developers, the base kit for them to build on, and use it so they can start a new project right away without setting up the same thing all over again and save valuable time.
- index.html minimal boilerplate
- Bootstrap framework
- Gulp scripts, configured in
/gulp/gulpfile.js
Note: It is not required to use gulp, but I recommend you to. Learn how to run gulp for this kit within 5 minutes or learn more in more detailed Gulp tutorial fot Windows user.
I also made a tutorial for a development workflow on Windows, useful for anybody who want to discover more development software on Windows.
- BrowserSync — a live view for your site under development, refreshes automatically on a file change.
- Starts a local server, put the site live and provide a working URL for any devices on the local network to open.
- Automatically refresh a site as soon as a watched file got modified on save for an instant live view on all devices.
- SASS/SCSS compiler — automatically compiles SCSS to CSS on *.scss file save.
- PostCSS — PostCSS support.
- Concat — combining multiple CSS files to single CSS file.
- Minifier — minifies CSS file to .min.css.
- Plumber — prevents gulp crash on SCSS error and various other reasons.
- Notify — tray notification when you get an error from SCSS compiler.
- Autoprefixer — generates new CSS for support for the cross-platform browser, and device supports.
- CSS Sourcemaps — generates source maps for CSS debugging
Note: This kit uses SCSS, but the included gulp scripts like SASS/SCSS compiler work just as well for SASS files. However, it may require a minor modification in gulpfile.js since I haven't tested it.
I use this repo personally, so I'll be maintaining this repo.
Feel free to fork and make your starter kit; if you want, let me know what you created!
Contributing this repo is encouraged. You also can modify this README for contribution purposes, and your efforts will get recognized and highly appreciated your effort.
To request a new version and feature or report a bug, please open an issue.
When you clone this repository, you may remove these files since they're unnecessary in the working stage.
LICENSE
README.md
gulp/gulpfile.js
gulp/package.json
assets/css/bootstrap.min.css
assets/js/vendors/jquery-3.3.1.slim.min.js
assets/js/vendors/bootstrap.bundle.min.js
(the bundle is a bootstrap.js with popper.js inbuilt and majority of Bootstrap JS effects require popper.js (for modal, dropdown, popover, etc)index.html
Non-existing git folder due to empty content and the guideline:
-
assets/scss/main.scss
will generate the minified CSSassets/css/main.min.css
on *.scss modifications and file saves, as per to gulpfile.js rules. -
Images belong to
assets/img/**/*
(orimages
if you prefer)- Inner subdirectories for images, i.e.
assets/img/icons/*,
apply your preferences for organizing images.
- Inner subdirectories for images, i.e.
-
Fonts belong to
assets/fonts/**/*
. -
Custom JS belong to
assets/js/*
-
vendors
folder is for libraries and other JS/CSS files that are not your own. -
Any other materials, that doesn't belong in other folder go in
assets/**/*,
name them by your preferences.