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.

Понравилась статья? Расскажите о ней на: TwitterFacebookEmail


Talha Mansoor is the creator and lead developer of Elegant theme

Что почитать


Дата

Категория

Contributing

Тэги

Будьте с нами