# Tofino
@@ -6,20 +8,22 @@ A WordPress starter theme for jumpstarting custom theme development.
Developed by [Daniel Hewes](https://github.com/danimalweb), [Jake Gully](https://github.com/mrchimp).
+Ongoing development is sponsored by [Creative Dot](https://creativdotdesign.com)
+
Heavily inspired the by awesome WordPress starter theme [Sage](https://github.com/roots/sage) by [Roots](https://github.com/roots) from [Ben Word](https://github.com/retlehs) and [Scott Walkinshaw](https://github.com/swalkinshaw).
## Requirements
-| Prerequisite | How to check | How to install |
-| ------------------------- | ------------- | ----------------------------------------------- |
-| PHP >= 7.0.0 | `php -v` | [php.net](http://php.net/manual/en/install.php) |
-| Node.js >= 14.10.0 | `node -v` | [nodejs.org](http://nodejs.org/) |
-| Composer >= 1.9.0 | `composer -V` | [getcomposer.org](http://getcomposer.org) |
+| Prerequisite | How to check | How to install |
+| ------------------ | ------------- | ----------------------------------------------- |
+| PHP >= 7.3.0 | `php -v` | [php.net](http://php.net/manual/en/install.php) |
+| Node.js >= 12.16.3 | `node -v` | [nodejs.org](http://nodejs.org/) |
+| Composer >= 2.0.0 | `composer -V` | [getcomposer.org](http://getcomposer.org) |
## Installation
-* Download the latest [tagged release](https://github.com/creativedotdesign/tofino/releases).
-* Clone the git repo and run the following commands:
+- Download the latest [tagged release](https://github.com/creativedotdesign/tofino/releases).
+- Clone the git repo and run the following commands:
```
composer install
@@ -31,36 +35,33 @@ Once you have activated the theme, access Theme Options (WP Customizer) update a
## Features
-* [tailwindcss] (http://tailwindcss.com/)(v2.0)
-* Multilingual ready (WPML)
-* Responsive
-* Theme Options via WP Customizer (Native)
- * Admin login screen logo
- * Custom Dashboard Widget
- * Google Analytics
- * Hotjar Tracking
- * Social links
- * Sticky menu
- * Sticky footer
- * Left/Center/Right menu positions
- * Telephone number
- * Email address
- * Company number
- * Footer text
- * Notification text / EU Cookie notice with top/bottom positions
- * Contact form with [Google reCAPTCHA](https://www.google.com/recaptcha) and custom email templates
- * Data Tables for viewing data submitted via the contact form
- * Maintenance mode
- * jQuery in footer
-* JS ES6 compatible via Babel and Browserify.
-* [DOM-based routing](http://goo.gl/EUTi53) for DOM Ready and Window Ready via advanced router
-* [Laravel Mix](https://laravel-mix.com/) build script d
-* [Composer](https://getcomposer.org/) for PHP package management
-* Namespaced functions
-* Auto post type / slug based template routing
-* Shortcodes
-* [Web Font Loader](https://github.com/typekit/webfontloader) load Google, Typekit and custom fonts.
-* Fragment Cache class
+- [tailwindcss](http://tailwindcss.com/)(v2.0)
+- Multilingual ready (WPML)
+- Responsive
+- Theme Options via WP Customizer (Native)
+ _ Admin login screen logo
+ _ Custom Dashboard Widget
+ _ Google Analytics
+ _ Social links
+ _ Sticky menu
+ _ Sticky footer
+ _ Left/Center/Right menu positions
+ _ Client Data (Address, Telephone number, Email address, Company number)
+ _ Footer text
+ _ Notification text / EU Cookie notice with top/bottom positions
+ _ Contact form with [Google reCAPTCHA](https://www.google.com/recaptcha) and custom email templates
+ _ Data Tables for viewing data submitted via the contact form
+ - Maintenance mode popup
+ - jQuery in footer
+- JS ES6 compatible via Babel and Browserify.
+- [DOM-based routing](http://goo.gl/EUTi53) for DOM Ready and Window Ready via advanced router
+- [Laravel Mix](https://laravel-mix.com/) build script d
+- [Composer](https://getcomposer.org/) for PHP package management
+- Namespaced functions
+- Auto post type / slug based template routing
+- Shortcodes
+- [Web Font Loader](https://github.com/typekit/webfontloader) load Google, Typekit and custom fonts.
+- Fragment Cache class
## Documentation
@@ -79,21 +80,21 @@ npm run prod
The following files and directories should not be deployed on the server:
```
+.babelrc
.editorconfig
.env
.git
.github
-.eslintrc.json
+.eslintrc.js
.gitignore
.gitkeep
.git-ftp-ignore
.git-ftp-include
.gitattributes
.gitignore
-.stylelintrc.yml
-.hound.yml
+.prettierrc.js
+.stylelintrc.js
assets
-bin
node_modules
composer.json
composer.lock
@@ -101,7 +102,5 @@ package.json
package-lock.json
tailwind.config.js
webpack.mix.js
-ruleset.xml
**/*.md
-yarn.lock
```
diff --git a/assets/scripts/modules/menu.js b/assets/scripts/modules/menu.js
new file mode 100644
index 0000000..ff5aa02
--- /dev/null
+++ b/assets/scripts/modules/menu.js
@@ -0,0 +1,32 @@
+// Scroll lock
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+
+const Menu = () => {
+ // Menu Toggle
+ const buttons = document.querySelectorAll('.js-menu-toggle'),
+ menu = document.getElementById('main-menu');
+
+ buttons.forEach(el => {
+ el.addEventListener('click', () => {
+ // Toggle the hide class
+ menu.classList.toggle('hidden');
+
+ if (menu.classList.contains('hidden')) {
+ enableBodyScroll(menu);
+ } else {
+ disableBodyScroll(menu);
+ }
+ });
+ });
+
+ // Close menu on ESC key
+ document.onkeydown = e => {
+ if (e.key === 'Escape' && !menu.classList.contains('hidden')) {
+ menu.classList.add('hidden');
+
+ disableBodyScroll(menu);
+ }
+ };
+};
+
+export default Menu;
diff --git a/assets/scripts/router.js b/assets/scripts/router.js
index 90e07d7..c42d816 100644
--- a/assets/scripts/router.js
+++ b/assets/scripts/router.js
@@ -9,18 +9,18 @@
// The routing fires all common scripts, followed by the page specific scripts.
// Add additional events for more control over timing e.g. a finalize event
export default class Router {
- constructor(routes) {
+ constructor (routes) {
this.routes = routes;
}
- fire(route, fn = 'init', args) {
+ fire (route, fn = 'init', args) {
const fire = route !== '' && this.routes[route] && typeof this.routes[route][fn] === 'function';
if (fire) {
this.routes[route][fn](args);
}
}
- loadEvents(type) {
+ loadEvents (type) {
if (type == null) {
this.fire('common'); // Fire common init JS
}
@@ -30,7 +30,7 @@ export default class Router {
.toLowerCase()
.replace(/-/g, '_')
.split(/\s+/)
- .forEach((className) => {
+ .forEach(className => {
if (type == null) {
this.fire(className);
this.fire(className, 'finalize');
diff --git a/assets/scripts/routes/common.js b/assets/scripts/routes/common.js
index 86d2a52..4575efb 100644
--- a/assets/scripts/routes/common.js
+++ b/assets/scripts/routes/common.js
@@ -1,19 +1,26 @@
// Import Alert
import Alert from '../modules/alert';
+// Menu
+import Menu from '../modules/menu';
+
export default {
- init() {
+ init () {
// JavaScript to be fired on all pages
// Alert
if (document.body.contains(document.getElementById('tofino-notification'))) {
Alert();
}
+
+ if (document.body.contains(document.getElementById('main-menu'))) {
+ Menu();
+ }
},
- finalize() {
+ finalize () {
// JavaScript to be fired on all pages, after page specific JS is fired
},
- loaded() {
+ loaded () {
// Javascript to be fired on page once fully loaded
},
};
diff --git a/assets/scripts/wp-admin.js b/assets/scripts/wp-admin.js
index 3082716..1e47d0d 100644
--- a/assets/scripts/wp-admin.js
+++ b/assets/scripts/wp-admin.js
@@ -1,10 +1,13 @@
import Cookies from 'js-cookie';
-(function ($) {
- $(document).ready(function () {
- $('.maintenance-mode-alert button').on('click', function () {
+document.addEventListener('DOMContentLoaded', () => {
+ if (document.body.contains(document.querySelector('.maintenance-mode-alert'))) {
+ const button = document.querySelector('.maintenance-mode-alert button');
+
+ button.addEventListener('click', () => {
Cookies.set('tofino_maintenance_alert_dismissed', 'true');
- $('.maintenance-mode-alert').fadeOut('fast');
+
+ document.querySelector('.maintenance-mode-alert').style.display = 'none';
});
- });
-}(jQuery));
+ }
+});
diff --git a/assets/styles/base/menu.css b/assets/styles/base/menu.css
index b809e6b..0c733f5 100644
--- a/assets/styles/base/menu.css
+++ b/assets/styles/base/menu.css
@@ -1,4 +1,12 @@
/* Menu Styles */
.sticky-top {
@apply sticky top-0;
-}
\ No newline at end of file
+}
+
+#menu-header-menu {
+ @apply lg:inline-flex;
+
+ .menu-item {
+ @apply lg:mr-4;
+ }
+}
diff --git a/assets/styles/base/social-icons.css b/assets/styles/base/social-icons.css
index b9f8a02..b67d771 100644
--- a/assets/styles/base/social-icons.css
+++ b/assets/styles/base/social-icons.css
@@ -1,17 +1,15 @@
.social-icons {
- list-style-type: none;
- padding-left: 0;
+ @apply pl-0 list-none;
li {
- display: inline-block;
+ @apply inline-block;
}
svg {
- width: 24px;
- height: 24px;
+ @apply w-6 h-6;
}
a {
- display: block;
+ @apply block;
}
}
diff --git a/assets/styles/base/structure.css b/assets/styles/base/structure.css
index c004134..f6009a9 100644
--- a/assets/styles/base/structure.css
+++ b/assets/styles/base/structure.css
@@ -1,30 +1,26 @@
html {
- height: 100%;
+ @apply h-full;
}
body {
- /* Flexbox supported browsers only. */
- -moz-font-feature-settings: 'kern';
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ @apply antialiased;
&.footer-sticky {
- display: flex;
- min-height: 100vh;
- flex-direction: column;
+ @apply flex flex-col min-h-screen;
.wrapper {
flex: 1 0 auto;
- width: 100%;
+
+ @apply w-full;
}
}
&.no-fout {
- visibility: hidden;
+ @apply invisible;
.wf-inactive &,
.wf-active & {
- visibility: visible;
+ @apply visible;
}
}
}
diff --git a/assets/styles/base/wp-admin.css b/assets/styles/base/wp-admin.css
index 1874236..5592718 100644
--- a/assets/styles/base/wp-admin.css
+++ b/assets/styles/base/wp-admin.css
@@ -1,17 +1,13 @@
.maintenance-mode-alert {
- background-color: red;
- color: white;
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
+ @apply fixed inset-0 p-5 text-center text-white bg-red-600;
+
z-index: 999999;
- padding: 20px;
- text-align: center;
+
+ h1 {
+ @apply text-white;
+ }
p {
- font-size: 18px;
+ @apply text-sm;
}
}
-
diff --git a/assets/styles/main.css b/assets/styles/main.css
index c1fe894..261a2d1 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -4,6 +4,7 @@
@import 'base/alerts';
@import 'base/menu';
+@import 'base/social-icons';
@import 'base/structure';
@import 'tailwindcss/utilities';
diff --git a/assets/styles/safelist.txt b/assets/styles/safelist.txt
new file mode 100644
index 0000000..9d842f5
--- /dev/null
+++ b/assets/styles/safelist.txt
@@ -0,0 +1,7 @@
+sticky-top
+alert
+bottom
+top
+footer-sticky
+menu-fixed
+notification-use-js
\ No newline at end of file
diff --git a/assets/svgs/sprites/email.svg b/assets/svgs/sprites/email.svg
index cdc8537..ec78391 100644
--- a/assets/svgs/sprites/email.svg
+++ b/assets/svgs/sprites/email.svg
@@ -1,7 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/facebook.svg b/assets/svgs/sprites/facebook.svg
index 3177260..d07cd13 100644
--- a/assets/svgs/sprites/facebook.svg
+++ b/assets/svgs/sprites/facebook.svg
@@ -1,7 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/googleplus.svg b/assets/svgs/sprites/googleplus.svg
deleted file mode 100644
index 125ee3e..0000000
--- a/assets/svgs/sprites/googleplus.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
diff --git a/assets/svgs/sprites/icon-close.svg b/assets/svgs/sprites/icon-close.svg
index 53262e7..30725cf 100644
--- a/assets/svgs/sprites/icon-close.svg
+++ b/assets/svgs/sprites/icon-close.svg
@@ -1,16 +1,3 @@
-
-
-
-
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/icon-hamburger.svg b/assets/svgs/sprites/icon-hamburger.svg
new file mode 100644
index 0000000..05e9864
--- /dev/null
+++ b/assets/svgs/sprites/icon-hamburger.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/instagram.svg b/assets/svgs/sprites/instagram.svg
index 784b7a6..1609679 100644
--- a/assets/svgs/sprites/instagram.svg
+++ b/assets/svgs/sprites/instagram.svg
@@ -1,10 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/linkedin.svg b/assets/svgs/sprites/linkedin.svg
index 0d45af1..b2a2e13 100644
--- a/assets/svgs/sprites/linkedin.svg
+++ b/assets/svgs/sprites/linkedin.svg
@@ -1,8 +1,4 @@
-
-
-
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/pinterest.svg b/assets/svgs/sprites/pinterest.svg
index b33909b..a65e0fe 100644
--- a/assets/svgs/sprites/pinterest.svg
+++ b/assets/svgs/sprites/pinterest.svg
@@ -1,9 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/soundcloud.svg b/assets/svgs/sprites/soundcloud.svg
index 1f26f61..33d4190 100644
--- a/assets/svgs/sprites/soundcloud.svg
+++ b/assets/svgs/sprites/soundcloud.svg
@@ -1,14 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/twitter.svg b/assets/svgs/sprites/twitter.svg
index 4c49130..5df4655 100644
--- a/assets/svgs/sprites/twitter.svg
+++ b/assets/svgs/sprites/twitter.svg
@@ -1,8 +1,3 @@
-
-
-
+
\ No newline at end of file
diff --git a/assets/svgs/sprites/vimeo.svg b/assets/svgs/sprites/vimeo.svg
index d729cf7..5f81fc1 100644
--- a/assets/svgs/sprites/vimeo.svg
+++ b/assets/svgs/sprites/vimeo.svg
@@ -1,3 +1,3 @@
-