Merge pull request #4 from EvanLovely/feature/show-unique-twig-features

show unique twig features

dist/_macros/forms.twig

@@ -0,0 +1,21 @@
+{% macro input(name, type, classes, label, placeholder, value, size, required) %}
+    {% set show_label = label|default(true) %}
+    <div class="field-container {{ classes }}">
+        {% if show_label %}
+            <label class="{{ classes }}">{{ label|default(name|title) }}{% if required %}<abbr title="Required">*</abbr>{% endif %}
+        {% endif %}
+        <input type="{{ type|default('text') }}" name="{{ name }}" placeholder="{{ placeholder|default(name|title) }}" value="{{ value|e }}" size="{{ size|default(20) }}"{% if required %} required{% endif %} />
+        {% if show_label %}</label>{% endif %}
+    </div>
+{% endmacro %}
+
+{% macro textarea(label, placeholder, rows, classes) %}
+    {% set show_label = label|default(true) %}
+    <div class="field-container {{ classes }}">
+        {% if show_label %}
+            <label class="{{ classes }}">{{ label|default(name|title) }}{% if required %}<abbr title="Required">*</abbr>{% endif %}
+        {% endif %}
+        <textarea placeholder="{{ placeholder|default(name|title) }}" rows="{{ rows|default(8) }}"{% if required %} required{% endif %}></textarea>
+        {% if show_label %}</label>{% endif %}
+    </div>
+{% endmacro %}

dist/_patterns/00-atoms/05-forms/00-text-fields.twig

@@ -1,38 +1,13 @@
+{% import "forms.twig" as forms %}
 <fieldset>
-    <div class="field-container">
-        <label for="text">Text Input <abbr title="Required">*</abbr></label>
-        <input id="text" type="text" placeholder="Text Input">
-    </div>
-    <div class="field-container">
-        <label for="password">Password</label>
-        <input id="password" type="password" placeholder="Type your Password">
-    </div>
-    <div class="field-container">
-        <label for="webaddress">Web Address</label>
-        <input id="webaddress" type="url" placeholder="http://yoursite.com">
-    </div>
-    <div class="field-container">
-        <label for="emailaddress">Email Address</label>
-        <input id="emailaddress" type="email" placeholder="[email protected]">
-    </div>
-    <div class="field-container">
-        <label for="search">Search</label>
-        <input id="search" type="search" placeholder="Enter Search Term">
-    </div>
-    <div class="field-container">
-        <label for="text">Number Input <abbr title="Required">*</abbr></label>
-        <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
-    </div>
-    <div class="field-container">
-        <label for="textarea">Textarea</label>
-        <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
-    </div>
-    <div class="field-container">
-        <label class="error">Error Input</label>
-        <input class="is-error" type="text" placeholder="Text Input">
-    </div>
-    <div class="field-container">
-        <label  class="valid">Valid</label>
-        <input  class="is-valid" type="text" placeholder="Text Input">
-    </div>
-</fieldset>
+    {{ forms.input('Text Input') }}
+    {{ forms.input('Password', 'password') }}
+    {{ forms.input('Web Address', 'url') }}
+    {{ forms.input('Email', 'email') }}
+    {{ forms.input('Search', 'search') }}
+    {{ forms.input('Number', 'number') }}
+    {{ forms.input('Number', 'number') }}
+    {{ forms.textarea('Textarea', 'Enter your message here') }}
+    {{ forms.input('Error Input', 'text', 'error') }}
+    {{ forms.input('Valid Input', 'text', 'valid') }}
+</fieldset>

dist/_patterns/03-templates/00-layouts/00-site.twig

@@ -0,0 +1,9 @@
+<div class="page" id="page">
+    {% include "organisms-header" %}
+    <div role="main">
+        {% block hero %}{% endblock %}
+        {% block title %}{% endblock %}
+        {% block content %}{% endblock %}
+    </div><!--End role=main-->
+    {% include "organisms-footer" %}
+</div>

