⏩
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 git@github.com: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 ⏩