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 | 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 |
Make sure all dependencies have been installed before moving on:
Clone this repository, go to /frontie folder and run
yarnornpm installto install dependencies
Go to /gulpfile.babel.js/config.js and modify wp.proxy URL from YOURSITE.local to your local URL
| 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 |
|--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 2018 Tomasz Bujnowicz under the MIT license.