Cat picture news article with constraints

kitten.css

.headerView {
    background-color: lightgray;
}

.headline {
    font-size: 30pt;
    background-color: yellow;  /* So we can see the sizing */
}

.byline {
    font-size: 14pt;
    background-color: green;  /* So we can see the sizing */
}

/* Lovely image loaded for example purposes */
.imageView {
    /* wget -O kitten.jpg http://placekitten.com/150/150 */
    background-image: url('./kitten.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

kitten.js

// http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/

const Emeus = imports.gi.Emeus;
const Gdk = imports.gi.Gdk;
const Gtk = imports.gi.Gtk;

Gtk.init(null);

let headerView = new Emeus.ConstraintLayout();
headerView.get_style_context().add_class('headerView');

let widgets = {
    headline: new Gtk.Label({
        // label: "Kitten kills again",
        label: "Kitten kills again - will someone YOU know be his next victim?",
        halign: Gtk.Align.START,
        valign: Gtk.Align.START,
        xalign: 0,
        wrap: true,
        width_chars: 7,
        max_width_chars: 20,
    }),
    byline: new Gtk.Label({
        label: "Paws McGruff",
        halign: Gtk.Align.START,
    }),
    imageView: new Gtk.Frame(),
    button: new Gtk.Button({
        label: "Button",
        halign: Gtk.Align.END,
        valign: Gtk.Align.END,
    }),
};

Object.keys(widgets).forEach(key => {
    widgets[key].get_style_context().add_class(key);
    headerView.add(widgets[key]);
});

// Layout

let constraints = Emeus.create_constraints_from_description([
    // Headline and image horizontal layout
    "|-[headline]-[imageView(imageEdge)]-|",
    // Byline and button horizontal layout
    "|-[byline]-[button]-|",
    // Headline and byline vertical layout - spacing at least zero between the two
    "V:|-[headline]-(>=0)-[byline]-|",
    // Image and button vertical layout - spacing at least 15 between the two
    "V:|-[imageView(imageEdge)]-(>=padding)-[button]-|",
], 15, 15, widgets, {
    padding: 15,
    imageEdge: 150,
});
constraints.forEach(headerView.add_constraint, headerView);

// Theme
let cssProvider = new Gtk.CssProvider();
cssProvider.load_from_path('kitten.css');
Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(), cssProvider,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);

let win = new Gtk.Window();
win.add(headerView);
win.connect('destroy', Gtk.main_quit);
win.show_all();

Gtk.main();