Skip to content

Commit 979b5bc

Browse files
oleersoyoleersoy
authored
Update README.md
1 parent ca66685 commit 979b5bc

File tree

1 file changed

+31
-25
lines changed

1 file changed

+31
-25
lines changed

‎README.md

+31-25
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# superfly-css-task-test
22

33
The [superfly-css-task-test](https://github.com/superfly-css/superfly-css-task-test):
4+
- Supports nunjucks templating
45
- Highlights content contained in `Test-markup`
56
- Generates a corresponding `Test-render` block that displays the markup contained in the `Test-markup` block
67

@@ -20,7 +21,7 @@ Build the test `src/test/html/index.html` by running:
2021
``` console
2122
gulp test:css
2223
```
23-
The prebuilt contents are shown below. Once `src/test/html/index.html` is built the markup contained in `Test-markup` will be highlighted, and a corresponding `Test-render` block will be generated after the `Test-then` block.
24+
The prebuilt contents are shown below. Once `src/test/html/index.html` is built the markup contained in `Test-markup` will be highlighted, and a corresponding `Test-render` block will be generated after the `Test-then` block.
2425

2526
```html
2627
<html>
@@ -32,23 +33,23 @@ The prebuilt contents are shown below. Once `src/test/html/index.html` is built
3233
</head>
3334
<body>
3435
<div class="Test">
35-
<h1 class="Test-suite">Superfly CSS <a href="https://github.com/superfly-css/superfly-css-components-grid">Grid Component</a> Tests</h1>
36-
<h2 class="Test-context">.Grid, Grid-cell</h2>
3736
<h3 class="Test-when">When the <code>.Grid</code> container holds 2 <code>.Grid-cell</code> instances:</h3>
3837
<!--Markup contained by the code block is escaped and highlighted by gulp-highlight-->
39-
<pre class="Test-markup"><code class="html">
40-
<div class="Grid">
41-
<div class="Grid-cell">1/2</div>
42-
<div class="Grid-cell">2/2</div>
43-
</div>
44-
</code></pre>
45-
38+
<pre class="Test-markup">
39+
<code class="html">
40+
<div class="Grid">
41+
<!-- Use Nunjucks to keep markup DRY -->
42+
{% for cell in ['1', '2'] %}
43+
<div class="Grid-cell">{{cell}}/2</div>
44+
{% endfor %}
45+
</div>
46+
</code>
47+
</pre>
4648
<h3 id="then" class="Test-then">Each grid cell occupies the same amount of space witin the grid container row.</h3>
4749
</div>
4850
</body>
4951
</html>
5052
```
51-
5253
Post build the test file looks like this:
5354

5455
```html
@@ -61,24 +62,29 @@ Post build the test file looks like this:
6162
</head>
6263
<body>
6364
<div class="Test">
64-
<h1 class="Test-suite">Superfly CSS <a href="https://github.com/superfly-css/superfly-css-components-grid">Grid Component</a> Tests</h1>
65-
<h2 class="Test-context">.Grid, Grid-cell</h2>
66-
<h3 class="Test-when">When the <code><span class="hljs-title">.Grid</span></code> container holds 2 <code><span class="hljs-title">.Grid-cell</span></code> instances:</h3>
65+
<h3 class="Test-when">When the <code class="hljs"><span class="hljs-title">.Grid</span></code> container holds 2 <code class="hljs"><span class="hljs-title">.Grid-cell</span></code> instances:</h3>
6766
<!--Markup contained by the code block is escaped and highlighted by gulp-highlight-->
68-
<pre class="Test-markup"><code class="html">
69-
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">&quot;Grid&quot;</span>&gt;
70-
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">&quot;Grid-cell&quot;</span>&gt;<span class="hljs-number">1</span>/<span class="hljs-number">2</span>&lt;/<span class="hljs-keyword">div</span>&gt;
71-
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">&quot;Grid-cell&quot;</span>&gt;<span class="hljs-number">2</span>/<span class="hljs-number">2</span>&lt;/<span class="hljs-keyword">div</span>&gt;
72-
&lt;/<span class="hljs-keyword">div</span>&gt;
73-
</code></pre>
74-
67+
<pre class="Test-markup">
68+
<code class="html hljs">
69+
&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"Grid"</span>&gt;
70+
71+
&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"Grid-cell"</span>&gt;<span class="hljs-number">1</span>/<span class="hljs-number">2</span>&lt;/<span class="hljs-keyword">div</span>&gt;
72+
73+
&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"Grid-cell"</span>&gt;<span class="hljs-number">2</span>/<span class="hljs-number">2</span>&lt;/<span class="hljs-keyword">div</span>&gt;
74+
75+
&lt;/<span class="hljs-keyword">div</span>&gt;
76+
</code>
77+
</pre>
7578
<h3 id="then" class="Test-then">Each grid cell occupies the same amount of space witin the grid container row.</h3>
7679
<div class="Test-render">
77-
<div class="Grid">
78-
<div class="Grid-cell">1/2</div>
79-
<div class="Grid-cell">2/2</div>
80+
<div class="Grid">
81+
82+
<div class="Grid-cell">1/2</div>
83+
84+
<div class="Grid-cell">2/2</div>
85+
86+
</div>
8087
</div>
81-
</div>
8288
</div>
8389
</body>
8490
</html>

0 commit comments

Comments
 (0)