Starter kit for new HTML projects featuring:
npm i
installs all npm dependencies;bower i
installs all bower dependencies.- Running
gulp
will start the server and open page in Chrome.
- 📂
dev
- working directory- 📂
fonts
- your fonts - 📂
html
- your html pages- 📁
templates
- your page partials
- 📁
- 📂
img
- images- 📁
icons
- your svg icons - 📁
sprite
- your png icons - 📁
content
- content images e.g avatars, post thumbnails, etc.
- 📁
- 📂
js
- javascript- 📁
modules
- your js modules
- 📁
- 📂
sass
- 📁
base
- the most generic styles - 📁
blocks
- modules or block specific styles - 📁
settings
- globally-available variables and configs - 📁
tools
- useful mixins and helper classes
- 📁
- 📂
- Use
bower
to manage all CSS dependencies, andnpm
for all JS dependencies. It may be subject to change in the future. - All work is going on in
dev
folder where Gulp will generate some files and folders:css
folder withstyles.css
andstyles.css.map
;index.html
file compiled fromhtml
folder and other pages you placed there;bundle.js
,bundle.min.js
,bundle.min.js.map
files injs
folder, compiled fromscripts.js
;icons.svg
andsprite.png
files generated from correspondingimg
sub-folders;
- When you run build task, gulp will gently clean up
dist
folder if it exists before running new build. This means only files and some folders written todist
by the build task itself will be deleted. That way you can keep working with files created afterwards indist
. Those folder and files are:dist/css/styles.min.css
;dist/js/bundle.min.js
;dist/*.html
;dist/fonts
;dist/img
;
- Add code style linters
- Setup full build process
- Add few more useful jQuery plugins such as Fancybox, Smooth Scroll etc
- Bring more useful classes and code snippets in project, expand classes with generic 'fit everywhere' styles