Generate SVG-template in HAML

Download: 
AttachmentSize
gridsystem.svg6.58 KB

This is just to share the idea: in order to get a system of Adobe Illustrator-guides for my grid-system, I created a HAML file that generates a SVG file. Then, I open it in AI and convert the lines to guides. This allows me to dynamically generate grid-systems with 'weird' parameters, in my case a version of the Twitter-bootstrap grid with 24 instead of 12 columns and a 6px margin.

HAML

!!! XML
!!!
%svg{ :width => "1400px", :height => "1200px", "xmlns:svg" => "http://www.w3.org/2000/svg", :xmlns => "http://www.w3.org/2000/svg" }
	%title Grid system template  
	%desc  path that draws a triangle
	- n = 24
	- G = 6
	- W = 1200 - G
	- C = W / n
	- offset = 100
	- (0...n).each do |i|
		%path{ "d" => "M #{offset + i*C}  0 l 0 1200"        , "style" => "fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" , "id" => "c-#{i}"  }
		%path{ "d" => "M #{offset + i*C + G} 0 l 0 1200"     , "style" => "fill:none;stroke:#808080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" , "id" => "ml-#{i}"  }
		%path{ "d" => "M #{offset + i*C + C - G} 0 l 0 1200" , "style" => "fill:none;stroke:#808080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" , "id" => "mr-#{i}"  }
	
	%path{ "d" => "M  #{offset + n*C} 0 l 0 1200", "style" => "fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" }

SVG

<!DOCTYPE html>
<svg height='1200px' width='1400px' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'>
<title>Grid system template</title>
<desc>path that draws a triangle</desc>
<path d='M 100 0 l 0 1200' id='c-0' style='fill:none;stroke:#000000;stroke-width:1px;'</path>
<path d='M 106 0 l 0 1200' id='ml-0' style='fill:none;stroke:#808080;stroke-width:1px;'</path>
<path d='M 143 0 l 0 1200' id='mr-0' style='fill:none;stroke:#808080;stroke-width:1px;'</path>
<path d='M 149 0 l 0 1200' id='c-1' style='fill:none;stroke:#000000;stroke-width:1px;'</path>
<path d='M 155 0 l 0 1200' id='ml-1' style='fill:none;stroke:#808080;stroke-width:1px;'</path>
<path d='M 192 0 l 0 1200' id='mr-1' style='fill:none;stroke:#808080;stroke-width:1px;'</path> (...)