bourbon-neat-starter

Starter kit for new HTML projects featuring:

CSS

• Bourbon
• Neat 2.0
• Animate.css
• Normalize.css
• Css Hamburgers

JS

• jQuery
• svg4everybody
• Owl Carousel 2
• Waypoints

Quick start

• npm i installs all npm dependencies;
• bower i installs all bower dependencies.
• Running gulp will start the server and open page in Chrome.

Folder structure

• 📂 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

Basic rules and how it works

1. Use bower to manage all CSS dependencies, and npm for all JS dependencies. It may be subject to change in the future.
2. All work is going on indev folder where Gulp will generate some files and folders:
   • css folder with styles.css and styles.css.map;
   • index.html file compiled from html folder and other pages you placed there;
   • bundle.js, bundle.min.js, bundle.min.js.map files in js folder, compiled from scripts.js;
   • icons.svg and sprite.png files generated from corresponding img sub-folders;
3. 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 to dist by the build task itself will be deleted. That way you can keep working with files created afterwards in dist. Those folder and files are:
   • dist/css/styles.min.css;
   • dist/js/bundle.min.js;
   • dist/*.html;
   • dist/fonts;
   • dist/img;

Upcoming features task list

• 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