Customize Pico CSS with SASS in Pinegrow.
Pico CSS is a minimal CSS framework for semantic HTML, without using classes.
Use this project as an example / starter for Pico CSS projects customized with SASS.
Pinegrow Pico CSS Starter project
Clone the starter GitHub project to quickly get started with customizing Pico CSS.
Watch the quick tutorial to learn how to use it:
Usage
Add custom_pico.css to HTML files in the project.
Customization
Override Pico CSS SASS variables in custom_pico.scss. Pinegrow automatically recompiles the SASS file on every change.
The easiest way to edit .scss files is with the built-in code editor. Click on the .scss file in the Project panel to open it in the code editor.
See the list of all Pico SASS variables in:
pico/scss/_variables.scss pico/scss/themes/_colors.scss and so on
Updating Pico CSS
To update Pico CSS download the latest version and copy scss folder into the pico folder (override the pico/scss with the latest scss folder from the Pico CSS download).
Important: do not make any changes in pico/* files because any changes there will be lost if you update Pico CSS.
Usage with WordPress Builder
There is no need to export source SASS files to the theme. In the Project panel, right click on the pico folder and select Do not export. Do the same for custom_pico.scss file.
Conclusion
That’s it, have fun with Pico CSS!