Elegant uses GulpJS and PostCSS to do pre and post processing, like adding vendor prefixes or compressing the CSS file.
Why not use Pelican assets plugin?
Pelican’s assets plugin uses Python’s webassets package.
Unfortunately, webassets have not had a release since early 2017. Requests to revive the project have gone unheeded.
I tired to install webassets from the Git repository to use its PostCSS filter but it didn’t work. Instead of wasting time in wrestling the code of an unmaintained project, I decided to use PostCSS which is modern and actively maintained.
How to use PostCSS
This is closely related to LiveReload Elegant Documentation Using Gulp.js
Prerequisites
You need to run following steps only once, to setup the LiveReload using gulp.
Step 1: Install NodeJS and Yarn
Install Node.js and Yarn on your system.
If you are on Windows then try installing them with scoop.sh. It saves time and makes update easier.
Step 2: Install gulp
Run this command from your command line terminal.
yarn global add gulp-cli
Step 3: Install Dependencies
In the root of the Elegant repository, run
yarn install
yarn will create node_modules folder in the root.
Step 4: Run gulp
In the root of the Elegant repository, run
gulp css
It will compile the CSS present in static/css folder into static/css/elegant.prod.css.
To live preview your changes, use
gulp
How does it work?
Gulp and PostCSS, takes all the CSS files present inside static/css folder. It applies PostCSS plugins on it like CSS compression.
It then writes the generated version in static/css/elegant.prod.css file. This is the file a Pelican blog uses when it uses Elegant theme.
If user has enabled assets plugin, then this file is again made to go through webassets cssmin filter. Although this step is redundant because elegant.prod.css is already compressed. But it is necessary in case user has decided to customize the theme using custom.css. In which, assets cssmin filter will combine elegant.prod.css and custom.css into one file style.min.css.