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:

See the Pen CSS Units by Katy DeCorah (@katydecorah) on CodePen.

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.

To Jekyll

I decided to create a Jekyll gh-pages repository 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):

- length: em
  type: font-relative
  description: This unit is the calculated font-size of the element. If used on the font-size property itself, it is the inherited font-size of the element.

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:

{% for item in site.data.lengths %}
<div
  class="example-container"
  data-toggle="popover"
  data-content="{{item.description}}"
  title="{{ item.length }}, {{item.type}}"
>
  <div
    class="example"
    style="width: [[ unit ]]{{ item.length }}; height: [[ unit ]]{{ item.length }}"
    title="[[unit]]{{item.length}}"
  ></div>
</div>
{% endfor %}

To make content changes, I’ll update the Yaml. To make layout changes, I’ll update the HTML. Party .

The CSS Ruler

Feast your eyes on the live CSS Ruler or jump into the code.

p.s. Uncheck all the length types to unlock an Easter egg.