adding template support for items

4 files changed, 83 insertions, 70 deletions

diff --git a/exampleSite/data/items.yml b/exampleSite/data/items.yml
new file mode 100644
index 0000000..8408af3
--- /dev/null
+++ b/exampleSite/data/items.yml
@@ -0,0 +1,65 @@
+title : "Items"
+content: |
+  This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-items">details</a>).
+style: "style1 medium onscroll-fade-in"
+items:
+  # feature item loop
+  - name : "One"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "style2 major fa-gem"
+
+  # feature item loop
+  - name : "Two"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-save"
+    
+  # feature item loop
+  - name : "Three"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-chart-bar"
+    
+  # feature item loop
+  - name : "Four"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-wifi"
+    
+  # feature item loop
+  - name : "Five"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-cog"
+    
+  # feature item loop
+  - name : "Six"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "style2 major fa-paper-plane"
+    
+  # feature item loop
+  - name : "Seven"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-desktop"
+    
+  # feature item loop
+  - name : "Eight"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-sync-alt"
+    
+  # feature item loop
+  - name : "Nine"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-hashtag"
+    
+  # feature item loop
+  - name : "Ten"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-bolt"
+    
+  # feature item loop
+  - name : "Eleven"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "style2 major fa-envelope"
+    
+  # feature item loop
+  - name : "Twelve"
+    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
+    style : "solid style2 major fa-leaf"
+    
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index e795826..bb99203 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -20,7 +20,7 @@
 			{{ partial "spotlight" site.Data.spotlight2 }}
 			{{ partial "spotlight" site.Data.spotlight3 }}
 			{{ partial "gallery" . }}
-			{{ partial "items" . }}
+			{{ partial "items" site.Data.items }}
 			{{ partial "elements" . }}
 			{{ partial "elements_reference" . }}
 			{{ partial "template/footer" . }}
diff --git a/layouts/partials/item.html b/layouts/partials/item.html
new file mode 100644
index 0000000..f3c5568
--- /dev/null
+++ b/layouts/partials/item.html
@@ -0,0 +1,5 @@
+<section>
+    <span class="icon {{ .style }}"></span>
+    <h3>{{ .name }}</h3>
+    <p>{{ .content }}</p>
+</section>
diff --git a/layouts/partials/items.html b/layouts/partials/items.html
index 042392d..2c100d1 100644
--- a/layouts/partials/items.html
+++ b/layouts/partials/items.html
@@ -1,69 +1,12 @@
-				<!-- Items -->
-                <section class="wrapper style1 align-center">
-                    <div class="inner">
-                        <h2>Items</h2>
-                        <p>This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-items">details</a>).</p>
-                        <div class="items style1 medium onscroll-fade-in">
-                            <section>
-                                <span class="icon style2 major fa-gem"></span>
-                                <h3>One</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-save"></span>
-                                <h3>Two</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-chart-bar"></span>
-                                <h3>Three</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-wifi"></span>
-                                <h3>Four</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-cog"></span>
-                                <h3>Five</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon style2 major fa-paper-plane"></span>
-                                <h3>Six</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-desktop"></span>
-                                <h3>Seven</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-sync-alt"></span>
-                                <h3>Eight</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-hashtag"></span>
-                                <h3>Nine</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-bolt"></span>
-                                <h3>Ten</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon style2 major fa-envelope"></span>
-                                <h3>Eleven</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                            <section>
-                                <span class="icon solid style2 major fa-leaf"></span>
-                                <h3>Twelve</h3>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
-                            </section>
-                        </div>
-                    </div>
-                </section>
\ No newline at end of file
+<!-- Items -->
+<section class="wrapper style1 align-center">
+    <div class="inner">
+        {{ with .title }}<h2>{{ . }}</h2>{{ end }}
+        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
+        <div class="items {{ .style }}">
+            {{ range .items }}
+                {{ partial "item" . }}
+            {{ end }}
+        </div>
+    </div>
+</section>
\ No newline at end of file