Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 

README.markdown

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

About

svg composition

Resources

Packages

No packages published

Languages

You can’t perform that action at this time.