All Projects → tomaszbujnowicz → Frontie Webpack

tomaszbujnowicz / Frontie Webpack

Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js

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
Vue
Stars: ✭ 65 (-36.27%)
Mutual labels:  webpack, babel, bootstrap, 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

There is a slightly different approach based on Utility CSS. Check it out https://github.com/tomaszbujnowicz/hybrid-utility-itcss

Frontie 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 or npm 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].