FFront ⏩

Performant, opinionated, but friendly front-end toolset.

Start with a lightning fast build and import or @include if you need a feature. scss and js utilities are modular, well documented, and toggleable in src/js/utils.js, or src/scss/app.scss.

Designed for working mobile first and keeping a small footprint. Babel transpiles ES6 out of the box. Comes with Sass, Handlebars, and a minimalist's Foundation Sites. There's a gesture library for working with touch, and dead code removal/minification.

For testing, includes Jest and a starter suite. While you work, tests run on every save, checking only changed files. yarn test uses random mocks to find edge cases and gives more detail, including code coverage.

Last, there's a Travis CI config for easy continuous integration.

What's In the Box

Core: Gulp 4, Webpack, Babel, BrowserSync, Handlebars, Foundation 6

Code Style & TDD: Prettier, Jest, Jasmine Check

Utilities: ffjs, Axios, Zingtouch, Lodash, Date-fns, Rellax, Scroll Reveal, Prism, Clipboard

Layout Mode: Exposes breakpoints & the box model as you work.

Foundation Examples: To show what's possible, there are examples for all basic usage.

Code Rendering: Easily show snippets with syntax highlighting and 'copy to clipboard' functionality.

Installation

Requires Node, npm, and yarn. Then, set up is one line:

git clone [email protected]:jordanblakey/ffront.git; cd ffront; yarn

Usage

FFront has only three commands:

yarn start # Start the development server (fast)
yarn build # Build for production and run the server (accurate)
yarn test #  Run in-depth tests with coverage

Happy hacking ⏩