Needs documentation…
<div class="clearfix">
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bx1px"></div>
<div class="sans-s5 fw700">border-x</div>
<div class="mono-s3 fw300">.bx1px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bx2px"></div>
<div class="sans-s5 fw700">border-x</div>
<div class="mono-s3 fw300">.bx2px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bx05"></div>
<div class="sans-s5 fw700">border-x</div>
<div class="mono-s3 fw300">.bx05</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bx1"></div>
<div class="sans-s5 fw700">border-x</div>
<div class="mono-s3 fw300">.bx1</div>
</div>
</div>
<div class="clearfix">
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream by1px"></div>
<div class="sans-s5 fw700">border-y</div>
<div class="mono-s3 fw300">.by1px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream by2px"></div>
<div class="sans-s5 fw700">border-y</div>
<div class="mono-s3 fw300">.by2px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream by05"></div>
<div class="sans-s5 fw700">border-y</div>
<div class="mono-s3 fw300">.by05</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream by1"></div>
<div class="sans-s5 fw700">border-y</div>
<div class="mono-s3 fw300">.by1</div>
</div>
</div>
<div class="clearfix">
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bt1px"></div>
<div class="sans-s5 fw700">border-top</div>
<div class="mono-s3 fw300">.bt1px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bt2px"></div>
<div class="sans-s5 fw700">border-top</div>
<div class="mono-s3 fw300">.bt2px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bt05"></div>
<div class="sans-s5 fw700">border-top</div>
<div class="mono-s3 fw300">.bt05</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bt1"></div>
<div class="sans-s5 fw700">border-top</div>
<div class="mono-s3 fw300">.bt1</div>
</div>
</div>
<div class="clearfix">
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream br1px"></div>
<div class="sans-s5 fw700">border-right</div>
<div class="mono-s3 fw300">.br1px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream br2px"></div>
<div class="sans-s5 fw700">border-right</div>
<div class="mono-s3 fw300">.br2px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream br05"></div>
<div class="sans-s5 fw700">border-right</div>
<div class="mono-s3 fw300">.br05</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream br1"></div>
<div class="sans-s5 fw700">border-right</div>
<div class="mono-s3 fw300">.br1</div>
</div>
</div>
<div class="clearfix">
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bb1px"></div>
<div class="sans-s5 fw700">border-bottom</div>
<div class="mono-s3 fw300">.bb1px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bb2px"></div>
<div class="sans-s5 fw700">border-bottom</div>
<div class="mono-s3 fw300">.bb2px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bb05"></div>
<div class="sans-s5 fw700">border-bottom</div>
<div class="mono-s3 fw300">.bb05</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bb1"></div>
<div class="sans-s5 fw700">border-bottom</div>
<div class="mono-s3 fw300">.bb1</div>
</div>
</div>
<div class="clearfix">
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bl1px"></div>
<div class="sans-s5 fw700">border-left</div>
<div class="mono-s3 fw300">.bl1px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bl2px"></div>
<div class="sans-s5 fw700">border-left</div>
<div class="mono-s3 fw300">.bl2px</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bl05"></div>
<div class="sans-s5 fw700">border-left</div>
<div class="mono-s3 fw300">.bl05</div>
</div>
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream bl1"></div>
<div class="sans-s5 fw700">border-left</div>
<div class="mono-s3 fw300">.bl1</div>
</div>
</div>
{% for option in options %}
<div class="clearfix">
{% for border in borders %}
<div class="float-left m1 w20 h15 mb4">
<div class="h10 mb1 bg-cream {{ option.optionCode }}{{ border.borderCode }}"></div>
<div class="sans-s5 fw700">{{ option.optionName }}</div>
<div class="mono-s3 fw300">.{{ option.optionCode }}{{ border.borderCode }}</div>
</div>
{% endfor %}
</div>
{% endfor %}
{
"colors": [
{
"colorName": "red"
},
{
"colorName": "blue"
},
{
"colorName": "gold"
},
{
"colorName": "green"
},
{
"colorName": "brightmint"
},
{
"colorName": "cream"
},
{
"colorName": "trueblack"
},
{
"colorName": "textblack"
},
{
"colorName": "darkgray"
},
{
"colorName": "mediumgray"
},
{
"colorName": "mediumgray-trans"
},
{
"colorName": "lightgray"
},
{
"colorName": "lightestgray"
},
{
"colorName": "white"
}
],
"borders": [
{
"border": null,
"borderName": "1px",
"borderCode": "1px"
},
{
"border": null,
"borderName": "2px",
"borderCode": "2px"
},
{
"border": null,
"borderName": "4px",
"borderCode": "05"
},
{
"border": null,
"borderName": "8px",
"borderCode": "1"
}
],
"options": [
{
"option": null,
"optionName": "border-x",
"optionCode": "bx"
},
{
"option": null,
"optionName": "border-y",
"optionCode": "by"
},
{
"option": null,
"optionName": "border-top",
"optionCode": "bt"
},
{
"option": null,
"optionName": "border-right",
"optionCode": "br"
},
{
"option": null,
"optionName": "border-bottom",
"optionCode": "bb"
},
{
"option": null,
"optionName": "border-left",
"optionCode": "bl"
}
]
}