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 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';

Layout Mode screenshot

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