Way back in May, I built a pen based on MDN’s article to visualize and compare all CSS lengths. Here’s the original pen:
To store each length name and metadata, I created a multidimensional array in Haml that I looped through. I did this so I could easily change the markup output. I also used AngularJS for the functionality: to update the inputs and to toggle the types.
I decided to create a Jekyll gh-pages repo and open up the tool there. I exported the CodePen and created a local Jekyll site. Once I organized the files, I refactored my code to interpolate the AngularJS tags.
At first I copied and pasted the compiled HTML, but I knew it was going to be a pain to make any markup changes. I ended up reformatting the Haml array to Yaml (via regex find and replace):
I saved the file into the Jekyll
_data folder. Using a loop, I ran through each item and rebuilt markup output. My code looks something like this:
To make content changes, I’ll update the Yaml. To make layout changes, I’ll update the HTML. Party .
The CSS Ruler
p.s. Uncheck all the length types to unlock an Easter egg.