Skip to content
Ivan edited this page Aug 18, 2022 · 14 revisions

Styles orginized by scss, there is postCSS autoprefixer - so please forgot about prefixes.

  1. All styles listed in file assets\scss\starter.scss:
    • firstly included bootstrap modules (used import bootstrap by "Option B: Include parts of Bootstrap" - see) please notice unused bootstrap modules just commented
    • then included plugin styles from ./node_modules (listed in package.json in object dependencies)
    • last is custom styles from folder assets\scss\theme.

Generated CSS outputs in assets\css\starter.css.
File assets\scss\wp_admin.scss contain css which loads to WordPress admin.

  1. Critical CSS and preload:
    • to avoid render-blocking CSS each rel='stylesheet' replaced into rel='preload'. As a result there is FOUC - so it's required to have critical CSS.
    • critical CSS generates by gulp using npm Critical, all files listed into config.js array criticalSrcPages. It's require to open file config.js and replace yourdomain into your local domain. Add more pages to config.js array criticalSrcPages if you need.

It's available to disable critical/preload in Customizer->Starter Theme->CSS (for example - while you're developing critical could cause problems).

Show screenshot Customizer - CSS optimization


Code

  • json: package.json - plugins/libs
  • css:
    • assets\scss\theme - folder with custom CSS
    • assets\scss\starter.scss - CSS list
    • assets\css\starter.css - autogenerated (from list just above) file
  • php:
    • inc\assets.php
    • inc\customizer.php - customizer
    • inc\tiny-mce-advanced.php - bootstrap var --bs-body-font-family for enable google font from customizer as default
Clone this wiki locally