jQuery,
eCSStender
& you
Aaron Gustafson
Easy Designs, LLC
slideshare.net/AaronGustafson
?
?
jQuery, eCSStender & you




Download...




                                eCSStender.org
jQuery Summit - November 2010 ...
jQuery, eCSStender & you




Download...




                                eCSStender.org
jQuery Summit - November 2010 ...
jQuery, eCSStender & you




Download...




                                github.com/easy-designs/eCSStender.js
jQuery ...
jQuery, eCSStender & you




...collect extensions...




jQuery Summit - November 2010   15
jQuery, eCSStender & you




...collect extensions...




jQuery Summit - November 2010   16
jQuery, eCSStender & you




...include...
   <script      type="text/javascript"   src="eCSStender.js"></script>
   <scri...
jQuery, eCSStender & you




...and write your CSS
   section,
   article,
   blockquote {
     border-radius: 10px;
     ...
jQuery, eCSStender & you




Need selectors?
   <script type="text/javascript" src="eCSStender.js"></script>
   <script ty...
jQuery, eCSStender & you




Compound classes in IE6?
   p.test {
     color: green;
   }
   p.alt.test {
     color: red;...
jQuery, eCSStender & you




Adjacent siblings?
   p + p {
     color: green;
   }




jQuery Summit - November 2010   22
jQuery, eCSStender & you




General siblings?
   p ~ p {
     color: green;
   }




jQuery Summit - November 2010   23
jQuery, eCSStender & you




Advanced pseudo-classes?
   tr {
     background: white;
   }
   td:empty {
     background: ...
jQuery, eCSStender & you




Consider border-radius
   #foo {
     border-radius: 3px;
   }




jQuery Summit - November 2...
jQuery, eCSStender & you




Consider border-radius
   #foo {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3p...
jQuery, eCSStender & you




Consider border-radius
   #foo {
     border-radius: 10px 5px;
   }




jQuery Summit - Novem...
jQuery, eCSStender & you




Consider border-radius
   #foo {
     -moz-border-radius: 10px 5px;
     -webkit-border-top-l...
jQuery, eCSStender & you




Ah, memories...
   #foo {
     padding: 10px;
     width: 200px;
     width: 180px;
     heig...
jQuery, eCSStender & you




Simplified CSS3?
   <script      type="text/javascript"   src="eCSStender.js"></script>
   <sc...
jQuery, eCSStender & you




Yup!
  section,
  article,
  blockquote {
    border-radius: 10px;
    box-shadow: 0 0 15px 1...
jQuery, eCSStender & you




Valid extension of CSS



                                -prefix-


jQuery Summit - November...
jQuery, eCSStender & you




Browser vendors do it




         -moz-                  -webkit-   -ms-   -o-




jQuery Su...
THE FUTURE OF CSS
jQuery, eCSStender & you




Pointless, but possible
   .bowling-alley img {
     -easy-physics-fill: lead;
   }
   .beach...
Trivia Question:
   Who were the
co-creators of CSS?




    (First person to answer correctly, gets a book)
jQuery, eCSStender & you




Step 1: Register extensions



                                Register




jQuery Summit - N...
jQuery, eCSStender & you




Step 2: Find stylesheets


                                <html>

                          ...
jQuery, eCSStender & you




Step 3: Collect the rules



                                Collect




jQuery Summit - Nove...
jQuery, eCSStender & you




Step 4: parse & process



                                Process




jQuery Summit - Novemb...
jQuery, eCSStender & you




Step 5: Trigger extensions




jQuery Summit - November 2010   45
jQuery, eCSStender & you




    Helping hands
๏   Dean Edward’s IE scripts
๏   Selectivizr
๏   css3-mediaqueries.js

    ...
jQuery, eCSStender & you




    Alternative syntax
๏   SASS (Syntactically Awesome Stylesheets)
๏   LESS (Leaner CSS)
๏  ...
jQuery, eCSStender & you




    Capability checking
๏   Modernizr
                                               Testing
...
jQuery, eCSStender & you




    Something new
๏   More CSS
                                               Testing
       ...
jQuery, eCSStender & you




    Ecosystem
๏   jQuery plug-ins
๏   CSS Sandpaper                     One-off CSS
๏   CVI s...
jQuery, eCSStender & you




Unity!
                                  One-off CSS
                                scripts&...
Let’s make
something awesome!

       I thought you’d never ask.
jQuery, eCSStender & you




Pointless, but possible




jQuery Summit - November 2010   54
jQuery, eCSStender & you




Step 1: Dependencies
   <script type="text/javascript" src="eCSStender.js"></script>
   <scri...
jQuery, eCSStender & you




Step 1: Dependencies
   // jquery.EasyPhysics.js
   EasyPhysics.Balloon      = function( el  ...
jQuery, eCSStender & you




Step 2: Registration
   eCSStender.register(




        );




jQuery Summit - November 2010...
jQuery, eCSStender & you




Step 2: Registration
   eCSStender.register(
     { property: '-easy-physics-fill',
        f...
jQuery, eCSStender & you




Step 2: Registration
   eCSStender.register(
     { property: '-easy-physics-fill',
        f...
jQuery, eCSStender & you




Step 2: Registration
   eCSStender.register(
     { property: '-easy-physics-fill',
        f...
jQuery, eCSStender & you




Pointless, but possible
   .bowling-alley img {
     -easy-physics-fill: lead;
   }
   .beach...
I love you you know.

 I know.
Does the browser
support border-radius?

              Nope.




isSupported()
jQuery, eCSStender & you




isSupported()
   eCSStender.isSupported(
      'property',
      'visibility: hidden'
   );
 ...
jQuery, eCSStender & you




isSupported()
   eCSStender.isSupported(
      'property',
      'visibility',
      'hidden'...
jQuery, eCSStender & you




isSupported()
   var
   el = document.createElement('b'),
   html = document.createElement('p...
Can you make my
  CSS smarter?

         Of course.
jQuery, eCSStender & you




Inline style sucks...
   <div style="display: none;">
     <p>Some content</p>
   </div>




...
jQuery, eCSStender & you




...don’t do it!
   <div style="display: none;">
     <p>Some content</p>
   </div>




jQuery...
jQuery, eCSStender & you




makeUniqueClass()
   (function(){
     var
     e          = eCSStender,
     the_class = e.m...
jQuery, eCSStender & you




embedCSS()
   eCSStender.embedCSS(
      'p { color: red; }',
      'screen',
      false
   ...
jQuery, eCSStender & you




applyWeightedStyle()
   eCSStender.applyWeightedStyle(
     el, { 'visibility': 'hidden' }, 1...
jQuery, eCSStender & you




As flexible as possible
   function embed( selector, properties, medium )
   {
     var style_...
jQuery, eCSStender & you




As flexible as possible
   function inline( selector, properties, medium, specificity ) {
    ...
jQuery, eCSStender & you




As flexible as possible
   eCSStender.register(
    // ...
    function( selector, properties,...
jQuery, eCSStender & you




addRules()
   var style = eCSStender.embedCSS(
      'p { color: red; }',
      'screen',
   ...
Can you look
something up for me?

             No problemo.
jQuery, eCSStender & you




lookup()
   var matches = eCSStender.lookup(
      {
         selector:    'h1',
         spe...
Help make me better!




              MIT Licensed

Fork: github.com/easy-designs/eCSStender.js
Discuss: groups.google.co...
jQuery, eCSStender & you
                     by Aaron Gustafson
                     Slides available at
          http:/...
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
jQuery, eCSStender & you [jQuery Summit 2010]
Upcoming SlideShare
Loading in …5
×

jQuery, eCSStender & you [jQuery Summit 2010]

4,619 views

Published on

Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS.

With eCSStender, when you write the rules, browsers pay attention.

In this session, Aaron Gustafson discusses:

* Why Web designers would love eCSStender
* How eCSStender works
* How extensions can be implemented; and
* How to build extensions using jQuery

Published in: Technology, Design
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
4,619
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
51
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery, eCSStender & you [jQuery Summit 2010]

  1. 1. jQuery, eCSStender & you Aaron Gustafson Easy Designs, LLC slideshare.net/AaronGustafson
  2. 2. ?
  3. 3. ?
  4. 4. jQuery, eCSStender & you Download... eCSStender.org jQuery Summit - November 2010 12
  5. 5. jQuery, eCSStender & you Download... eCSStender.org jQuery Summit - November 2010 13
  6. 6. jQuery, eCSStender & you Download... github.com/easy-designs/eCSStender.js jQuery Summit - November 2010 14
  7. 7. jQuery, eCSStender & you ...collect extensions... jQuery Summit - November 2010 15
  8. 8. jQuery, eCSStender & you ...collect extensions... jQuery Summit - November 2010 16
  9. 9. jQuery, eCSStender & you ...include... <script type="text/javascript" src="eCSStender.js"></script> <script type="text/javascript" src="eCSStender.CSS3-backgrounds-and-borders.js"></script> <script type="text/javascript" src="eCSStender.CSS3-transforms.js"></script> <script type="text/javascript" src="eCSStender.CSS3-color.js"></script> <script type="text/javascript" src="eCSStender.CSS3-transitions.js"></script> jQuery Summit - November 2010 17
  10. 10. jQuery, eCSStender & you ...and write your CSS section, article, blockquote { border-radius: 10px; box-shadow: 0 0 15px 1px #000; color: rgb(255, 255, 255); transform-origin: 50% 50%; transition: all 0.5s linear; } section:hover, body:focus section, section:hover blockquote, body:focus blockquote { transform: rotate(-15deg); } section:hover article, body:focus article { transform: rotate(30deg); } jQuery Summit - November 2010 18
  11. 11. jQuery, eCSStender & you Need selectors? <script type="text/javascript" src="eCSStender.js"></script> <script type="text/javascript" src="sizzle.js"></script> <script type="text/javascript"> // <![CDATA[ eCSStender.addMethod('findBySelector',Sizzle); // ]]> </script> <script type="text/javascript" src="eCSStender.CSS3-selectors.js"></script> jQuery Summit - November 2010 20
  12. 12. jQuery, eCSStender & you Compound classes in IE6? p.test { color: green; } p.alt.test { color: red; } jQuery Summit - November 2010 21
  13. 13. jQuery, eCSStender & you Adjacent siblings? p + p { color: green; } jQuery Summit - November 2010 22
  14. 14. jQuery, eCSStender & you General siblings? p ~ p { color: green; } jQuery Summit - November 2010 23
  15. 15. jQuery, eCSStender & you Advanced pseudo-classes? tr { background: white; } td:empty { background: green; } jQuery Summit - November 2010 24
  16. 16. jQuery, eCSStender & you Consider border-radius #foo { border-radius: 3px; } jQuery Summit - November 2010 26
  17. 17. jQuery, eCSStender & you Consider border-radius #foo { -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } jQuery Summit - November 2010 27
  18. 18. jQuery, eCSStender & you Consider border-radius #foo { border-radius: 10px 5px; } jQuery Summit - November 2010 28
  19. 19. jQuery, eCSStender & you Consider border-radius #foo { -moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -o-border-radius: 10px 5px; -khtml-border-top-left-radius: 10px; -khtml-border-top-right-radius: 5px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; border-radius: 10px 5px; } jQuery Summit - November 2010 29
  20. 20. jQuery, eCSStender & you Ah, memories... #foo { padding: 10px; width: 200px; width: 180px; height: 200px; height: 180px; } /* or */ #foo { padding: 10px; width: 200px; height: 200px; } * html #foo { width: 180px; height: 180px; } jQuery Summit - November 2010 30
  21. 21. jQuery, eCSStender & you Simplified CSS3? <script type="text/javascript" src="eCSStender.js"></script> <script type="text/javascript" src="eCSStender.CSS3-backgrounds-and-borders.js"></script> <script type="text/javascript" src="eCSStender.CSS3-transforms.js"></script> <script type="text/javascript" src="eCSStender.CSS3-color.js"></script> <script type="text/javascript" src="eCSStender.CSS3-transitions.js"></script> jQuery Summit - November 2010 31
  22. 22. jQuery, eCSStender & you Yup! section, article, blockquote { border-radius: 10px; box-shadow: 0 0 15px 1px #000; color: rgb(255, 255, 255); transform-origin: 50% 50%; transition: all 0.5s linear; } section:hover, body:focus section, section:hover blockquote, body:focus blockquote { transform: rotate(-15deg); } section:hover article, body:focus article { transform: rotate(30deg); } jQuery Summit - November 2010 32
  23. 23. jQuery, eCSStender & you Valid extension of CSS -prefix- jQuery Summit - November 2010 34
  24. 24. jQuery, eCSStender & you Browser vendors do it -moz- -webkit- -ms- -o- jQuery Summit - November 2010 35
  25. 25. THE FUTURE OF CSS
  26. 26. jQuery, eCSStender & you Pointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; } jQuery Summit - November 2010 38
  27. 27. Trivia Question: Who were the co-creators of CSS? (First person to answer correctly, gets a book)
  28. 28. jQuery, eCSStender & you Step 1: Register extensions Register jQuery Summit - November 2010 41
  29. 29. jQuery, eCSStender & you Step 2: Find stylesheets <html> CSS Inspect jQuery Summit - November 2010 42
  30. 30. jQuery, eCSStender & you Step 3: Collect the rules Collect jQuery Summit - November 2010 43
  31. 31. jQuery, eCSStender & you Step 4: parse & process Process jQuery Summit - November 2010 44
  32. 32. jQuery, eCSStender & you Step 5: Trigger extensions jQuery Summit - November 2010 45
  33. 33. jQuery, eCSStender & you Helping hands ๏ Dean Edward’s IE scripts ๏ Selectivizr ๏ css3-mediaqueries.js Browser Patchers jQuery Summit - November 2010 47
  34. 34. jQuery, eCSStender & you Alternative syntax ๏ SASS (Syntactically Awesome Stylesheets) ๏ LESS (Leaner CSS) ๏ OO CSS (purely conceptual) Browser Shorthand Patchers Parsers jQuery Summit - November 2010 48
  35. 35. jQuery, eCSStender & you Capability checking ๏ Modernizr Testing Scripts Browser Shorthand Patchers Parsers jQuery Summit - November 2010 49
  36. 36. jQuery, eCSStender & you Something new ๏ More CSS Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers jQuery Summit - November 2010 50
  37. 37. jQuery, eCSStender & you Ecosystem ๏ jQuery plug-ins ๏ CSS Sandpaper One-off CSS ๏ CVI scripts scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers jQuery Summit - November 2010 51
  38. 38. jQuery, eCSStender & you Unity! One-off CSS scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers jQuery Summit - November 2010 52
  39. 39. Let’s make something awesome! I thought you’d never ask.
  40. 40. jQuery, eCSStender & you Pointless, but possible jQuery Summit - November 2010 54
  41. 41. jQuery, eCSStender & you Step 1: Dependencies <script type="text/javascript" src="eCSStender.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.EasyPhysics.js"></script> jQuery Summit - November 2010 55
  42. 42. jQuery, eCSStender & you Step 1: Dependencies // jquery.EasyPhysics.js EasyPhysics.Balloon = function( el ) { new PhysicalObject( el, // element 0, // velocity -0.5, // kinetic energy -0.1 // gravitational effect ); }; EasyPhysics.RubberBall = function( el ) { new PhysicalObject( el, 0, -0.8, 0.5 ); }; EasyPhysics.BowlingBall = function( el ) { new PhysicalObject( el, 1, -0.4, 0.9 ); }; jQuery Summit - November 2010 56
  43. 43. jQuery, eCSStender & you Step 2: Registration eCSStender.register( ); jQuery Summit - November 2010 57
  44. 44. jQuery, eCSStender & you Step 2: Registration eCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' }, ); jQuery Summit - November 2010 58
  45. 45. jQuery, eCSStender & you Step 2: Registration eCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' }, false, ); jQuery Summit - November 2010 59
  46. 46. jQuery, eCSStender & you Step 2: Registration eCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' }, false, function( selector, properties ){ var $el = $(selector); switch ( properties['-easy-physics-fill'] ) { case 'helium': new EasyPhysics.Balloon( $el ); break; case 'rubber': new EasyPhysics.RubberBall( $el ); break; case 'lead': new EasyPhysics.BowlingBall( $el ); break; } }); jQuery Summit - November 2010 60
  47. 47. jQuery, eCSStender & you Pointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; } jQuery Summit - November 2010 61
  48. 48. I love you you know. I know.
  49. 49. Does the browser support border-radius? Nope. isSupported()
  50. 50. jQuery, eCSStender & you isSupported() eCSStender.isSupported( 'property', 'visibility: hidden' ); // true eCSStender.isSupported( 'property', 'foo: bar' ); // false jQuery Summit - November 2010 64
  51. 51. jQuery, eCSStender & you isSupported() eCSStender.isSupported( 'property', 'visibility', 'hidden' ); // true eCSStender.isSupported( 'property', 'color', ['#000000','black','rgb(0,0,0)'] ); // true jQuery Summit - November 2010 65
  52. 52. jQuery, eCSStender & you isSupported() var el = document.createElement('b'), html = document.createElement('p'); html.appendChild(el); eCSStender.isSupported( 'selector', 'p b', html, el ); // true eCSStender.isSupported( 'selector', 'p ?? b', html, el ); // false jQuery Summit - November 2010 66
  53. 53. Can you make my CSS smarter? Of course.
  54. 54. jQuery, eCSStender & you Inline style sucks... <div style="display: none;"> <p>Some content</p> </div> jQuery Summit - November 2010 68
  55. 55. jQuery, eCSStender & you ...don’t do it! <div style="display: none;"> <p>Some content</p> </div> jQuery Summit - November 2010 69
  56. 56. jQuery, eCSStender & you makeUniqueClass() (function(){ var e = eCSStender, the_class = e.makeUniqueClass(), the_regex = /:checked/, classify = function() { var inputs = document.getElementsByTagName('input'), i = inputs.length; while ( i-- ) { if ( inputs[i].checked ) { e.addClass( inputs[i], the_class ); } else { e.removeClass( inputs[i], the_class ); } } }; // ... })(); excerpt from :checked CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.js jQuery Summit - November 2010 70
  57. 57. jQuery, eCSStender & you embedCSS() eCSStender.embedCSS( 'p { color: red; }', 'screen', false ); // embeds the declaration block in // a screen-specific stylesheet immediately jQuery Summit - November 2010 71
  58. 58. jQuery, eCSStender & you applyWeightedStyle() eCSStender.applyWeightedStyle( el, { 'visibility': 'hidden' }, 10 ); // el now has visibility: hidden set // with a specificity of 10 eCSStender.applyWeightedStyle( el, { 'visibility': 'visible' }, 1 ); // el is not set to visible because // the specificity is not high enough eCSStender.applyWeightedStyle( el, { 'visibility': 'visible' }, 10 ); // el is now “visible” because the specificity // is equal to the prior specificity eCSStender.applyWeightedStyle( el, { 'visibility': 'hidden' }, 100 ); // el is now “hidden” again because the // specificity is greater than the prior one jQuery Summit - November 2010 72
  59. 59. jQuery, eCSStender & you As flexible as possible function embed( selector, properties, medium ) { var style_block = '', prop; for ( prop in properties ) { if ( eCSStender.isInheritedProperty( properties, prop ) ) { continue; }; style_block += prop + ':' + properties[prop] + ';'; } if ( style_block != EMPTY ) { eCSStender.embedCSS( selector + '{' + style_block + '}', medium ); } } excerpt from CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.js jQuery Summit - November 2010 73
  60. 60. jQuery, eCSStender & you As flexible as possible function inline( selector, properties, medium, specificity ) { if ( medium != 'screen' ){ return; } try { var $els = $( selector ), i = $els.length; while ( i-- ) { eCSStender.applyWeightedStyle( $els[i], properties, specificity ); } $els = null; } catch(e) { // throw new Error( LIB_ERROR + selector ); } } excerpt from CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.js jQuery Summit - November 2010 74
  61. 61. jQuery, eCSStender & you As flexible as possible eCSStender.register( // ... function( selector, properties, medium, specificity ) { var calc = 'p:nth-child(2n+1)', d = div.cloneNode(true), p = para.cloneNode(true), func = inline; d.appendChild( p ); // embedding is the way to go if ( ( eCSStender.isSupported( 'selector', 'p:nth-child(odd)', d, p ) && ! eCSStender.isSupported( 'selector', calc, d, p ) && selector.match( /:nth-child(s*(?:even|odd)s*)/ ) != null ) || eCSStender.isSupported( 'selector', calc, d, p ) ) { func = embed; } func( selector, properties, medium, specificity ); return func; }); excerpt from :checked CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.js jQuery Summit - November 2010 75
  62. 62. jQuery, eCSStender & you addRules() var style = eCSStender.embedCSS( 'p { color: red; }', 'screen', false ); // ... eCSStender.addRules( style, 'p { color: blue; }' ); jQuery Summit - November 2010 76
  63. 63. Can you look something up for me? No problemo.
  64. 64. jQuery, eCSStender & you lookup() var matches = eCSStender.lookup( { selector: 'h1', specificity: { min: 0, max: 2 } }, '*' ); // looks for rules where the // selector includes an h1 and the // specificity is between 0 and 2 // e.g. // [ { medium: 'all' // selector: 'h1', // specificity: 1 // properties: { color: 'red' } // }, ... ] jQuery Summit - November 2010 78
  65. 65. Help make me better! MIT Licensed Fork: github.com/easy-designs/eCSStender.js Discuss: groups.google.com/group/ecsstender
  66. 66. jQuery, eCSStender & you by Aaron Gustafson Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 More on eCSStender: http://eCSStender.org @eCSStender flickr Photo Credits “Everyone loves books but I thought this was the dullest photo i had ever taken. I guess not.“ by boltron- “Sharing” by bengrey “Three wise monkeys” by Anderson Mancini “Chemcraft manual” by underwhelmer “crawfordmarketcarrotman” by Rigmarole “Röck!! on the right” by Adactio “Internals” by alexsnaps “Wood” by Joost J. Bakker IJmuiden “Tribute to Willy Puchner's ‘The Penguins Longing’” by Curnen http://flickr.com/photos/aarongustafson/galleries/72157625226185257/

×