{"id":6373,"date":"2020-01-01T11:04:12","date_gmt":"2020-01-01T10:04:12","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=6373"},"modified":"2020-01-01T11:04:12","modified_gmt":"2020-01-01T10:04:12","slug":"how-to-style-your-gtk-app-with-css-and-haskell-codeburst","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2020\/01\/01\/how-to-style-your-gtk-app-with-css-and-haskell-codeburst\/","title":{"rendered":"How to Style Your GTK App with CSS and Haskell – codeburst"},"content":{"rendered":"

For the upcoming release of Gifcurry \u2014 an open-source, video-to-GIF maker \u2014 a completely custom theme was made using CSS and Haskell. The\u2026<\/p><\/blockquote>\n

Source: How to Style Your GTK App with CSS and Haskell – codeburst<\/a><\/em><\/p>\n

<\/p>\n

\n
\n

How to Style Your GTK App with CSS and Haskell<\/h1>\n<\/div>\n
\n
\n
\n
\"Lettier\"<\/a><\/div>\n
\n
\n
\n
Lettier<\/a><\/span><\/p>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
Jun 28, 2018<\/a> \u00b7 5 min read<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n

<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n

For the upcoming release of Gifcurry <\/a>\u2014 an open-source, video-to-GIF maker <\/a>\u2014 a completely custom theme was made using CSS and Haskell. The new theme will help maintain a more consistent look and feel across platforms and for Linux \u2014 across distros. The theme also ensures the need for only one set of custom icons.<\/p>\n

Creating a GTK desktop app and styling it like you would a web application is a great alternative to frameworks like Electron. You can reuse your CSS knowledge and ship a cross-platform product with reduced system requirements. Of course Haskell isn\u2019t required, as you can create and style GTK apps without it, but why would you want to? \ud83d\ude1b<\/p>\n

\n

The CSS-like syntax will hopefully be much more familiar to many people, lowering the barrier for custom theming. \u2014 https:\/\/developer.gnome.org\/gtk3\/stable\/gtk-migrating-GtkStyleContext-css.html<\/a><\/p>\n<\/blockquote>\n

Supporting Older GTK Versions<\/h2>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n

<\/div>\n<\/div>\n<\/div>\n<\/div>

Gifcurry running on Ubuntu 14.04<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n

When building a custom theme for your GTK application, you\u2019ll have to consider supporting older versions of GTK. If you have Ubuntu 14.04 users for instance, you\u2019ll need to support the GTK 3.10 CSS file format<\/a>. Ubuntu 16.04 users will need support for GTK 3.18.<\/p>\n

Gifcurry<\/a> aims to support GTK 3.10 all the way up to GTK 3.24<\/a> and beyond. Between 3.10 and now, there are some commonalities but big changes occurred in 3.18, 3.19, and 3.20. Gifcurry<\/a> applies a base styling and then detects the machine\u2019s GTK version applying more styling rules as the version number goes higher.<\/p>\n

Some of the big changes include:<\/p>\n