From Haml to Yaml

From Haml to Yaml

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 :tada:.

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.


Did you enjoy this post? Support Black Girls Code. Black Girls Code's empowers young women of color ages 7-17 to embrace the current tech marketplace as builders and creators.