dist/_patterns/03-templates/00-layouts/01-page-1col.twig

@@ -0,0 +1,10 @@
+{% extends "templates-site" %}
+{% block content %}
+<div class="l-one-col">
+    <div class="l-main">
+        {% block main %}
+            <p>Content Placeholder</p>
+        {% endblock %}
+    </div>
+</div>
+{% endblock %}

dist/_patterns/03-templates/00-layouts/01-page-2col.twig

@@ -0,0 +1,15 @@
+{% extends "templates-site" %}
+{% block content %}
+<div class="l-two-col">
+    <div class="l-main">
+        {% block main %}
+            <p>Content Placeholder</p>
+        {% endblock %}
+    </div>
+    <div class="l-sidebar">
+        {% block sidebar %}
+            <h3>Sidebar</h3>
+        {% endblock %}
+    </div>
+</div>
+{% endblock %}

dist/_patterns/03-templates/01-homepage.twig

@@ -0,0 +1,35 @@
+{% extends "templates-page-2col" %}
+{% block hero %}
+    {% if emergency %}
+        {% include "molecules-alert" with emergency %}
+    {% endif %}
+    {% if hero %}
+        {% include "molecules-block-hero" %}
+    {% endif %}
+
+    <div class="g g-3up">
+        {% for tout in touts %}
+            <div class="gi">
+                {% include "molecules-block-inset" %}
+            </div>
+        {% endfor %}
+    </div><!--end 3up-->
+
+    <hr/>
+{% endblock %}
+
+{% block main %}
+    <section class="section latest-posts">
+        <h2 class="section-title">Latest Posts</h2>
+        <ul class="post-list">
+            {% for post in latest_posts %}
+                <li>{% include "molecules-media-block" %}</li>
+            {% endfor %}
+        </ul>
+        <a href="#" class="text-btn">View more posts</a>
+    </section>
+{% endblock %}
+
+{% block sidebar %}
+    {% include "organisms-recent-tweets" %}
+{% endblock %}

dist/_patterns/03-templates/02-blog.twig

@@ -0,0 +1,11 @@
+{% extends "templates-site" %}
+{% block title %}<h1 class="section-title">Our Outdoor Blog</h1>{% endblock %}
+
+{% block main %}
+    {% include "organisms-latest-posts" %}
+    {% include "molecules-pagination" %}
+{% endblock %}
+
+{% block sidebar %}
+    {% include "organisms-recent-tweets" %}
+{% endblock %}

dist/_patterns/03-templates/03-article-2col.twig

@@ -0,0 +1,12 @@
+{% extends "templates-page-1col" %}
+{% block main %}
+    <article class="article">
+        <header class="article-header">
+            <h1>Article Headline Lorem ipsum dolor sit aweofij</h1>
+            {% include "molecules-byline" %}
+        </header>
+        {% include "organisms-article-body" %}
+    </article><!--end .article-->
+    {% include "molecules-social-share" %}
+    {% include "organisms-comment-thread" %}
+{% endblock %}

dist/_patterns/03-templates/03-article.twig

@@ -0,0 +1,17 @@
+{% extends "templates-page-2col" %}
+{% block main %}
+    <article class="article">
+        <header class="article-header">
+            <h1>Article Headline Lorem ipsum dolor sit aweofij</h1>
+            {% include "molecules-byline" %}
+        </header>
+        {% include "organisms-article-body" %}
+    </article><!--end .article-->
+    {% include "molecules-social-share" %}
+    {% include "organisms-comment-thread" %}
+{% endblock %}
+
+{% block sidebar %}
+    {% include "organisms-related-posts" %}
+    {% include "organisms-recent-tweets" %}
+{% endblock %}

dist/_patterns/04-pages/00-homepage~emergency.json

@@ -1,6 +1,6 @@
 {
 	"emergency": {
-		"alertClass" : "error",
+		"styleModifier" : "error",
 		"excerpt" : {
 			"short" : "Emergency! This is a variation of the core homepage template."
 		}