@moreonion/foundist 2.1.3 → 3.0.0

package/src/html/basic-action-page-with-banner.html

@@ -1,48 +1,48 @@
-<extends src="templates/action-page-with-banner.html">
+{% extends "src/html/templates/action-page.html" %}
 
-  <block name="page-title">Take action now!</block>
+{% set layout = "banner" %}
 
-  <block name="banner">
+{% block page_title %}Take action now!{% endblock %}
+
+{% block banner %}
     <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
-  </block>
+{% endblock %}
 
-  <block name="top">
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-  </block>
-
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/basic-action-page-with-callouts.html

@@ -1,48 +1,48 @@
-<extends src="templates/action-page.html">
+{% extends "src/html/templates/action-page.html" %}
 
-  <block name="messages">
+{% set layout = "default" %}
+
+{% block page_title %}Take action now!{% endblock %}
+
+{% block messages %}
     <div class="callout success" data-closable="">
-      <h2 class="show-for-sr">Status message</h2>
-      Some message with a <a href="#">link</a>.
-      <button class="close-button" aria-label="Dismiss alert" type="button" data-close=""></button>
+        <h2 class="show-for-sr">Status message</h2>
+        Some message with a <a href="#">link</a>.
+        <button class="close-button" aria-label="Dismiss alert" type="button" data-close=""></button>
     </div>
-  </block>
+{% endblock %}
 
-  <block name="page-title">Take action now!</block>
-
-  <block name="top">
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form-with-errors.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form-with-errors.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-  </block>
-
-</extends>
+{% endblock %}

package/src/html/basic-action-page.html

@@ -1,41 +1,40 @@
-<extends src="templates/action-page.html">
+{% extends "src/html/templates/action-page.html" %}
 
-  <block name="page-title">Take action now!</block>
+{% set layout = "default" %}
 
-  <block name="top">
+{% block page_title %}Take action now!{% endblock %}
+
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-
-  </block>
-
-</extends>
+{% endblock %}

package/src/html/build-index.html

@@ -0,0 +1,9 @@
+{% extends "./templates/base.html" %}
+
+{% block page %}
+    <section id="main">
+        <div class="grid-container narrow">
+            <h1>Impact Stack theme assets for {{ settings.site_name }}</h1>
+        </div>
+    </section>
+{% endblock %}

package/src/html/dev-index.html

@@ -0,0 +1,49 @@
+{% extends "./templates/page.html" %}
+
+{% block page_title %}{{ settings.site_name }}{% endblock %}
+
+{% block content %}
+    <p>Documentation for <a href="https://get.foundation/sites/docs/">Foundation</a></p>
+    <h2>Example pages</h2>
+    <ul class="no-bullet">
+        <li><a href="src/html/basic-action-page.html">Basic action page</a></li>
+        <li><a href="src/html/e2t-action-page.html">Email to target page</a></li>
+        <li><a href="src/html/donation-action-page.html">Donation page</a></li>
+        <li><a href="src/html/thank-you-page.html">Thank you page</a></li>
+        <li><a href="src/html/thank-you-page.html#overlay">Thank you page with overlay</a></li>
+        <li><a href="src/html/login-page.html">Login page</a></li>
+        <li><a href="src/html/teaser-page.html">Teasers</a></li>
+        <li><a href="src/html/basic-action-page-with-callouts.html">Basic action page with callout messages</a></li>
+        <li><a href="src/html/typography-static-page.html">Typographic elements</a></li>
+        <li><a href="src/html/snippets-demo.html">Snippets demo</a></li>
+    </ul>
+    <h3>Layout variations</h3>
+    <h4 class="h6">A: Standard (2 columns) &ensp;<small>default</small></h4>
+    <ul class="no-bullet">
+        <li><a href="src/html/basic-action-page.html">Basic action page</a></li>
+        <li><a href="src/html/basic-action-page-reversed.html">Basic action page reversed</a></li>
+        <li><a href="src/html/thank-you-page.html">Thank you page</a></li>
+    </ul>
+    <h4 class="h6">B: Banner image (2 columns) &ensp;<small>banner</small></h4>
+    <ul class="no-bullet">
+        <li><a href="src/html/basic-action-page-with-banner.html">Basic action page</a></li>
+        <li><a href="src/html/basic-action-page-with-banner-reversed.html">Basic action page reversed</a></li>
+        <li><a href="src/html/thank-you-page-with-banner.html">Thank you page</a></li>
+    </ul>
+    <h4 class="h6">C: Fixed background image (2 columns) &ensp;<small>cover-2col</small></h4>
+    <ul class="no-bullet">
+        <li><a href="src/html/basic-action-page-cover-2col.html">Basic action page</a></li>
+        <li><a href="src/html/basic-action-page-cover-2col-reversed.html">Basic action page reversed</a></li>
+        <li><a href="src/html/thank-you-page-cover-2col.html">Thank you page</a></li>
+    </ul>
+    <h4 class="h6">D: Fixed banner image (2 columns) &ensp;<small>cover-banner</small></h4>
+    <ul class="no-bullet">
+        <li><a href="src/html/basic-action-page-cover-banner.html">Basic action page</a></li>
+        <li><a href="src/html/thank-you-page-cover-banner.html">Thank you page</a></li>
+    </ul>
+    <h4 class="h6">E: Fixed background image (1 column) &ensp;<small>cover-1col</small></h4>
+    <ul class="no-bullet">
+        <li><a href="src/html/basic-action-page-cover-1col.html">Basic action page</a></li>
+        <li><a href="src/html/thank-you-page-cover-1col.html">Thank you page</a></li>
+    </ul>
+{% endblock %}

