[lively-kernel] Add your own style sheets

[Robert Krahn]

As Fabian mentioned we currently do not really support CSS directly but basic support can be reached quite simple.

First of all look how existing examples like the mentioned sketch morphs, the Markdown morph in the PartsBin, or the CSS animation experimentation page make use of stylesheets.

The basic usage pattern is the following:

1) Load or define a stylesheet and append it to the DOM. The following method (used as a prototype on the animation page) provides a try simple interface for inserting / removing / changing stylesheets and extends the WorldMorph interface:

this.world().addScript(function getStyleSheet(id) {
    var existing = $('#' + id),
        css = existing.length > 0 ?
            existing :
            $('<style type="text/css" id="' + id + '"></style>');
        wrapper = {
            css: css,
            toString: function() { return 'CSS<' + this.css.text() + '>' },
            add: function(cssText) {
                this.css.text(this.css.text() + '\n' + cssText);
            },
            append: function() {
                this.css.appendTo(document.head);
            },
            remove: function() { this.css.remove(); },
            inDOM: function() { return this.css.parent().length > 0 }
        }
        return wrapper;
});

2) Assign / remove CSS classes to morphs:

Currently morphs provide no direct interface but by using jQuery this is very simple: morph.jQuery().addClass('foo'); will add the CSS class "foo" to morph. We can simply define a morphic interface for CSS classes and stylesheets.

Remaining problems to solve are:

1) Include CSS information in the serialization. This should be very simple to do. Also (as in the anim example) morph names are well suited to serve as CSS class names. This allows what some call "semantic CSS", styling based on what an object is intended to represent. E.g. by calling a morph "sidebar", the sidebar CSS rules are applied. With the "morphic CSS interface" above this should not take long to implement.

2) Integrate direct and declarative styling. This is the harder part and can be split in two sub-problems:

2.1) We have to fix the "eagerness" of propagating CSS settings to morph and shape nodes. If you currently look at the morph shape representation in the DOM you will see that all visual properties are written into the style attribute of morph and shape nodes. Since the style attribute takes precedence over stylesheet rules, no stylesheet applying for example a background color to a morph will have an effect. This problem can be solved by using stylesheets throughout and having base stylesheets that define default values so that morphs just have to set CSS properties directly when they differ from the defaults.

2.2) The current rendering system does not read DOM data. Cached values are used throughout. When styling used in the very simple way as this is now than this provides two advantages: We don't have to take browser (DOM) inconsistencies into account and performance is hugely improved (as compared to the Morphic1 implementation used until early last year. The first problem can be addressed by using a DOM library like jQuery. The second problem might turn out to be complicated or not -- here we need a prototype and do some profiling to see the performance characteristics.

When approaching these things, I would start at the end ;)

Best,
Robert



On Apr 2, 2012, at 6:09 PM, Manciero, Christopher wrote:

> Is it possible to add style sheets to Lively pages?
> 
> Thanks,
> 
> 
> 
> Christopher Manciero
> 
> EPM Innovation
> 
> SAP Labs, LLC
> 
> 383 Main Avenue
> 
> 5th Floor
> 
> Norwalk, CT 06851
> 
> T   +1-203-295-2213
> 
> M  +1-203-815-8641
> 
> mailto:christopher.manciero at sap.com
> 
> http://www.sap.com<http://www.sap.com/>
> 
> _______________________________________________
> lively-kernel mailing list
> lively-kernel at hpi.uni-potsdam.de
> http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.hpi.uni-potsdam.de/archive/lively-kernel/attachments/20120403/1d3a8921/attachment-0001.html>