default barba.js module!

CHANGELOG.MD

@@ -17,6 +17,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Default social links component
 - New FB icon
 - Gulp-Data + Nunjucks module
+- Njks header component
+- Button component
+- Theming changes to use tailwind classes instead of pre-defined classes
 
 ## 2.1.5
 ### Changed

_gulp/html/_layout/header.njk

@@ -1,9 +1,32 @@
 <header class="header">
-    <a href="#">
-        {% set icon = {
-            symbol: 'ncp-logo',
-            size: 'lg'
-        } %}
-        {% include 'elements/icon.njk' %}
-    </a>
-</header>
+	<div class="container header__inner">
+
+
+                {# <div class="grid md:grid-cols-12 gap-6 md:gap-0">
+                    <div class="md:col-span-6 text-white"> #}
+
+
+		<div class="grid grid-cols-4 sm:grid-cols-12 header__grid">
+            <div class="col-span-3 sm:col-span-4">
+                <h1 class="h3">
+    				<a href="/" class="header__logo">JayPack</a>
+                </h1>
+			</div>
+            <div class="col-span-1 sm:col-span-8">
+				<nav class="menu hidden sm:block">
+					<ul class="menu__list">
+						<li class="menu__item">
+							<a class="menu__link is-active" href="#">Menu</a>
+						</li>
+						<li class="menu__item">
+							<a class="menu__link" href="#">Menu</a>
+						</li>
+						<li class="menu__item">
+							<a class="menu__link" href="#">Menu</a>
+						</li>
+					</ul>
+				</nav>
+			</div>
+		</div>
+	</div>
+</header>

_gulp/html/_macros/macros.njk

@@ -12,8 +12,8 @@
     <ul class="list list--inline">
         {% for network in networks %}
             <li class="list__item">
-                <a href="{{ network.accountUrl }}" aria-label="{{ network.text }}" class="social-icon social-icon--{{ network.account|lower }}">
-                    {{ icon(network.icon, 'sm') }}
+                <a href="{{ network.accountUrl }}" aria-label="{{ network.text }}" class="social-icon bg-{{ network.account|lower }}-500 hover:bg-{{ network.account|lower }}-600">
+                    {{ icon(network.icon, 'xs') }}
                 </a>
             </li>
         {% endfor %}

_gulp/html/elements/button.njk

@@ -0,0 +1,23 @@
+{% import '_macros/macros.njk' as macro %}
+
+{# Content #}
+{% set title = title|default("Read more") %}
+{% set action = action|default(null) %}
+
+{# Options #}
+{% set type = type|default('link') %}
+{% set target = target|default(false) %}
+{% set full = full|default(false) %}
+{% set classes = classes|default('bg-orange-500 hover:bg-orange-600 text-white') %}
+
+{% if type == 'link' or type == 'download' %}
+    {% set download = true %}
+    {% set type = 'link' %}
+{% endif %}
+
+{% switch type %}
+	{% case 'button' %}
+        <button {{ action }} class="btn {{ classes }}{% if full %} btn--full{% endif %}">{{ title }}</button>
+    {% case 'link' %}
+        <a href="{{ action }}" {{ macro.external(target) }} class="btn {{ classes }}{% if full %} btn--full{% endif %}" {% if download %}download{% endif %}>{{ title }}</a>
+{% endswitch %}

_gulp/html/pages/index.njk

@@ -1,7 +1,18 @@
 {% extends "_layout/_base.njk" %}
 
 {% block content %}
-    <section class="row row--primary">
-        <h1>{{ siteDetails.title }}</h1>
+    <section class="row row--gray">
+        <div class="container">
+            <div class="w-content">
+                <h1>Welcome to {{ siteDetails.title }}</h1>
+                <p>A front end scaffolding framework for static projects using Nunjucks or for CraftCMS sites with JayCraft.</p>
+            </div>
+            <div class="mt-6">
+                {% set button = {
+                    action: 'https://google.com'
+                } %}
+                {% include 'elements/button.njk' %}
+            </div>
+        </div>
     </section>
 {% endblock %}

_src/html/_layout/_base.njk

@@ -23,8 +23,9 @@
 
         {# <a class="skip-main btn" href="#main">Skip to main content</a> #}
 
+        {% include '_layout/header.njk' %}
+
         <div class="site min-h-screen min-w-screen" id="main" data-barba="container">
-            {% include '_layout/header.njk' %}
             {% block content %}{% endblock %}
             {% include '_layout/footer.njk' %}
         </div>

_src/html/elements/button.njk

@@ -1,23 +1,24 @@
 {% import '_macros/macros.njk' as macro %}
 
 {# Content #}
-{% set title = title|default("Read more") %}
-{% set action = action|default(null) %}
+{% set label = button.label|default("Read more") %}
+{% set action = button.action|default(null) %}
 
 {# Options #}
-{% set type = type|default('link') %}
-{% set target = target|default(false) %}
-{% set full = full|default(false) %}
-{% set classes = classes|default('bg-orange-500 hover:bg-orange-600 text-white') %}
+{% set type = button.type|default('link') %}
+{% set target = button.target|default(false) %}
+{% set full = button.full|default(false) %}
+{% set classes = button.classes|default('bg-orange-500 hover:bg-orange-600 text-white') %}
+{% set download = false %}
 
-{% if type == 'link' or type == 'download' %}
+{% if type == 'download' %}
     {% set download = true %}
     {% set type = 'link' %}
 {% endif %}
 
 {% switch type %}
 	{% case 'button' %}
-        <button {{ action }} class="btn {{ classes }}{% if full %} btn--full{% endif %}">{{ title }}</button>
+        <button {{ action }} class="btn {{ classes }}{% if full %} btn--full{% endif %}">{{ label }}</button>
     {% case 'link' %}
-        <a href="{{ action }}" {{ macro.external(target) }} class="btn {{ classes }}{% if full %} btn--full{% endif %}" {% if download %}download{% endif %}>{{ title }}</a>
+        <a href="{{ action }}" {{ macro.external(target) }} class="btn {{ classes }}{% if full %} btn--full{% endif %}" {% if download %}download{% endif %}>{{ label }}</a>
 {% endswitch %}

_src/html/pages/index.njk

@@ -9,7 +9,8 @@
             </div>
             <div class="mt-6">
                 {% set button = {
-                    action: 'https://google.com'
+                    action: '/new-page.html',
+                    label: 'Test BarbaJS'
                 } %}
                 {% include 'elements/button.njk' %}
             </div>

_src/html/pages/new-page.njk

@@ -0,0 +1,19 @@
+{% extends "_layout/_base.njk" %}
+
+{% block content %}
+    <section class="row row--gray">
+        <div class="container">
+            <div class="w-content">
+                <h1>Another page to show Barba.js is working!</h1>
+                <p>A front end scaffolding framework for static projects using Nunjucks or for CraftCMS sites with JayCraft.</p>
+            </div>
+            <div class="mt-6">
+                {% set button = {
+                    action: '/',
+                    label: 'Go back home'
+                } %}
+                {% include 'elements/button.njk' %}
+            </div>
+        </div>
+    </section>
+{% endblock %}

_src/scripts/modules/_index.js

@@ -1,7 +1,9 @@
 import player from './player'
 import slider from './slider'
+import pageTransitions from './pageTransitions'
 
 export default function modulesJS() {
     // player()
     // slider()
+    pageTransitions()
 }

_src/scripts/modules/pageTransitions.js

@@ -0,0 +1,15 @@
+import barba from '@barba/core';
+
+export default function pageTransitions() {
+    console.log('BARBA')
+
+    barba.init({
+
+    })
+
+    // Trigger page analytics
+    barba.hooks.after(() => {
+        ga('set', 'page', window.location.pathname)
+        ga('send', 'pageview')
+    })
+}

_src/styles/layout/row.scss

@@ -32,6 +32,25 @@
         @apply py-32;
     }
 
+    // Add space for header
+    &:first-child {
+        > * {
+            margin-top: 4rem;
+
+            @screen md {
+                margin-top: 6rem;
+            }
+
+            @screen lg {
+                margin-top: 8rem;
+            }
+
+            @screen xl {
+                margin-top: 10rem;
+            }
+        }
+    }
+
     @each $name, $hex in $colors {
         &--#{$name} {
             // Setting the text colour based on how dark/light the bg is.

build/index.html

@@ -41,8 +41,7 @@
 
 
 
-        <div class="site min-h-screen min-w-screen" id="main" data-barba="container">
-            <header class="header">
+        <header class="header">
 	<div class="container header__inner">
 
 
@@ -74,6 +73,8 @@ <h1 class="h3">
 	</div>
 </header>
 
+
+        <div class="site min-h-screen min-w-screen" id="main" data-barba="container">
 
     <section class="row row--gray">
         <div class="container">
@@ -96,14 +97,12 @@ <h1>Welcome to JayPack</h1>
 
 
 
-
-
 
 
 
-        <a href="" 
+        <a href="/new-page.html" 
 
- class="btn bg-orange-500 hover:bg-orange-600 text-white" download>Read more</a>
+ class="btn bg-orange-500 hover:bg-orange-600 text-white" >Test BarbaJS</a>
 
             </div>
         </div>