package/src/html/donation-action-page.html

@@ -1,33 +1,33 @@
-<extends src="templates/action-page.html">
+{% extends "src/html/templates/action-page.html" %}
 
-  <block name="page-title">Donate now!</block>
+{% set layout = "default" %}
 
-  <block name="top">
+{% block page_title %}Donate now!{% endblock %}
+
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
-    <h2>Donate now</h2>
+{% block form_intro %}
+    <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar-thermometer.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar-thermometer.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="donate-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/donate-form.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
-  </block>
-
-</extends>
+{% endblock %}

package/src/html/e2t-action-page.html

@@ -1,43 +1,40 @@
-<extends src="templates/action-page.html">
+{% extends "src/html/templates/action-page.html" %}
 
-  <block name="page-title">Email your MP!</block>
+{% set layout = "default" %}
 
-  <block name="top">
+{% block page_title %}Email your MP!{% endblock %}
+
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
-    <h2>Send your message now!</h2>
+{% block form_intro %}
+    <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
-
-  <block name="progress-bar">
-  </block>
+{% endblock %}
 
-  <block name="form">
-    <include src="e2t-single-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/e2t-single-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters-comments.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters-comments.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <div class="letter">
-      <h5>Give cats a chance</h5>
-      <p>A very wise cat once said: ignore the squirrels, you'll never catch them anyway. Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor.</p>
-      <p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p>
-      <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-      <p>Yours,<br>Kitty the Cat</p>
+        <h5>Give cats a chance</h5>
+        <p>A very wise cat once said: ignore the squirrels, you'll never catch them anyway. Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor.</p>
+        <p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p>
+        <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
+        <p>Yours,<br>Kitty the Cat</p>
     </div>
-  </block>
-
-</extends>
+{% endblock %}

package/src/html/includes/accordion.html

@@ -1,31 +1,31 @@
 <ul class="accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
-  <li class="accordion-item is-active" data-accordion-item>
-    <a href="#" class="accordion-title">Accordion 1</a>
+    <li class="accordion-item is-active" data-accordion-item>
+        <a href="#" class="accordion-title">Accordion 1</a>
 
-    <div class="accordion-content" data-tab-content>
-      <p>Panel 1. Lorem ipsum dolor</p>
-      <p>Starts in the open state due to using the <code>is-active</code> state class.</p>
-    </div>
-  </li>
+        <div class="accordion-content" data-tab-content>
+            <p>Panel 1. Lorem ipsum dolor</p>
+            <p>Starts in the open state due to using the <code>is-active</code> state class.</p>
+        </div>
+    </li>
 
-  <li class="accordion-item" data-accordion-item>
-    <a href="#" class="accordion-title">Accordion 2 has a very long and not very interesting title (but it wraps the line to see how it is wrapping)</a>
+    <li class="accordion-item" data-accordion-item>
+        <a href="#" class="accordion-title">Accordion 2 has a very long and not very interesting title (but it wraps the line to see how it is wrapping)</a>
 
-    <div class="accordion-content" data-tab-content>
-      <p>Panel 2. Lorem ipsum dolor</p>
-      <a href="#">Nowhere to Go</a>
-    </div>
-  </li>
+        <div class="accordion-content" data-tab-content>
+            <p>Panel 2. Lorem ipsum dolor</p>
+            <a href="#">Nowhere to Go</a>
+        </div>
+    </li>
 
-  <li class="accordion-item" data-accordion-item>
-    <a href="#" class="accordion-title">Accordion 3</a>
+    <li class="accordion-item" data-accordion-item>
+        <a href="#" class="accordion-title">Accordion 3</a>
 
-    <div class="accordion-content" data-tab-content>
-      <p>Panel 3. Lorem ipsum dolor</p>
-      <ol>
-        <li>This is an ordered list</li>
-        <li>It is the last item in the accordion container</li>
-      </ol>
-    </div>
-  </li>
-</ul>
+        <div class="accordion-content" data-tab-content>
+            <p>Panel 3. Lorem ipsum dolor</p>
+            <ol>
+                <li>This is an ordered list</li>
+                <li>It is the last item in the accordion container</li>
+            </ol>
+        </div>
+    </li>
+</ul>

package/src/html/includes/basic-form-with-errors.html

