We have these CSS border style variants:

['none','dotted','dashed','solid','double',
 'groove','ridge','inset','outset','initial','inherit']

We want to see what they look like when applied to a black border with with 2px.

Approach

Install the @superflycss/cli, create a new project, and start the live reload server:

npm i -g @superflycss/cli
sfc new project
cd project
sfc serve

Edit the prototype src/test/html/index.html template and add the nunjucks loop over the border style:

<body style="margin: 4rem;">
    <h1>Start Prototyping!</h1>

    {% for style in
    ['none','dotted','dashed','solid','double','groove','ridge','inset','outset','initial','inherit'] %}
    <div style="border-width: 2px; 
                    margin-bottom: 1rem; 
                    width: 40px; 
                    height: 20px;
                    border-style: {{style}}"
        ;> </div>
    {%- endfor %}
</body>

Start the live reload server sfc s. We can now see what styles look like.

Using NunJucks Loops with SuperflyCSS | Task

Scenario

Approach