tomaszbujnowicz / Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102
Projects that are alternatives of or similar to Frontie Webpack
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (+123.53%)
Mutual labels: webpack, gulp, babel, sass, bem
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (+232.35%)
Mutual labels: webpack, gulp, babel, sass, bem
Bootstrap 4 Sass Gulp 4 Boilerplate
A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks
Stars: ✭ 103 (+0.98%)
Mutual labels: gulp, boilerplate, bootstrap, sass, browsersync
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+896.08%)
Mutual labels: webpack, webpack4, babel, boilerplate, sass
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (+296.08%)
Mutual labels: webpack, webpack4, babel, boilerplate, sass
Fastshell
Fiercely quick front-end boilerplate and workflows, HTML5, Gulp, Sass
Stars: ✭ 563 (+451.96%)
Mutual labels: gulp, boilerplate, workflow, sass, browsersync
Wordpress Starter
📦 A starter template for WordPress websites
Stars: ✭ 26 (-74.51%)
Mutual labels: webpack, gulp, babel, sass, browsersync
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (+119.61%)
Mutual labels: webpack, webpack4, babel, boilerplate
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+124.51%)
Mutual labels: webpack, webpack4, babel, boilerplate
Threejs Webpack Es6 Boilerplate
A basic boilerplate for a Three.js project compiled with Webpack and transpiled via Babel to enable using ES6 syntax.
Stars: ✭ 267 (+161.76%)
Mutual labels: webpack, babel, boilerplate, sass
100 Days Of Code Frontend
Curriculum for learning front-end development during #100DaysOfCode.
Stars: ✭ 2,419 (+2271.57%)
Mutual labels: webpack, gulp, bootstrap, sass
Js Library Boilerplate Basic
Javascript Minimal Starter Boilerplate - Webpack 5 🚀, Babel 7, UMD, Unit Testing
Stars: ✭ 354 (+247.06%)
Mutual labels: webpack, webpack4, babel, boilerplate
React Starter Kit
React Starter Kit — front-end starter kit using React, Relay, GraphQL, and JAM stack architecture
Stars: ✭ 21,060 (+20547.06%)
Mutual labels: webpack, babel, boilerplate, browsersync
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: ✭ 202 (+98.04%)
Mutual labels: webpack, webpack4, babel, boilerplate
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198 (+94.12%)
Mutual labels: webpack, webpack4, babel, boilerplate
Minimal React Webpack Babel Setup
The minimal React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 777 (+661.76%)
Mutual labels: webpack, webpack4, babel, boilerplate
React Webpack Typescript Starter
Minimal starter with hot module replacement (HMR) for rapid development.
Stars: ✭ 632 (+519.61%)
Mutual labels: webpack, babel, boilerplate, sass
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: ✭ 169 (+65.69%)
Mutual labels: webpack, boilerplate, bootstrap, sass
Baumeister
👷 The aim of this project is to help you to build your things. From Bootstrap themes over static websites to single page applications.
Stars: ✭ 171 (+67.65%)
Mutual labels: webpack, boilerplate, workflow, bootstrap
https://github.com/tomaszbujnowicz/hybrid-utility-itcss
There is a slightly different approach based on Utility CSS. Check it outFrontie Webpack - Front-end Boilerplate
🚀 Gulp 4 + Webpack 4 + Babel + BrowserSync + ITCSS Architecture + BEM Methodology
These tools make it a solid front-end boilerplate to get a new project off the ground.
🎁 Features
Features | Description |
---|---|
Task Runner | Gulp |
CSS | SASS, ITCSS, CSS Guidelines, BEM |
CSS Tools | Autoprefixer, Source Maps, Stylelint |
Bootstrap 4 | Grid System, Responsive Breakpoints |
JS | Webpack, Babel, ESLint |
Live Reload | BrowserSync |
HTML Templates | Twig.js |
Deployment | GitHub Pages |
Usage
Requirements
Make sure all dependencies have been installed before moving on:
Quick start: Installation
Clone this repository and run
-
yarn
ornpm install
to install dependencies
Tasks
Task Name | Description | Environment |
---|---|---|
yarn start or npm run start
|
Generate a development environment, start the server and watch for changes | Development |
yarn watch or npm run watch
|
Start the server and watch for changes | Development |
yarn build or npm run build
|
Compile production code | Production |
yarn deploy or npm run deploy
|
Compile production code and deploy to GitHub Pages | Production |
Structure
|--dist/ # → Static version of the website ready to upload (never edit)
|
|--gulpfile.babel.js/ # → Gulpfile config and tasks
|--node_modules/ # → Node.js packages (never edit)
|--src/ # → Source files
| |--assets/ # → Assets
| | |--fonts/ # → Assets: Fonts
| | |--img/ # → Assets: Images
| |--modules/ # → Modules: Multi-part components e.g. Navbar (HTML, CSS and JS)
| |--scripts/ # → JS
| | |--components/ # → JS: Components
| | |--app.js # → JS: Main file
| |--styles/ # → Styles: ITCSS Architecture + BEM Methodology
| | |--main.scss # → Styles: Main stylesheet file
| |--templates/ # → Site templates (Twig.js)
| | |--layouts/ # → Templates: Layouts
| | |--components/ # → Templates: Components
| | |--pages/ # → Templates: Pages
|--.babelrc # → Babel presets
|--.browserslistrc # → Browserslist config, browsers that we support
|--.eslintrc # → ESLint config
|--.gitignore # → Gitignore
|--.stylelintrc # → Stylelint config
|--package-lock.json # → NPM lock file (never edit)
|--package.json # → Node.js dependencies and scripts
|--webpack.config.js # → Webpack config
|--yarn.lock # → Yarn lock file (never edit)
Copyright and license
Copyright 2018-2019 Tomasz Bujnowicz under the MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].