Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Feb 25th, 2013  |  syntax: None  |  size: 1.83 KB  |  views: 38  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. positioning:
  2.  
  3. # initialise at 0,0 of the parent viewport
  4. Need to do:
  5. 1) move relative to parent viewport - 4 sides
  6. 2) move relative to a sibling (i.e next to 'foo' +/- margin)
  7.  
  8. %vp(id, how, [margin])
  9.  where:
  10.     id = sibling id to align with (or - for parent)
  11.     how is 'left-of', 'right-of' 'above' 'below' 'inside' or similar
  12.     margin is how many pixels to offset, 0 for default
  13.  
  14.  
  15. Sizing is more difficult.
  16.  Needs to:
  17. 1) size relative to the parent viewport
  18. 2) size relative to a sibling
  19. 3) size to some other tag (i.e string length, or indent size)
  20.  
  21. %vs(axis, what, [margin])
  22.  
  23. axis - 'width' or 'height'
  24. what is either a sibling name, - for the parent, or a tag (%sl())
  25. margin is percentage or pixels to size, 0px/100% being default
  26.  
  27.  
  28. full example.
  29.  
  30. %sl(a) = length of the text a
  31. %Lx(b) - list indent count, b is the pixels per indent
  32. %lh - line (font) height
  33.  
  34. %V(0,0,-,-,1)           # full viewport
  35. %vc(item)               # child viewport to size each item, initialed to 0,0 of the parent
  36. %vs(height, %lh, 120%)  # make the item 120% font height, 10% height border
  37. %vs(width, -)           # make it the full width of the viewport
  38. #
  39. %vc(indent)             # indent child viewport (if needed)
  40. %vp(item, inside, 0, 0) # position at the (0,0) of the 'item' child vp
  41. %vs(width, %Lx(8))      # Make it the indent width
  42. #
  43. %vc(image)              # image child viewport
  44. %vp(indent, right-of)   # put next to the indent child
  45. %vs(height, item)       # copy 'item' sibling height
  46. %vs(width, 20)          # 20 pixels wide
  47. %Li                     # list item "icon"
  48. #
  49. %vc(text)               # child for the text
  50. %vs(height, %lh, 100%)  # set to line height
  51. %vp(image, right-of)    # put next to the image viewport
  52. %vp(item, vcenter)      # vertically center inside the item child
  53. %Lt                     # Text for the line item