There is a slightly different approach based on Utility CSS. Check it out https://github.com/tomaszbujnowicz/hybrid-utility-itcss
๐ 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 and run
yarn
ornpm install
to install dependencies
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
|--.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 2018-2019 Tomasz Bujnowicz under the MIT license.