Skip to content

Latest commit



39 lines (26 loc) · 1001 Bytes


File metadata and controls

39 lines (26 loc) · 1001 Bytes

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 );