Get up to speed with a new Twig web development project
- Extended Twig template
- Twig Auto-loader
- Php Path setup
- Web structure to compliment
- Development mode
- Production mode
- Gulp task setup for
- Terser - Minify JS files.
- Sass, CleanCSS and CSS Purge - Process and minify styles.
- Gulp image - Minify images and svg.
- Browser Sync - Sync and auto-reload browser in
Development
mode.
- Workbox - Browser cache services.
- Sass Mixins (not activated) - Family.css, Sass-Mq, KF-Sass, RFS, Brand Colors and custom mixins.
- Custom Javascript ES6 modules.
- Node
- PHP + Composer
- Any of VS Code, PhpStorm, Atom, Sublime, etc.
//shell command
> git clone https://github.com/joberror/twig-bootstrap.git
> cd twig-bootstrap
> npm install
> composer install
- Search for all TODO comments in project files and follow the guidelines
- Folders
templates
includes twig templates.vendor
will include Twig and other packages aftercomposer install
is initiated.node_modules
will include all Node packages defined inpackage.json
afternpm install
is initiated.assets-dev
is theDevelopment
asset folder which will include all assets.assets-prod
is where all processed assets files will be stored and ready for production.includes
is the default php include folder. Twig and path setup are located here.
- Run gulp task from terminal using
gulp
in project root directory while inDev
mode - Inline comments are available as a guide in each file.
- Website: iamjoberror.com
- Twitter: @iamjoberror
- Github: @joberror
- LinkedIn: @joberror
Give a ⭐️ if this project helped you!