@@ -1,28 +1,30 @@
+{% from "./form-items/_macros.html" import input, select, button %}
+
 <div id="form">
-  <!-- serverside error -->
-  <div class="callout alert" data-closable="">
-    <h2 class="show-for-sr">Error message</h2>
-    <ul>
-      <li>First name field is required.</li>
-      <li>Last name field is required.</li>
-      <li>Email address field is required.</li>
-      <li>Do you want to receive our newsletter? field is required.</li>
-    </ul>
-    <button class="close-button" aria-label="Dismiss alert" type="button" data-close=""></button>
-  </div>
-  <!-- client side error that’s not displayed on the field -->
-  <div class="messages error clientside-error">
-    <ul>
-      <li>
-        <label for="email" generated="true" class="error">The value in Email address is not a valid email address.</label>
-      </li>
-    </ul>
-  </div>
-  <!-- form with clientside validation errors on individual fields -->
-  <form method="post" accept-charset="UTF-8" novalidate="novalidate">
-    <include src="form-items/text-with-error.html"></include>
-    <include src="form-items/select-with-error.html"></include>
-    <include src="form-items/radios-with-error.html"></include>
-    <include src="form-items/submit-button.html" locals='{"value": "Take action now!"}'></include>
-  </form>
+    <!-- serverside error -->
+    <div class="callout alert" data-closable="">
+        <h2 class="show-for-sr">Error message</h2>
+        <ul>
+            <li>First name field is required.</li>
+            <li>Last name field is required.</li>
+            <li>Email address field is required.</li>
+            <li>Do you want to receive our newsletter? field is required.</li>
+        </ul>
+        <button class="close-button" aria-label="Dismiss alert" type="button" data-close=""></button>
+    </div>
+    <!-- client side error that’s not displayed on the field -->
+    <div class="messages error clientside-error">
+        <ul>
+            <li>
+                <label for="email" generated="true" class="error">The value in Email address is not a valid email address.</label>
+            </li>
+        </ul>
+    </div>
+    <!-- form with clientside validation errors on individual fields -->
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {{ input("Textfield", error="Some error message for this field.") }}
+        {{ select("Country", error="That’s not right.", hide_label=true) }}
+        {% include "./form-items/radios-with-error.html" %}
+        {{ button("Take action now!", class="expanded primary button large")}}
+    </form>
 </div>

package/src/html/includes/basic-form.html

@@ -1,9 +1,13 @@
+{% from "./form-items/_macros.html" import input, select, hidden, button %}
+
 <div id="form">
-  <form method="post" accept-charset="UTF-8" novalidate="novalidate">
-    <include src="form-items/first-name.html"></include>
-    <include src="form-items/email.html"></include>
-    <include src="form-items/country-select.html"></include>
-    <include src="form-items/opt-in-radios.html"></include>
-    <include src="form-items/submit-button.html" locals='{"value": "Take action now!"}'></include>
-  </form>
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {{ input("First name", {size: 60, maxlength: 128, placeholder: "First name"}) }}
+        {{ input("Last name", {size: 60, maxlength: 128}) }}
+        {{ input("Email address", {type: "email", id: "email", size: 60, required: "required"}) }}
+        {{ select("Country", hide_label=true) }}
+        {% include "./form-items/opt-in-radios.html" %}
+        {{ hidden("token") }}
+        {{ button("Take action now!", class="expanded primary button large") }}
+    </form>
 </div>

package/src/html/includes/cookiebar.html

@@ -1,7 +1,7 @@
 <section id="cookiebar">
-  <div class="grid-container">
-    <p>Cats can’t have cookies! Says who? <a href="#">More info</a></p>
-    <button data-block class="small secondary button">Meow</button>
-    <button data-accept class="small button">OK</button>
-  </div>
+    <div class="grid-container">
+        <p>Cats can’t have cookies! Says who? <a href="#">More info</a></p>
+        <button data-block class="small secondary button">Meow</button>
+        <button data-accept class="small button">OK</button>
+    </div>
 </section>

package/src/html/includes/donate-form.html

@@ -1,13 +1,13 @@
-<div id="form">
-  <form method="post" accept-charset="UTF-8" novalidate="novalidate">
-    <include src="form-items/donation-interval.html"></include>
-    <include src="form-items/donation-amount.html"></include>
-    <include src="form-items/giftaid.html"></include>
-    <br>
-    <include src="form-items/paymethod-selector.html"></include>
-
-    <include src="form-items/submit-button.html" locals='{"value": "Donate now"}'></include>
+{% from "./form-items/_macros.html" import button %}
 
-    <include src="form-items/payment-icons.html"></include>
-  </form>
+<div id="form">
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {% include "./form-items/donation-interval.html" %}
+        {% include "./form-items/donation-amount.html" %}
+        {% include "./form-items/giftaid.html" %}
+        <br>
+        {% include "./form-items/paymethod-selector.html" %}
+        {{ button("Donate now!", class="expanded primary button large") }}
+        {% include "./form-items/payment-icons.html" %}
+    </form>
 </div>