Modular Gulp tasks using v4 for compiling, linting & image optimization.
Before starting, ensure that you are using at least the latest LTS release of Node.js, once Node.js has been installed, we recommend to run
To install the required packages use
npm install
- The project uses PostCSS for managing variables and provide the needed browser support.
- With extension
.csswe can use SCSS/PostCSS syntax or it's features. - Partial files support like SASS.
- Nested css support like SASS.
- Included RTL feature which convert LTR CSS to RTL for directional css.
- BEM classes feature available.
- Define your Placeholder and @extend it.
src/css/utils/_placeholders.css- How to use see:
src/css/components/navbar.css - More info: https://github.com/csstools/postcss-extend-rule
- Placeholders vs Mixins: https://medium.com/@linker21/scss-placeholders-vs-mixins-fe79b9dbb6d5
- PX to REM converstion available.
- Default base for conversion is
1rem = 16px. - Default output unit for
<value>pxisrem. - More info: https://www.npmjs.com/package/postcss-pixels-to-rem
- Default base for conversion is
- Media query breakpoints for mobile/ipad/desktop devices.
src/css/utils/_breakpoints.css- How to use see:
src/css/components/header.css
- Included CleanCSS & Auto-prefixer.
gulp build:css
- The project uses ES6 for managing javascript with the
Drupal.behaviorscode standard.
gulp build:js
- Linting Javascript and CSS files along with fix Linting Errors & formatting.
Script to lint JS
gulp lint:js
Script to Fix javaScript errors & Format JS file.
gulp js-fix-prettier
Script to lint CSS
gulp lint:css
Script to Fix CSS linting errors
gulp lint:css-fix
- The images designated for your custom theme can be placed in the
images/folder. We have gulp task to optimized images.
gulp images
- Run multiple task at one time. Like build css, js & image.
npm run build
- Continuous file watch
npm run watch
OR
gulp watch:css