Frontie Webpack is a front-end boilerplate that combines Gulp 4, Webpack 4, Babel, ITCSS architecture, and BEM methodology to scaffold a new web project.
What is Frontie Webpack?
Frontie Webpack is a project starter kit that takes source files under a src/ folder—SCSS styles, ES6+ JavaScript, Twig.js templates, fonts, and images—and compiles them into a static dist/ folder ready to upload to any web server. It runs on Node.js (version 8.16.0 or newer) and is distributed as an open-source repository by Tomasz Bujnowicz under the MIT license. The boilerplate uses a Gulp 4 pipeline with Webpack 4 for JavaScript bundling, Babel for transpilation, and BrowserSync for live reload during development.
Key Features
- Gulp 4 task runner — Automates builds and development with four yarn/npm commands: start, watch, build, and deploy; start creates a dev environment with a live server, build compiles production code.
- ITCSS + BEM architecture — Styles are organized in
src/styles/main.scssfollowing Inverted Triangle CSS layers and BEM naming conventions, with support from CSS Guidelines. - SASS compilation with Autoprefixer and Stylelint — SCSS is compiled, vendor prefixes are added automatically, and style violations are checked with Stylelint using a project-level
.stylelintrcconfig. - Bootstrap 4 grid and breakpoints — Includes Bootstrap's grid system and responsive breakpoints for layout, without requiring the full Bootstrap JavaScript.
- Webpack 4 + Babel — JavaScript is bundled and transpiled to browser-compatible code; ESLint in
.eslintrcenforces code quality. - Twig.js templates — HTML is assembled from Twig.js templates split into
layouts/,components/, andpages/directories, making component reuse straightforward. - BrowserSync live reload — In development, BrowserSync serves the site and reloads the browser automatically when files change.
- GitHub Pages deployment — The
deploytask builds production code and publishes thedist/folder to GitHub Pages viagulp-gh-pages.
Who is it for?
- Front-end developers who want a pre-configured build pipeline with Gulp, Webpack, and Babel instead of setting up tooling from scratch.
- Teams enforcing CSS standards can adopt the ITCSS layers and BEM methodology defined in the styles folder to keep styles consistent across projects.
- Developers building multi-page static sites can use Twig.js layouts and components to avoid repeating HTML and to generate pages from a single template set.
- Open-source hobbyists can run the deploy task to publish their site or documentation to GitHub Pages without configuring a separate CI/CD pipeline.
Use cases
- Static website developers: scaffold a new project, write SCSS and ES6+ JS in
src/, and runyarn startto get a live-reloading server. - Component-driven teams: break the UI into Twig.js components in
src/templates/componentsand reuse them across pages. - Open-source maintainers: publish project documentation or a landing page to GitHub Pages with a single
yarn deploycommand. - Front-end architects: enforce a consistent CSS structure by following the ITCSS layers and BEM methodology defined in the styles folder.
How does the boilerplate work?
After cloning the repository, install dependencies with yarn or npm install. Then run yarn start to generate a development environment, start a BrowserSync server, and watch for changes; yarn build compiles production code into the dist folder; yarn deploy builds and pushes that folder to GitHub Pages.
Pricing
Frontie Webpack is free and open source under the MIT license.
Alternatives
- HTML5 Boilerplate — a simpler static starter that lacks an integrated Gulp/Webpack build pipeline.
FAQ
Is Frontie Webpack free?
Yes, it is released under the MIT license, so you can use, modify, and distribute it for free, including in commercial projects.
What Node.js version do I need?
The requirements specify Node.js 8.16.0 or newer, along with either yarn or npm as the package manager, and Gulp installed.
What CSS architecture does it use?
It uses ITCSS (Inverted Triangle CSS) with BEM naming conventions and follows CSS Guidelines. The main stylesheet is src/styles/main.scss.
Can I deploy to GitHub Pages?
Yes, running yarn deploy compiles the production code and pushes the dist/ folder to GitHub Pages using the gulp-gh-pages plugin.
Does it include the full Bootstrap framework?
It includes Bootstrap 4's grid system and responsive breakpoints only, not the whole Bootstrap CSS or JavaScript components.
