Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



24 Commits

Repository files navigation

Introducing Sketch

Sketch allows you to create reuseable, inheritable visual elements which can then be rendered on the web.


basic syntax

  class Smile < Sketch::Base

html5's data attribute

For svg elements and sketches, you can add data which can then be retrieved via javascript. => 'data-point', 
             :data => {:country_name => 'USA', 
                       :gdp => '13.1 Trillion'})

will produce this HTML... note then underscores become dashes. This is because data-country_name freaks me out.

  <circle class="data-point" 
             data-gdp="13.1 Trillion" />

The you can retrieve the data using jQuery, like this:

    country_name = $(this).data('country-name');
    gdp = $(this).data('gdp');
    alert( country_name + ' has a gdp of ' + gdp );