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.
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
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 ⏩
Lightweight, modular utility functions for arrays, browser, dates, strings, math, and more.
Read the docs.
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 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
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>