CSS on the  

Desktop


http://slides.com/felixhageloh/css-on-the-desktop/live



@felx


felix.hageloh@gmail.com
 

 = ?

 +


Personal itch to
scratch




Geek Tool





not responsive to different screen sizes

limited layout support 

no charts/graphs

HTML5 fits the bill

CSS Text Layout 

Tables  SVG Canvas  Easy Customizable




demo

The pieces

Node.js backend


reads widgets from file system and watches for changes

runs shell commands

serves widgets and widget updates

The pieces

webkit frontend


renders stuff

The pieces

Native app


provides fullscreen webkit view

bundles node and runs the server




http://tracesof.net/uebersicht-widgets







Challenges


Leaking CSS




CSS


    #widget-id .some-class {
        ...
    }

    
    #widget-id .some-other-class {
        ...
    }


Stylus


    #widget-id
 
      .some-class
        ...
    
      .some-other-class
        ...



layout



style







CSS on the desktop

By felixhageloh

CSS on the desktop

  • 2,047