gtk-demo: Add CSS demos

Add a couple of demos demostrating the use of CSS, the css files are
stored into a GResource binary file compiled with glib-compile-resources,
the comments in gtk-demo.py explain the usage of GResource.

Signed-off-by: Simon Feltman <sfeltman@src.gnome.org>

https://bugzilla.gnome.org/show_bug.cgi?id=719722

15 files changed, 723 insertions, 1 deletions

diff --git a/.gitignore b/.gitignore
index a2307e6e..ad1b2949 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@
 *.typelib
 .deps
 .libs
+.idea
 gschemas.compiled
 pygobject-*.tar.xz
 Makefile
diff --git a/demos/gtk-demo/demos/Css/__init__.py b/demos/gtk-demo/demos/Css/__init__.py
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/demos/gtk-demo/demos/Css/__init__.py
diff --git a/demos/gtk-demo/demos/Css/css_accordion.py b/demos/gtk-demo/demos/Css/css_accordion.py
new file mode 100644
index 00000000..158bb30a
--- /dev/null
+++ b/demos/gtk-demo/demos/Css/css_accordion.py
@@ -0,0 +1,94 @@
+#!/usr/bin/env python
+# -*- Mode: Python; py-indent-offset: 4 -*-
+# vim: tabstop=4 shiftwidth=4 expandtab
+#
+# Copyright (C) 2013 Gian Mario Tagliaretti <gianmt@gnome.org>
+#
+# This library is free software; you can redistribute it and/or
+# modify it under the terms of the GNU Lesser General Public
+# License as published by the Free Software Foundation; either
+# version 2.1 of the License, or (at your option) any later version.
+#
+# This library is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+# Lesser General Public License for more details.
+#
+# You should have received a copy of the GNU Lesser General Public
+# License along with this library; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301
+# USA
+
+title = "CSS Accordion"
+description = """
+A simple accordion demo written using CSS transitions and multiple backgrounds.
+"""
+
+
+from gi.repository import Gtk, Gio
+
+
+class CSSAccordionApp:
+    def __init__(self):
+        window = Gtk.Window()
+        window.set_title('CSS Accordion')
+        window.set_default_size(600, 300)
+        window.set_border_width(10)
+        window.connect('destroy', lambda w: Gtk.main_quit())
+
+        hbox = Gtk.Box(homogeneous=False, spacing=2,
+                       orientation=Gtk.Orientation.HORIZONTAL)
+        hbox.set_halign(Gtk.Align.CENTER)
+        hbox.set_valign(Gtk.Align.CENTER)
+        window.add(hbox)
+
+        child = Gtk.Button(label="This")
+        hbox.add(child)
+
+        child = Gtk.Button(label="Is")
+        hbox.add(child)
+
+        child = Gtk.Button(label="A")
+        hbox.add(child)
+
+        child = Gtk.Button(label="CSS")
+        hbox.add(child)
+
+        child = Gtk.Button(label="Accordion")
+        hbox.add(child)
+
+        child = Gtk.Button(label=":-)")
+        hbox.add(child)
+
+        bytes = Gio.resources_lookup_data("/css_accordion/css_accordion.css", 0)
+
+        provider = Gtk.CssProvider()
+        provider.load_from_data(bytes.get_data())
+
+        self.apply_css(window, provider)
+
+        window.show_all()
+
+    def apply_css(self, widget, provider):
+        Gtk.StyleContext.add_provider(widget.get_style_context(),
+                                      provider,
+                                      Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
+
+        if isinstance(widget, Gtk.Container):
+            widget.forall(self.apply_css, provider)
+
+
+def main(demoapp=None):
+    CSSAccordionApp()
+    Gtk.main()
+
+if __name__ == '__main__':
+    import os
+    base_path = os.path.abspath(os.path.dirname(__file__))
+    resource_path = os.path.join(base_path, '../data/demo.gresource')
+    resource = Gio.Resource.load(resource_path)
+
+    # FIXME: method register() should be without the underscore
+    # FIXME: see https://bugzilla.gnome.org/show_bug.cgi?id=684319
+    resource._register()
+    main()
diff --git a/demos/gtk-demo/demos/Css/css_basics.py b/demos/gtk-demo/demos/Css/css_basics.py
new file mode 100644
index 00000000..cd6d3fec
--- /dev/null
+++ b/demos/gtk-demo/demos/Css/css_basics.py
@@ -0,0 +1,119 @@
+#!/usr/bin/env python
+# -*- Mode: Python; py-indent-offset: 4 -*-
+# vim: tabstop=4 shiftwidth=4 expandtab
+#
+# Copyright (C) 2013 Gian Mario Tagliaretti <gianmt@gnome.org>
+#
+# This library is free software; you can redistribute it and/or
+# modify it under the terms of the GNU Lesser General Public
+# License as published by the Free Software Foundation; either
+# version 2.1 of the License, or (at your option) any later version.
+#
+# This library is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+# Lesser General Public License for more details.
+#
+# You should have received a copy of the GNU Lesser General Public
+# License along with this library; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301
+# USA
+
+title = "CSS Basics"
+description = """
+Gtk themes are written using CSS. Every widget is build of multiple items
+that you can style very similarly to a regular website.
+"""
+
+import os
+from gi.repository import Gtk, Gdk, Pango, Gio, GLib
+
+
+class CSSBasicsApp:
+    def __init__(self, demoapp):
+        self.demoapp = demoapp
+
+        self.window = Gtk.Window()
+        self.window.set_title('CSS Basics')
+        self.window.set_default_size(400, 300)
+        self.window.set_border_width(10)
+        self.window.connect('destroy', lambda w: Gtk.main_quit())
+
+        scrolled = Gtk.ScrolledWindow()
+        self.window.add(scrolled)
+
+        provider = Gtk.CssProvider()
+
+        buffer = Gtk.TextBuffer()
+        buffer.create_tag(tag_name="warning", underline=Pango.Underline.SINGLE)
+        buffer.create_tag(tag_name="error", underline=Pango.Underline.ERROR)
+        buffer.connect("changed", self.css_text_changed, provider)
+
+        provider.connect("parsing-error", self.show_parsing_error, buffer)
+
+        textview = Gtk.TextView()
+        textview.set_buffer(buffer)
+        scrolled.add(textview)
+
+        bytes = Gio.resources_lookup_data("/css_basics/css_basics.css", 0)
+        buffer.set_text(bytes.get_data().decode('utf-8'))
+
+        self.apply_css(self.window, provider)
+        self.window.show_all()
+
+    def apply_css(self, widget, provider):
+        Gtk.StyleContext.add_provider(widget.get_style_context(),
+                                      provider,
+                                      Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
+
+        if isinstance(widget, Gtk.Container):
+            widget.forall(self.apply_css, provider)
+
+    def show_parsing_error(self, provider, section, error, buffer):
+        start = buffer.get_iter_at_line_index(section.get_start_line(),
+                                              section.get_start_position())
+
+        end = buffer.get_iter_at_line_index(section.get_end_line(),
+                                            section.get_end_position())
+
+        # FIXME: this should return a GLib.GError instead it returns
+        # FIXME: a GLib.Error object
+        # FIXME: see https://bugzilla.gnome.org/show_bug.cgi?id=712519
+        if error:
+            tag_name = "error"
+        else:
+            tag_name = "warning"
+
+        buffer.apply_tag_by_name(tag_name, start, end)
+
+    def css_text_changed(self, buffer, provider):
+        start = buffer.get_start_iter()
+        end = buffer.get_end_iter()
+        buffer.remove_all_tags(start, end)
+
+        text = buffer.get_text(start, end, False)
+
+        # Ignore CSS errors as they are shown by highlighting
+        try:
+            provider.load_from_data(text.encode('utf-8'))
+        except GLib.GError as e:
+            if e.domain != 'gtk-css-provider-error-quark':
+                raise e
+
+        Gtk.StyleContext.reset_widgets(Gdk.Screen.get_default())
+
+
+def main(demoapp=None):
+    CSSBasicsApp(demoapp)
+    Gtk.main()
+
+
+if __name__ == '__main__':
+    base_path = os.path.abspath(os.path.dirname(__file__))
+    resource_path = os.path.join(base_path, '../data/demo.gresource')
+    resource = Gio.Resource.load(resource_path)
+
+    # FIXME: method register() should be without the underscore
+    # FIXME: see https://bugzilla.gnome.org/show_bug.cgi?id=684319
+    resource._register()
+    main()
diff --git a/demos/gtk-demo/demos/Css/css_multiplebgs.py b/demos/gtk-demo/demos/Css/css_multiplebgs.py
new file mode 100644
index 00000000..778e6008
--- /dev/null
+++ b/demos/gtk-demo/demos/Css/css_multiplebgs.py
@@ -0,0 +1,157 @@
+#!/usr/bin/env python
+# -*- Mode: Python; py-indent-offset: 4 -*-
+# vim: tabstop=4 shiftwidth=4 expandtab
+#
+# Copyright (C) 2013 Gian Mario Tagliaretti <gianmt@gnome.org>
+#
+# This library is free software; you can redistribute it and/or
+# modify it under the terms of the GNU Lesser General Public
+# License as published by the Free Software Foundation; either
+# version 2.1 of the License, or (at your option) any later version.
+#
+# This library is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+# Lesser General Public License for more details.
+#
+# You should have received a copy of the GNU Lesser General Public
+# License along with this library; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301
+# USA
+
+title = "CSS Theming/Multiple Backgrounds"
+description = """
+Gtk themes are written using CSS. Every widget is build of multiple items
+that you can style very similarly to a regular website.
+"""
+
+from gi.repository import Gtk, Gdk, Pango, Gio, GLib
+
+
+class CSSMultiplebgsApp:
+    def __init__(self, demoapp):
+        self.demoapp = demoapp
+
+        self.window = Gtk.Window()
+        self.window.set_title('CSS Multiplebgs')
+        self.window.set_default_size(400, 300)
+        self.window.set_border_width(10)
+        self.window.connect('destroy', lambda w: Gtk.main_quit())
+
+        overlay = Gtk.Overlay()
+        overlay.add_events(Gdk.EventMask.ENTER_NOTIFY_MASK |
+                           Gdk.EventMask.LEAVE_NOTIFY_MASK |
+                           Gdk.EventMask.POINTER_MOTION_MASK)
+        self.window.add(overlay)
+
+        canvas = Gtk.DrawingArea()
+        canvas.set_name("canvas")
+        canvas.connect("draw", self.drawing_area_draw)
+        overlay.add(canvas)
+
+        button = Gtk.Button()
+        button.add_events(Gdk.EventMask.ENTER_NOTIFY_MASK |
+                          Gdk.EventMask.LEAVE_NOTIFY_MASK |
+                          Gdk.EventMask.POINTER_MOTION_MASK)
+        button.set_name("bricks-button")
+        button.set_halign(Gtk.Align.CENTER)
+        button.set_valign(Gtk.Align.CENTER)
+        button.set_size_request(250, 84)
+        overlay.add_overlay(button)
+
+        paned = Gtk.Paned(orientation=Gtk.Orientation.VERTICAL)
+        overlay.add_overlay(paned)
+
+        # We need a filler so we get a handle
+        box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
+        paned.add(box)
+
+        buffer = Gtk.TextBuffer()
+        buffer.create_tag(tag_name="warning", underline=Pango.Underline.SINGLE)
+        buffer.create_tag(tag_name="error", underline=Pango.Underline.ERROR)
+
+        provider = Gtk.CssProvider()
+
+        buffer.connect("changed", self.css_text_changed, provider)
+        provider.connect("parsing-error", self.show_parsing_error, buffer)
+
+        textview = Gtk.TextView()
+        textview.set_buffer(buffer)
+
+        scrolled = Gtk.ScrolledWindow()
+        scrolled.add(textview)
+        paned.add(scrolled)
+
+        bytes = Gio.resources_lookup_data("/css_multiplebgs/css_multiplebgs.css", 0)
+        buffer.set_text(bytes.get_data().decode('utf-8'))
+
+        self.apply_css(self.window, provider)
+        self.window.show_all()
+
+    def drawing_area_draw(self, widget, cairo_t):
+        context = widget.get_style_context()
+        Gtk.render_background(context, cairo_t, 0, 0,
+                              widget.get_allocated_width(),
+                              widget.get_allocated_height())
+
+        Gtk.render_frame(context, cairo_t, 0, 0,
+                         widget.get_allocated_width(),
+                         widget.get_allocated_height())
+
+    def apply_css(self, widget, provider):
+        Gtk.StyleContext.add_provider(widget.get_style_context(),
+                                      provider,
+                                      Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
+
+        if isinstance(widget, Gtk.Container):
+            widget.forall(self.apply_css, provider)
+
+    def show_parsing_error(self, provider, section, error, buffer):
+        start = buffer.get_iter_at_line_index(section.get_start_line(),
+                                              section.get_start_position())
+
+        end = buffer.get_iter_at_line_index(section.get_end_line(),
+                                            section.get_end_position())
+
+        # FIXME: this should return a GLib.GError instead it returns
+        # FIXME: a GLib.Error object
+        # FIXME: see https://bugzilla.gnome.org/show_bug.cgi?id=712519
+        if error:
+            tag_name = "error"
+        else:
+            tag_name = "warning"
+
+        buffer.apply_tag_by_name(tag_name, start, end)
+
+    def css_text_changed(self, buffer, provider):
+        start = buffer.get_start_iter()
+        end = buffer.get_end_iter()
+        buffer.remove_all_tags(start, end)
+
+        text = buffer.get_text(start, end, False)
+
+        # Ignore CSS errors as they are shown by highlighting
+        try:
+            provider.load_from_data(text.encode('utf-8'))
+        except GLib.GError as e:
+            if e.domain != 'gtk-css-provider-error-quark':
+                raise e
+
+        Gtk.StyleContext.reset_widgets(Gdk.Screen.get_default())
+
+
+def main(demoapp=None):
+    CSSMultiplebgsApp(demoapp)
+    Gtk.main()
+
+
+if __name__ == '__main__':
+    import os
+    base_path = os.path.abspath(os.path.dirname(__file__))
+    resource_path = os.path.join(base_path, '../data/demo.gresource')
+    resource = Gio.Resource.load(resource_path)
+
+    # FIXME: method register() should be without the underscore
+    # FIXME: see https://bugzilla.gnome.org/show_bug.cgi?id=684319
+    resource._register()
+    main()
diff --git a/demos/gtk-demo/demos/data/brick.png b/demos/gtk-demo/demos/data/brick.png
new file mode 100644
index 00000000..d413cd28
--- /dev/null
+++ b/demos/gtk-demo/demos/data/brick.png
diff --git a/demos/gtk-demo/demos/data/brick2.png b/demos/gtk-demo/demos/data/brick2.png
new file mode 100644
index 00000000..cfcd079f
--- /dev/null
+++ b/demos/gtk-demo/demos/data/brick2.png
diff --git a/demos/gtk-demo/demos/data/css_accordion.css b/demos/gtk-demo/demos/data/css_accordion.css
new file mode 100644
index 00000000..a2434276
--- /dev/null
+++ b/demos/gtk-demo/demos/data/css_accordion.css
@@ -0,0 +1,52 @@
+@import url("resource://css_accordion/reset.css");
+
+* {
+    transition-property: color, background-color, border-color, background-image, padding, border-width;
+    transition-duration: 1s;
+
+    font: Sans 20px;
+}
+
+GtkWindow {
+    background: linear-gradient(153deg, #151515, #151515 5px, transparent 5px) 0 0,
+                linear-gradient(333deg, #151515, #151515 5px, transparent 5px) 10px 5px,
+                linear-gradient(153deg, #222, #222 5px, transparent 5px) 0 5px,
+                linear-gradient(333deg, #222, #222 5px, transparent 5px) 10px 10px,
+                linear-gradient(90deg, #1b1b1b, #1b1b1b 10px, transparent 10px),
+                linear-gradient(#1d1d1d, #1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
+    background-color: #131313;
+    background-size: 20px 20px;
+}
+
+.button {
+    color: black;
+    background-color: #bbb;
+    border-style: solid;
+    border-width: 2px 0 2px 2px;
+    border-color: #333;
+
+    padding: 12px 4px;
+}
+
+.button:first-child {
+    border-radius: 5px 0 0 5px;
+}
+
+.button:last-child {
+    border-radius: 0 5px 5px 0;
+    border-width: 2px;
+}
+
+.button:hover {
+    padding: 12px 48px;
+    background-color: #4870bc;
+}
+
+.button *:hover {
+    color: white;
+}
+
+.button:hover:active,
+.button:active {
+    background-color: #993401;
+}
diff --git a/demos/gtk-demo/demos/data/css_basics.css b/demos/gtk-demo/demos/data/css_basics.css
new file mode 100644
index 00000000..62dba7a3
--- /dev/null
+++ b/demos/gtk-demo/demos/data/css_basics.css
@@ -0,0 +1,22 @@
+/* You can edit the text in this window to change the
+ * appearance of this Window.
+ * Be careful, if you screw it up, nothing might be visible
+ * anymore. :)
+ */
+
+/* This CSS resets all properties to their defaults values
+ *    and overrides all user settings and the theme in use */
+@import url("resource://css_basics/reset.css");
+
+/* Set a very futuristic style by default */
+* {
+  color: green;
+  font-family: Monospace;
+  border: 1px solid;
+}
+
+/* Make sure selections are visible */
+:selected {
+  background-color: darkGreen;
+  color: black;
+}
diff --git a/demos/gtk-demo/demos/data/css_multiplebgs.css b/demos/gtk-demo/demos/data/css_multiplebgs.css
new file mode 100644
index 00000000..eb9d4d60
--- /dev/null
+++ b/demos/gtk-demo/demos/data/css_multiplebgs.css
@@ -0,0 +1,136 @@
+/* You can edit the text in this window to change the
+ * appearance of this Window.
+ * Be careful, if you screw it up, nothing might be visible
+ * anymore. :)
+ */
+
+/* This CSS resets all properties to their defaults values
+ *    and overrides all user settings and the theme in use */
+@import url("resource://css_multiplebgs/reset.css");
+@import url("resource://css_multiplebgs/cssview.css");
+
+#canvas {
+    transition-property: background-color, background-image;
+    transition-duration: 0.5s;
+
+    background-color: #4870bc;
+}
+
+/* The gradients below are adapted versions of Lea Verou's CSS3 patterns,
+ * licensed under the MIT license:
+ * Copyright (c) 2011 Lea Verou, http://lea.verou.me/
+ *
+ * See https://github.com/LeaVerou/CSS3-Patterns-Gallery
+ */
+
+/**********
+ * Bricks *
+ **********/
+/*
+@define-color brick_hi #d42;
+@define-color brick_lo #b42;
+@define-color brick_hi_backdrop #888;
+@define-color brick_lo_backdrop #999;
+
+#canvas {
+    background-color: #999;
+    background-image: linear-gradient(205deg, @brick_lo, @brick_lo 23px, transparent 23px),
+                      linear-gradient(25deg, @brick_hi, @brick_hi 23px, transparent 23px),
+                      linear-gradient(205deg, @brick_lo, @brick_lo 23px, transparent 23px),
+                      linear-gradient(25deg, @brick_hi, @brick_hi 23px, transparent 23px);
+    background-size: 58px 58px;
+    background-position: 0px 6px, 4px 31px, 29px 35px, 34px 2px;
+}
+
+#canvas:backdrop {
+    background-color: #444;
+    background-image: linear-gradient(205deg, @brick_lo_backdrop, @brick_lo_backdrop 23px, transparent 23px),
+                      linear-gradient(25deg, @brick_hi_backdrop, @brick_hi_backdrop 23px, transparent 23px),
+	              linear-gradient(205deg, @brick_lo_backdrop, @brick_lo_backdrop 23px, transparent 23px),
+	              linear-gradient(25deg, @brick_hi_backdrop, @brick_hi_backdrop 23px, transparent 23px);
+    background-size: 58px 58px;
+    background-position: 0px 6px, 4px 31px, 29px 35px, 34px 2px;
+}
+*/
+
+/*
+#bricks-button {
+    background-color: #eef;
+    background-image: -gtk-scaled(url('resource://css_multiplebgs/brick.png'),url('resource://css_multiplebgs/brick2.png'));
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+*/
+/**********
+ * Tartan *
+ **********/
+/*
+@define-color tartan_bg #662e2c;
+@define-color tartan_bg_backdrop #333;
+
+#canvas {
+    background-color: @tartan_bg;
+    background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px,
+                                                rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px,
+                                                rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px,
+                                                transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px,
+                                                rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px,
+                                                rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px,
+                                                rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
+                      repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px,
+                                                transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px,
+                                                transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px,
+                                                rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px,
+                                                rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px,
+                                                rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
+                      repeating-linear-gradient(-55deg, transparent, transparent 1px, rgba(0,0,0,.2) 1px, rgba(0,0,0,.2) 4px,
+                                                transparent 4px, transparent 19px, rgba(0,0,0,.2) 19px,
+                                                rgba(0,0,0,.2) 24px, transparent 24px, transparent 51px, rgba(0,0,0,.2) 51px,
+                                                rgba(0,0,0,.2) 54px, transparent 54px, transparent 74px);
+}
+
+#canvas:backdrop {
+    background-color: @tartan_bg_backdrop;
+}
+*/
+
+/***********
+ * Stripes *
+ ***********/
+
+/*
+@define-color base_bg #4870bc;
+@define-color backdrop_bg #555;
+
+#canvas {
+  background-color: @base_bg;
+  background-image: linear-gradient(to left, transparent, rgba(255,255,255,.07) 50%, transparent 50%),
+                    linear-gradient(to left, transparent, rgba(255,255,255,.13) 50%, transparent 50%),
+                    linear-gradient(to left, transparent, transparent 50%, rgba(255,255,255,.17) 50%),
+                    linear-gradient(to left, transparent, transparent 50%, rgba(255,255,255,.19) 50%);
+  background-size: 29px, 59px, 73px, 109px;
+}
+
+#canvas:backdrop {
+  background-color: @backdrop_bg;
+}
+*/
+
+/***************
+ * Lined Paper *
+ ***************/
+/*
+#canvas {
+    background-color: #fff;
+    background-image: linear-gradient(90deg, transparent 79px, alpha(#f98195, 0.40) 79px, #f98195 80px, alpha(#f98195, 0.40) 81px, transparent 81px),
+                      linear-gradient(alpha(#77c5cf, 0.60), alpha(#77c5cf, 0.60) 1px, transparent 1px);
+    background-size: 100% 36px;
+}
+
+#canvas:backdrop {
+    background-color: #f1f2f4;
+    background-image: linear-gradient(90deg, transparent 79px, alpha(#999, 0.40) 79px, #999 80px, alpha(#999, 0.40) 81px, transparent 81px),
+                      linear-gradient(alpha(#bbb, 0.60), alpha(#bbb, 0.60) 1px, transparent 1px);
+}
+*/
diff --git a/demos/gtk-demo/demos/data/cssview.css b/demos/gtk-demo/demos/data/cssview.css
new file mode 100644
index 00000000..5060c396
--- /dev/null
+++ b/demos/gtk-demo/demos/data/cssview.css
@@ -0,0 +1,41 @@
+/* Make the text editor has a nice style */
+.view {
+  color: #2e3436;
+  font: Monospace;
+  background-color: alpha(white, 0.30);
+}
+
+.view:selected {
+  color: white;
+  background-color: #4a90d9;
+}
+
+.scrollbar.trough,
+.scrollbars-junction {
+  background-color: alpha(white, 0.80);
+}
+
+.scrollbar.slider {
+  border-width: 3px;
+  border-style: solid;
+  border-radius: 10px;
+  border-color: transparent;
+  background-clip: padding-box;
+  background-color: #999;
+}
+
+.scrollbar.slider:prelight {
+  background-color: #555;
+}
+
+.pane-separator {
+  background-color: alpha(white, 0.80);
+  background-image: linear-gradient(transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);
+  background-size: 40px auto;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.pane-separator:prelight {
+  background-image: linear-gradient(transparent, transparent 1px, #555 1px, #555 4px, transparent 4px);
+}
diff --git a/demos/gtk-demo/demos/data/demo.gresource b/demos/gtk-demo/demos/data/demo.gresource
new file mode 100644
index 00000000..e19d822d
--- /dev/null
+++ b/demos/gtk-demo/demos/data/demo.gresource
diff --git a/demos/gtk-demo/demos/data/demo.gresource.xml b/demos/gtk-demo/demos/data/demo.gresource.xml
new file mode 100644
index 00000000..866769f5
--- /dev/null
+++ b/demos/gtk-demo/demos/data/demo.gresource.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gresources>
+  <gresource prefix="/css_accordion">
+    <file>css_accordion.css</file>
+    <file>reset.css</file>
+  </gresource>
+  <gresource prefix="/css_basics">
+    <file>css_basics.css</file>
+    <file>reset.css</file>
+  </gresource>
+  <gresource prefix="/css_multiplebgs">
+    <file>css_multiplebgs.css</file>
+    <file>brick.png</file>
+    <file>brick2.png</file>
+    <file>cssview.css</file>
+    <file>reset.css</file>
+  </gresource>
+</gresources>
diff --git a/demos/gtk-demo/demos/data/reset.css b/demos/gtk-demo/demos/data/reset.css
new file mode 100644
index 00000000..1c27a8e7
--- /dev/null
+++ b/demos/gtk-demo/demos/data/reset.css
@@ -0,0 +1,68 @@
+/* @import this colorsheet to get the default values for every property.
+ * This is useful when writing special CSS tests that should not be
+ * inluenced by themes - not even the default ones.
+ * Keep in mind that the output will be very ugly and not look like
+ * anything GTK.
+ * Also, when adding new style properties, please add them here.
+ */
+
+* {
+  color: inherit;
+  font-size: inherit;
+  background-color: initial;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant: inherit;
+  font-weight: inherit;
+  text-shadow: inherit;
+  icon-shadow: inherit;
+  box-shadow: initial;
+  margin-top: initial;
+  margin-left: initial;
+  margin-bottom: initial;
+  margin-right: initial;
+  padding-top: initial;
+  padding-left: initial;
+  padding-bottom: initial;
+  padding-right: initial;
+  border-top-style: initial;
+  border-top-width: initial;
+  border-left-style: initial;
+  border-left-width: initial;
+  border-bottom-style: initial;
+  border-bottom-width: initial;
+  border-right-style: initial;
+  border-right-width: initial;
+  border-top-left-radius: initial;
+  border-top-right-radius: initial;
+  border-bottom-right-radius: initial;
+  border-bottom-left-radius: initial;
+  outline-style: initial;
+  outline-width: initial;
+  outline-offset: initial;
+  background-clip: initial;
+  background-origin: initial;
+  background-size: initial;
+  background-position: initial;
+  border-top-color: initial;
+  border-right-color: initial;
+  border-bottom-color: initial;
+  border-left-color: initial;
+  outline-color:  initial;
+  background-repeat: initial;
+  background-image: initial;
+  border-image-source: initial;
+  border-image-repeat: initial;
+  border-image-slice: initial;
+  border-image-width: initial;
+  transition-property: initial;
+  transition-duration: initial;
+  transition-timing-function: initial;
+  transition-delay: initial;
+  engine: initial;
+  gtk-key-bindings: initial;
+
+  -GtkWidget-focus-line-width: 0;
+  -GtkWidget-focus-padding: 0;
+  -GtkNotebook-initial-gap: 0;
+}
diff --git a/demos/gtk-demo/gtk-demo.py b/demos/gtk-demo/gtk-demo.py
index ab704559..4586a240 100755
--- a/demos/gtk-demo/gtk-demo.py
+++ b/demos/gtk-demo/gtk-demo.py
@@ -25,7 +25,7 @@ import os
 import sys
 import textwrap
 
-from gi.repository import GLib, GObject, Pango, GdkPixbuf, Gtk
+from gi.repository import GLib, GObject, Pango, GdkPixbuf, Gtk, Gio
 
 try:
     from gi.repository import GtkSource
@@ -116,6 +116,20 @@ class GtkDemoApp(Gtk.Application):
     def __init__(self):
         Gtk.Application.__init__(self, application_id='org.gnome.pygobject.gtkdemo')
 
+        # Use a GResource to hold the CSS files. Resource bundles are created by
+        # the glib-compile-resources program shipped with Glib which takes an xml
+        # file that describes the bundle, and a set of files that the xml
+        # references. These are combined into a binary resource bundle.
+        base_path = os.path.abspath(os.path.dirname(__file__))
+        resource_path = os.path.join(base_path, 'demos/data/demo.gresource')
+        resource = Gio.Resource.load(resource_path)
+
+        # FIXME: method register() should be without the underscore
+        # FIXME: see https://bugzilla.gnome.org/show_bug.cgi?id=684319
+        # Once the resource has been globally registered it can be used
+        # throughout the application.
+        resource._register()
+
     def on_activate(self, app):
         self.window = Gtk.ApplicationWindow.new(self)
         self.window.set_title('PyGObject GTK+ Code Demos')