kenneth-starter-kit

A Gulp-powered starter kit that I use for my frontend web projects. It contains everything you need for a HTML/CSS/JS multi-page website. For SPAs, API driven apps, or complex JavaScript web apps, I would recommend a WebPack powered starter kit such as react-redux-starter-kit instead.

Installation

Works "out of the box". Installation is as easy as getting the files and typing gulp.

git clone https://github.com/kennethwang14/kenneth-starter-kit newproject
cd newproject
npm install
gulp
gulp build #production

Features

• This project started as a fork of Cory Simmons' Boy and contains its features. Note that various modifications have been made to tailor it to this starter kit
  • A lightweight/2-space batch of HTML5 Boilerplate features
    • default.html (HTML index layout with all the fluff removed)
    • .editorconfig
    • .htaccess
    • crossdomain.xml
  • Minified reeeset (opinionated Normalize.css for the real world)
  • Polyfills for IE8 and below a la ❤️ ie-love
    • Conditionally loaded so only IE8 and below users will have to download it (even though it's only 25kb uglified)
    • html5shiv (in the right place)
    • calc-polyfill
    • jQuery 1.x.x
    • Selectivizr 2
    • Respond.js
• CSS
  • Compiles Sass files into browser-readable CSS
  • Comes with many useful Sass mixins
    • Vertical rhythm
    • Responsive text
    • Font loading helper
    • Google's Material Design color palette
    • Material Design box-shadows / depth
    • Easy centering
    • CSS-only smart underline
    • Button presets
  • Autoprefixer
  • Minification using cssnano
  • Outputs into a single .css file to minimize number of requests
  • SourceMap support
  • Includes .stylelintrc configuration file for StyleLint. Gulp does not automatically lint; editor plugin is recommended instead.
• JS
  • Minification using UglifyJS
  • Concatenates into a single .js file to minimize number of requests
  • Converts from ES6 to ES5 using Babel
  • Comes with FontFaceObserver for a basic font loading strategy
  • SourceMap support
  • Includes .eslintrc configuration file for ESLint. Gulp does not automatically lint; editor plugin is recommended instead.
• HTML
  • HTML templating using MetalSmith. MetalSmith can be used in conjunction with any templating engine supported by consolidate.js. Currently set to Handlebars.
  • Layouts and partials
  • Minification
  • Inlined critical CSS for production
• BrowserSync for automatically refreshing pages, and synced browsers across all devices
• Image minification
• Comes with a stylized home and typography page for easy prototyping

File Structure

Source files are located in app. Build files are located in dist. All public HTML files are located in app/pages. Handlebars template files are in app/templates.

├── app
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── js
│   │   │   └── polyfill
│   │   └── scss
│   │       ├── base
│   │       ├── layout
│   │       ├── modules
│   │       └── pages
│   ├── pages
│   └── templates
│       ├── handlebar-helpers
│       ├── layouts
│       └── partials
└── dist

Sass Architecture

My opinionated Sass architecture, largely inspired by Hugo Giraudel's 7-1 Sass Boilerplate. My version aims for simplicity and comes with useful initial CSS styling.

License

MIT