CRITICK - WORDPRESS STARTER THEME (2022)

Gulp4, SCSS, JavaScript ES6+, WEBP, fonts.

Please run all commands from the current theme folder.

1. Change the value of the pathRoot to your local domain name in

gulpfile.babel.js -> config -> path.js

2. Install dependencies:

npm i

3. Start development:

npm start

4. Production build:

npm run build

5. You are awesome! Happy coding! ;-)

---

Where to place SCSS / JS / images / fonts source files?

Nice question! Inside your src directory.

---

Where are processed files located?

Inside your static directory. It will appear after starting development or after running production build.

---

Features:

1. Styles

1.1. SCSS support.

1.2. If background-url points to a local image that has its WEBP version - it will be replaced.

1.3. If there are different CSS-properties that could be replaced with their short version - they will be replaced automatically.

1.4. All @media queries with the same rules will be grouped together.

1.5. No frameworks - please see components/grid.scss and components/vars.scss to edit .container properties.

1.6. Also, use standard @media and your variables from components/vars.scss for breakpoints:

@media all and (min-width: $xl) {}

1.7. Put styles for specific pages in src/scss/pages.

Processed files will appear in static/css/pages.

1.7. Gulp4 default sourcemaps added.

---

2. JavaScript

2.1. ES6+ with import / export support.

2.2. Gulp4 default sourcemaps added.

2.3. Put scripts for specific pages in src/js/pages. You can set another name for this directory.

Processed files will appear in static/js/<source_js_file_name>/<source_js_file_name>.min.js.

---

3. Local Images

3.1. Minification of PNG, JPG, JPEG, GIF, SVG. Please place them inside your src/img/ directory and then include them into your code from your static/img/ directory.

3.2. Also creates WEBP version of the image.

---

4. Fonts

4.1. Put local fonts into your src/fonts/ directory. They will be moved to static/fonts/.

4.2. Use components/fonts.scss to include local fonts with @font-face rules from your static/fonts/ directory.

---

5. Errors

Pop-up system notifications are added - now you will not waste your time searching for errors.

---

6. Cleaning static/ directory

6.1. Every time you will run development or production build, the following subdirectories of your static/ directory will be cleared:

js | css | img | fonts

6.2. Any other subdirectories will not be affected, so feel free to add everything you need to your static/ directory. ;-)

---

Default styles and scripts size after build

main.min.css - 1.34 KB
main.min.js - 536 B