Skip to content
This repository has been archived by the owner on May 13, 2019. It is now read-only.

Gulp 4 + Webpack 4 + Babel + BrowserSync + Sass + ITCSS Architecture + BEM Methodology + Twig.js | Frontie Webpack - Front-end Boilerplate + Starter WordPress Theme

License

Notifications You must be signed in to change notification settings

tomaszbujnowicz/frontie-susty

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontie Webpack - Front-end Boilerplate + Starter WordPress Theme called Susty WP

🚀 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, go to /frontie folder and run

  • yarn or npm install to install dependencies

WordPress

Go to /gulpfile.babel.js/config.js and modify wp.proxy URL from YOURSITE.local to your local URL

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
|--.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 Tomasz Bujnowicz under the MIT license.