Qt Skin Generator

Using Stylus for the job solves bunch of issues in Qt (probably caused by taking Web's CSS technology and breaking it so badly):

• variables
• functions
• overrides
• nested selectors
• parent referencing
• and more!

This repository contains blank-ish template with simple example of how to write qss using stylus. If you want to support me, you can buy the Qt Skin Generator Template from my Gumroad page.

Do you want to see other demo?

I've used the Qt Skin Generator during the Node Editor Tutorial Series. The video is with explanation:

Interested in how it works?

the repository/source code provides you with a simple dummy PyQt5 demo example (written in Python). A Window full of Qt widgets, so you can test your qss generated skin with ease. The window checks for qss files in qss subfolder and providing you with a combo box, letting you choose the skin you want to test - with live reload! Every change to the qss file will trigger complete reload of the skin of the application.

The backbone of the generator lies in Node.js' Grunt task called "watch". You can easilly start the task by typing grunt command in your console (of course once you install Node.js and dependencies described in the README file). The building goes roughly through this process:

1. copy all sources to temporary build subdirectory
2. replace all css-invalid characters which may be used in qss
3. build the sources with stylus
4. revert the css-invalid characters fix from step (2)
5. deploy copy to specified destination (optional step, that needs to be set up in Gruntfile)

All of the grunt commands are stored in Gruntfile.js in the root of the repository. As an example, there is even commented task `copy:to_dist` right in the `watch` command which you can easily setup/uncomment to copy your builded qss file to desired location.

If you want to create minified qss build, go in the `stylus` command at the bottom of the file and set `compress` to true in the options. In the `files` dictionary you also define all of your .styl files which should be compiled to .qss

Download

Free Download: qt-skin-generator-master.zip

Source code: https://gitlab.com/pavel.krupala/qt-skin-generator