Skip to content
Permalink
master
Go to file
 
 
Cannot retrieve contributors at this time
39 lines (26 sloc) 1001 Bytes

Introducing Sketch

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

Examples

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.

  Circle.new(:klass => '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-country-name="USA" 
             data-gdp="13.1 Trillion" />

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

  $('.data-point').click(function()
  { 
    country_name = $(this).data('country-name');
    gdp = $(this).data('gdp');
    alert( country_name + ' has a gdp of ' + gdp ); 
  });
You can’t perform that action at this time.