Fronter

Front-end starter kit.

Quick-Start Guide

• Installation
• Development Workflow
• Builders
• Servers
• Scripts
• Styles
• Templates
• Images
• Linters

Installation

1. Clone this repo:

git clone git@github.com:lanceguyatt/fronter.git my-app
cd my-app

2. Make it your own

rm -rf .git && git init && npm init

This re-initializes the repo and sets up your NPM project.

3. Install the dependencies:

Install via yarn

yarn

Or via npm

npm install

You're done installing! Now let's get started developing.

Development Workflow

4. Start a browser-sync development server

gulp

Browser sync

5. Generate a production build in ./build:

gulp build

Build

6. Start local production server with serve:

npm start

Serve

---

Builders

• gulp The streaming build system
• webpack A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

---

Servers

• gulp-nodemon gulp + nodemon + convenience
• browser-sync Keep multiple browsers & devices in sync when building websites
• serve Static file serving and directory listing

---

Scripts

• babel-core Babel compiler core
• babel-loader Webpack plugin for Babel
• babel-preset-env Autoprefixer for Babel: compile less
• svg4everybody Use external SVG spritemaps today

---

Styles

• autoprefixer Parse CSS and add vendor prefixes to rules by Can I Use
• css-mqpacker A tool for packing same CSS media query rules into one with PostCSS
• lost LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS
• postcss Transforming styles with JS plugins
• postcss-import PostCSS plugin to inline @import rules content
• postcss-nested PostCSS plugin to unwrap nested rules like how Sass does it.
• postcss-short Use advanced shorthand properties in CSS
• postcss-mixins PostCSS plugin for mixins
• postcss-simple-vars PostCSS plugin for Sass-like variables
• postcss-custom-media PostCSS plugin to transform W3C CSS Custom Media Queries to more compatible CSS
• postcss-custom-selectors PostCSS Custom Selectors
• postcss-calc PostCSS plugin to reduce calc()
• postcss-custom-properties PostCSS plugin to transform W3C CSS Custom Properties for cascading variables
• postcss-color-function PostCSS plugin to transform W3C CSS color function to more compatible CSS
• gulp-postcss Pipe CSS through PostCSS processors with a single parse

---

Templates

• pug Pug – robust, elegant, feature rich template engine for Node.js
• gulp-pug Gulp plugin for compiling Pug templates
• jstransformer-markdown-it Markdown-It support for JSTransformers.

---

Images

• gulp-svgmin Minify SVG files with gulp.
• gulp-svgstore Combine svg files into one with elements

---

Linters

• eslint The pluggable linting utility for JavaScript and JSX

• eslint-plugin-import ESLint plugin with rules that help validate proper imports

• https://github.com/prettier/eslint-config-prettier

• [gulp-htmlhint] htmlhint wrapper for gulp to validate your HTML

• [gulp-stylelint] Gulp plugin for running Stylelint results through various reporters

• [stylelint] A mighty, modern CSS linter

• [stylelint-config-standard] The standard shareable config for stylelint

https://github.com/prettier/eslint-config-prettier [gulp-htmlhint]: https://github.com/bezoerb/gulp-htmlhint [gulp-stylelint]: https://github.com/olegskl/gulp-stylelint [stylelint]: https://github.com/stylelint/stylelint [stylelint-config-standard]: https://github.com/stylelint/stylelint-config-standard

---

Formatters

• prettier Prettier is an opinionated code formatter.

---

Utils

• gulp-changed Only pass through changed files
• gulp-cli CLI for gulp
• gulp-rename Rename files easily
• gulp-size Display the size of your project
• gulp-util Utilities for gulp plugins

---

License

MIT © Lance Guyatt