This is a front-end development framework that includes a curated set of conventions and libraries, including
- Sass and Vue components, built using
- Atomic Design and ABEM conventions, integrated with
- Laravel Mix-based build scripts,
- starter documentation and a pattern library powered by Fractal and Twig.
Framework, not a Library
Unlike traditional libraries, the code included within Boilerplate is scaffolded into your project so you can adapt it to do your needs. It adds a
webpack.mix.js, as well as everything in the
resources/ folder to your project. Learn more about Boilerplate's structure.
On a new or existing project
First, make sure you have a
package.json file. If you don't have one, you an create one by running
npm init -y
Once you have a
package.json file, you can install Boilerplate:
npm install imarc-boilerplate npx imarc-boilerplate
npx command automatically copies
webpack.mix.js, and the
resources/ folder out of
node_modules/ into your project for your use. It also updates the npm
scripts section within your
Using the Build (Laravel Mix)
After Boilerplate is installed, you can build your front-end files by running the following:
npm run devwill run the the development build (make sourcemaps, don't minify, etc.)
npm run watchalso runs the development build, but it watches for changes to the source files and automatically re-runs the build when they change.
npm run prodwill run the production build which is optimized for deployment in production.
Using the Pattern Library (Fractal)
npm run fractal startruns Fractal's development server. It has hot reloading and will automatically detect when you add or remove components.
npm run fractal buildhas Fractal build a static version of the pattern library, by default into /web/pattern-library/.
While working on components within the pattern library, you will likely want to run
npm run watch in one terminal while running
npm run fractal start in another. The first will watch for source file changes and the second will watch for changes to the twig and compiled files.