--- layout: default title: FFront ⏩ --- {{> header}}

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 generative tests to find edge cases and give 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: Axios, Zingtouch, Lodash, Date-fns, Rellax, Scrollreveal, Prism, Clipboard, WhatInput

## 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 ⏩

### ffjs

Lightweight, modular utility functions for arrays, browser, dates, strings, math, and more.
Read the docs.

### Layout Mode

FFront's layout mode exposes breakpoints & the box model as you work.
To try it, go to `src/assets/scss/app.scss` and uncomment:
`// @import './components/_layout_mode.scss';`

## Foundation Examples

Foundation 6 For Sites is included for quick layout.
To see what's possible, take a look at these examples:
Grid | Forms | Type | Containers | Navigation | Buttons | Badges, Labels, & Progress | Icons | Visibility

### Code Rendering

Displaying code with syntax highlighting and 'copy to clipboard' functionality is a breeze. Prism.js and Clipboard.js are included with reasonable defaults:

              <pre><code class="language-js">
              test('2 + 2 is 4', () => expect(2 + 2).toBe(4))
              </code></pre>

### See What's Possible

- Easily display images in a beautiful masonry style photo grid.
- Show event progress unobtrusively with Nanobar.
- Create engaging illusions of depth with Rellax.
- Detect gestures on mobile devices with ZingTouch.
- Animate elements as they enter the vewport with Scrollreveal.