├── .gitignore
├── .prettierrc
├── 404.php
├── acf-json
    └── .gitkeep
├── functions.php
├── functions
    ├── core
    │   ├── add-editor-formats.php
    │   ├── add-image-sizes.php
    │   ├── add-svg-upload-support.php
    │   ├── add-vcard-support.php
    │   ├── remove-default-editor.php
    │   ├── remove-emoji-scripts.php
    │   ├── remove-gutenberg-styles.php
    │   ├── remove-json-api-scripts.php
    │   ├── remove-wp-embed.php
    │   └── remove-wp-xml-scripts.php
    ├── custom
    │   └── .gitkeep
    ├── plugin
    │   ├── .gitkeep
    │   └── yoast-seo.php
    ├── required.php
    └── template
    │   ├── check-if-ajax.php
    │   ├── get-file-type.php
    │   ├── get-template-partial.php
    │   ├── limit-chars.php
    │   ├── limit-words.php
    │   ├── pretty-print.php
    │   └── slugify.php
├── includes
    ├── footer.php
    ├── header.php
    └── meta.php
├── index.php
├── package.json
├── page.php
├── partials
    └── .gitkeep
├── readme.md
├── screenshot-small.png
├── screenshot.png
├── shortcodes
    └── .gitkeep
├── src
    ├── fonts
    │   └── .gitkeep
    ├── img
    │   └── .gitkeep
    ├── js
    │   ├── app.js
    │   ├── components
    │   │   └── .gitkeep
    │   └── utilities
    │   │   └── .gitkeep
    ├── scss
    │   ├── app.scss
    │   ├── components
    │   │   ├── .gitkeep
    │   │   └── components.tw.scss
    │   ├── elements
    │   │   └── .gitkeep
    │   ├── generic
    │   │   └── generic.reset.scss
    │   ├── objects
    │   │   └── .gitkeep
    │   └── utils
    │   │   └── utils.all.scss
    └── tailwind-config.js
├── style.css
├── webpack.mix.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Compiled directories
 2 | dist
 3 | 
 4 | # System files
 5 | *~
 6 | .DS_Store
 7 | .svn
 8 | .cvs
 9 | *.bak
10 | *.swp
11 | Thumbs.db
12 | todo.txt
13 | 
14 | # Logs
15 | logs
16 | *.log
17 | npm-debug.log*
18 | 
19 | # Dependency directories
20 | node_modules
21 | jspm_packages
22 | mix-manifest.json
23 | 
24 | # Optional npm cache directory
25 | .npm
26 | 
27 | # Misc
28 | hot
29 | mix-manifest.json
30 | 
31 | # Optional REPL history
32 | .node_repl_history
33 | 
34 | # Large / disallowed file types
35 | *.hqx
36 | *.bin
37 | *.exe
38 | *.dll
39 | *.deb
40 | *.dmg
41 | *.iso
42 | *.img
43 | *.msi
44 | *.msp
45 | *.msm
46 | *.mid
47 | *.midi
48 | *.kar
49 | *.mp3
50 | *.ogg
51 | *.m4a
52 | *.ra
53 | *.3gpp
54 | *.3gp
55 | *.mp4
56 | *.mpeg
57 | *.mpg
58 | *.mov
59 | *.webm
60 | *.flv
61 | *.m4v
62 | *.mng
63 | *.asx
64 | *.asf
65 | *.wmv
66 | *.avi


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "useTabs": false,
4 |   "semi": false,
5 |   "singleQuote": true,
6 |   "trailingComma": "all"
7 | }


--------------------------------------------------------------------------------
/404.php:
--------------------------------------------------------------------------------
1 | <?php get_template_part('/includes/header'); ?>
2 | 
3 |   <div style="display: flex; align-items: center; justify-content: center; background-color: #000; color: #fff; padding: 20px 0;">
4 |      <img src="data:image/png;base64,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" />
5 | 
6 |     <span style="padding-left: 16px; font-weight: bold;">404</span>
7 |   </div>
8 | 
9 | <?php get_template_part('/includes/footer'); ?>


--------------------------------------------------------------------------------
/acf-json/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/acf-json/.gitkeep


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |     Core
 4 |     - Wordpress backend and admin helpers
 5 |   ========================================================================== */
 6 |   // require_once('functions/core/add-editor-formats.php');
 7 |   // require_once('functions/core/add-image-sizes.php');
 8 |   // require_once('functions/core/add-svg-upload-support.php');
 9 |   // require_once('functions/core/add-vcard-support.php');
10 |   // require_once('functions/core/remove-emoji-scripts.php');
11 |   // require_once('functions/core/remove-wp-embed.php');
12 |   // require_once('functions/core/remove-json-api-scripts.php');
13 |   // require_once('functions/core/remove-wp-xml-scripts.php');
14 |   // require_once('functions/core/remove-default-editor.php');
15 |   // require_once('functions/core/remove-gutenberg-styles.php');
16 | 
17 | /* ==========================================================================
18 |     Template
19 |     - Frontend Specific helpers
20 |   ========================================================================== */
21 |   // require_once('functions/template/get-template-partial.php');
22 |   // require_once('functions/template/limit-chars.php');
23 |   // require_once('functions/template/limit-words.php');
24 |   // require_once('functions/template/slugify.php');
25 |   // require_once('functions/template/check-if-ajax.php');
26 |   // require_once('functions/template/get-file-type.php');
27 |   // require_once('functions/template/pretty-print.php');
28 | 
29 | /* ==========================================================================
30 |     Plugin
31 |     - Plugin only helpers
32 |   ========================================================================== */
33 |   // require_once('functions/plugin/yoast-seo.php');
34 | 
35 | /* ==========================================================================
36 |     Custom
37 |     - Site specific custom actions or util functions
38 |   ========================================================================== */
39 | 
40 | /* ==========================================================================
41 |     Shortcodes
42 |     - Custom shortcodes from the /shortcodes directory
43 |   ========================================================================== */
44 | 
45 | /* ==========================================================================
46 |     Required
47 |     - DO NOT REMOVE - required to setup the script enqueuing
48 |   ========================================================================== */
49 |   require_once('functions/required.php');
50 | ?>


--------------------------------------------------------------------------------
/functions/core/add-editor-formats.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |   Add Editor Formats
 4 |     - Add custom classes to the WP editor
 5 |   ========================================================================== */
 6 |   function wpb_mce_buttons_2($buttons) {
 7 |     array_unshift($buttons, 'styleselect');
 8 |     return $buttons;
 9 |   }
10 |   add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
11 | 
12 |   function my_mce_before_init_insert_formats( $init_array ) {
13 | 
14 |     // Define the style_formats array
15 |     $style_formats = array(
16 |       // Each array child is a format with it's own settings
17 |       array(
18 |         'title' => 'Heading XXL',
19 |         'block' => 'span',
20 |         'classes' => 'u-heading--xxl',
21 |         'wrapper' => true,
22 |       )
23 |     );
24 |     // Insert the array, JSON ENCODED, into 'style_formats'
25 |     $init_array['style_formats'] = json_encode( $style_formats );
26 |     return $init_array;
27 |   };
28 | 
29 |   // Attach callback to 'tiny_mce_before_init'
30 |   add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
31 | ?>


--------------------------------------------------------------------------------
/functions/core/add-image-sizes.php:
--------------------------------------------------------------------------------
1 | <?php
2 | /* ==========================================================================
3 |   Add Image Sizes
4 |     - Specify any custom image sizes below
5 |   ========================================================================== */ 
6 |   add_image_size( 'size_letterbox_large', 1600, 500, true );
7 | ?>


--------------------------------------------------------------------------------
/functions/core/add-svg-upload-support.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |    Add SVG Upload Support
 4 |   ========================================================================== */
 5 |   function cc_mime_types($mimes) {
 6 |     $mimes['svg'] = 'image/svg+xml';
 7 |     return $mimes;
 8 |   }
 9 |   add_filter('upload_mimes', 'cc_mime_types');
10 | ?>


--------------------------------------------------------------------------------
/functions/core/add-vcard-support.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |    Add vCard Support
 4 |   ========================================================================== */
 5 |   function be_enable_vcard_upload( $mime_types ){
 6 |     $mime_types['vcf'] = 'text/x-vcard';
 7 |     return $mime_types;
 8 |   }
 9 |   add_filter('upload_mimes', 'be_enable_vcard_upload' );
10 | ?>


--------------------------------------------------------------------------------
/functions/core/remove-default-editor.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |    Remove Default Editor
 4 |    - removed the WordPress editor - useful for ACF
 5 |   ========================================================================== */
 6 |   function remove_editor() {
 7 |     remove_post_type_support('page', 'editor');
 8 |   }
 9 |   add_action('admin_init', 'remove_editor');
10 | ?>


--------------------------------------------------------------------------------
/functions/core/remove-emoji-scripts.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |   Remove Emoji Scripts
 4 |     - Removes Emoji trash from the page source
 5 |   ========================================================================== */
 6 |   remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 7 |   remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 8 |   remove_action( 'wp_print_styles', 'print_emoji_styles' );
 9 |   remove_action( 'admin_print_styles', 'print_emoji_styles' );
10 | ?>


--------------------------------------------------------------------------------
/functions/core/remove-gutenberg-styles.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |   Remove Gutenberg Styles
 4 |     - removes frontend assets for Gutenberg blocks
 5 |   ========================================================================== */
 6 |   function wps_deregister_styles() {
 7 |     wp_dequeue_style( 'wp-block-library' );
 8 |   }
 9 |   add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
10 | ?>


--------------------------------------------------------------------------------
/functions/core/remove-json-api-scripts.php:
--------------------------------------------------------------------------------
1 | <?php
2 | /* ==========================================================================
3 |   Remove JSON API scripts
4 |     - Removed the link to the json api in the page source
5 |   ========================================================================== */
6 |   remove_action('wp_head', 'rest_output_link_wp_head');
7 | ?>


--------------------------------------------------------------------------------
/functions/core/remove-wp-embed.php:
--------------------------------------------------------------------------------
1 | <?php
2 | /* ==========================================================================
3 |   Remove WP Embed
4 |     - Removes the wp-embed JS file
5 |   ========================================================================== */
6 |   remove_action('wp_head', 'wp_oembed_add_discovery_links');
7 |   remove_action('wp_head', 'wp_oembed_add_host_js');
8 | ?>


--------------------------------------------------------------------------------
/functions/core/remove-wp-xml-scripts.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |   Remove WP XML Scripts
 4 |     - remove rsd link
 5 |     - remove WP manifest info
 6 |     - remove wp generator meta
 7 |   ========================================================================== */
 8 |   remove_action ('wp_head', 'rsd_link');
 9 |   remove_action( 'wp_head', 'wp_shortlink_wp_head');
10 |   remove_action( 'wp_head', 'wlwmanifest_link');
11 |   remove_action('wp_head', 'wp_generator');
12 | ?>


--------------------------------------------------------------------------------
/functions/custom/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/functions/custom/.gitkeep


--------------------------------------------------------------------------------
/functions/plugin/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/functions/plugin/.gitkeep


--------------------------------------------------------------------------------
/functions/plugin/yoast-seo.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |   /* ==========================================================================
 3 |   Yoast SEO
 4 |   - Place Yoast at the bottom of the edit screen
 5 |   ========================================================================== */
 6 |   function wpcover_move_yoast() {
 7 |     return 'low';
 8 |   }
 9 |   add_filter( 'wpseo_metabox_prio', 'wpcover_move_yoast');
10 | ?>


--------------------------------------------------------------------------------
/functions/required.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |     Required
 4 |   ========================================================================== */ 
 5 |   // allow the title tag in theme
 6 |   add_theme_support( 'title-tag' );
 7 | 
 8 |   // queue required assets
 9 |   function queue_theme_assets() {
10 |     wp_enqueue_script( 'script-bundle', get_template_directory_uri() . '/dist/js/bundle.min.js', array(), '1.0.0', true );
11 |     wp_enqueue_style( 'style-bundle', get_template_directory_uri() . '/dist/css/bundle.min.css', array(), '1.0.0' );
12 |   };
13 |   add_action( 'wp_enqueue_scripts', 'queue_theme_assets' );
14 | ?>


--------------------------------------------------------------------------------
/functions/template/check-if-ajax.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |     Request Is Ajax
 4 |     - Conditional to check whether a request has been made via ajax
 5 |   ========================================================================== */
 6 |   function request_is_ajax() {
 7 |     if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
 8 |       return true;
 9 |     };
10 |     return false;
11 |   };
12 | ?>


--------------------------------------------------------------------------------
/functions/template/get-file-type.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |    Get File Type
 4 |    - gets the file type of the provided URL
 5 |   ========================================================================== */
 6 |   function getFileType($file) {
 7 |     if (!$file) return false;
 8 |     $filetype = wp_check_filetype($file);
 9 |     return strtoupper($filetype['ext']);
10 |   };
11 | ?>


--------------------------------------------------------------------------------
/functions/template/get-template-partial.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |     Get Template Partial
 4 |     - Like get_template_part but allows for props to be passed in
 5 |   ========================================================================== */
 6 |   function get_template_partial( $file, $template_args = array(), $cache_args = array() ) {
 7 |     $template_args = wp_parse_args( $template_args );
 8 |     $cache_args = wp_parse_args( $cache_args );
 9 |     if ( $cache_args ) {
10 |       foreach ( $template_args as $key => $value ) {
11 |         if ( is_scalar( $value ) || is_array( $value ) ) {
12 |           $cache_args[$key] = $value;
13 |         } else if ( is_object( $value ) && method_exists( $value, 'get_id' ) ) {
14 |           $cache_args[$key] = call_user_method( 'get_id', $value );
15 |         }
16 |       }
17 |       if ( ( $cache = wp_cache_get( $file, serialize( $cache_args ) ) ) !== false ) {
18 |         if ( ! empty( $template_args['return'] ) )
19 |           return $cache;
20 |         echo $cache;
21 |         return;
22 |       }
23 |     }
24 |     $file_handle = $file;
25 |     do_action( 'start_operation', 'get_template_partial::' . $file_handle );
26 |     if ( file_exists( get_stylesheet_directory() . '/' . $file . '.php' ) )
27 |       $file = get_stylesheet_directory() . '/' . $file . '.php';
28 |     elseif ( file_exists( get_template_directory() . '/' . $file . '.php' ) )
29 |       $file = get_template_directory() . '/' . $file . '.php';
30 |     ob_start();
31 |     $return = require( $file );
32 |     $data = ob_get_clean();
33 |     do_action( 'end_operation', 'get_template_partial::' . $file_handle );
34 |     if ( $cache_args ) {
35 |       wp_cache_set( $file, $data, serialize( $cache_args ), 3600 );
36 |     }
37 |     if ( ! empty( $template_args['return'] ) )
38 |       if ( $return === false )
39 |         return false;
40 |       else
41 |         return $data;
42 |     echo $data;
43 |   };
44 | ?>


--------------------------------------------------------------------------------
/functions/template/limit-chars.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |     Limit Chars
 4 |     - Limits the ammount of characters output from a string
 5 |   ========================================================================== */ 
 6 |   function limit_chars($text, $length, $after = null) {
 7 |     if(strlen($text)<=$length) {
 8 |       return $text;
 9 |     };
10 |     $result = substr($text, 0, $length) . $after;
11 |     return $result;
12 |   };
13 | ?>


--------------------------------------------------------------------------------
/functions/template/limit-words.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |     Limit Words
 4 |     - Limits the ammount of words output from a string
 5 |   ========================================================================== */ 
 6 |   function limit_words($text, $limit, $after = null) {
 7 |     if (str_word_count($text, 0) > $limit) {
 8 |       $words = str_word_count($text, 2);
 9 |       $pos = array_keys($words);
10 |       $text = substr($text, 0, $pos[$limit]) . $after;
11 |     };
12 |     return $text;
13 |   };
14 | ?>


--------------------------------------------------------------------------------
/functions/template/pretty-print.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |     Pretty Print
 4 |     - Like print_r but formatted nicely
 5 |   ========================================================================== */
 6 |   function print_p($str) {
 7 |     echo '<pre>';
 8 |       print_r($str);
 9 |     echo '</pre>';
10 |   };
11 | ?>


--------------------------------------------------------------------------------
/functions/template/slugify.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /* ==========================================================================
 3 |     Slugify
 4 |     - Converts a string into a valid URL
 5 |   ========================================================================== */
 6 |   function slugify($text) {
 7 |     $text = preg_replace('~[^\pL\d]+~u', '-', $text);
 8 |     $text = iconv('utf-8', 'us-ascii//TRANSLIT', $text);
 9 |     $text = preg_replace('~[^-\w]+~', '', $text);
10 |     $text = trim($text, '-');
11 |     $text = preg_replace('~-+~', '-', $text);
12 |     $text = strtolower($text);
13 |     if (empty($text)) {
14 |       return 'n-a';
15 |     };
16 |     return $text;
17 |   };
18 | ?>


--------------------------------------------------------------------------------
/includes/footer.php:
--------------------------------------------------------------------------------
 1 |   <div class="max-w-2xl p-6 m-auto text-center">
 2 |     <p class="text-xs text-grey-dark">
 3 |       <a href="https://github.com/jack-pallot/dogpatch"
 4 |         title="Github profile"
 5 |         target="_blank"
 6 |         style="text-decoration: none; color: #ababab;">
 7 |         github.com/jack-pallot/dogpatch
 8 |       </a>
 9 |     </p>
10 |   </div>
11 | 
12 | </div>
13 | 
14 | <?php wp_footer(); ?>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/includes/header.php:
--------------------------------------------------------------------------------
1 | <?php get_template_part('/includes/meta'); ?>


--------------------------------------------------------------------------------
/includes/meta.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 | 
 6 |   <link rel="dns-prefetch" href="//googletagmanager.com">
 7 | 
 8 |   <?php wp_head(); ?>
 9 |   <meta http-equiv="x-ua-compatible" content="ie=edge">
10 |   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
11 | </head>
12 | <body>
13 |   <div id="js-app">


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 | <?php get_template_part('/includes/header'); ?>
2 | 
3 | <div style="display: flex; align-items: center; justify-content: center; background-color: #000; color: #fff; padding: 20px 0;">
4 |    <img src="data:image/png;base64,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" />
5 | 
6 |   <span style="padding-left: 16px; font-weight: bold;">Index</span>
7 | </div>
8 | 
9 | <?php get_template_part('/includes/footer'); ?>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Dogpatch",
 3 |   "version": "1.0.0",
 4 |   "description": "A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS.",
 5 |   "author": {
 6 |     "name": "Jack Pallot",
 7 |     "url": "https://github.com/jack-pallot"
 8 |   },
 9 |   "license": "GNU General Public License v3.0",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/jack-pallot/dogpatch.git"
13 |   },
14 |   "bugs": {
15 |     "url": "https://github.com/jack-pallot/dogpatch/issues"
16 |   },
17 |   "homepage": "https://github.com/jack-pallot/dogpatch",
18 |   "scripts": {
19 |     "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
20 |     "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
21 |     "hot": "NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
22 |     "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
23 |   },
24 |   "devDependencies": {
25 |     "browser-sync": "^2.24.6",
26 |     "browser-sync-webpack-plugin": "^2.2.2",
27 |     "glob-all": "^3.1.0",
28 |     "laravel-mix": "^2.1.11",
29 |     "purgecss-webpack-plugin": "^1.2.0",
30 |     "tailwindcss": "^0.6.4"
31 |   },
32 |   "dependencies": {
33 |     "axios": "^0.19.0",
34 |     "fstream": "^1.0.12",
35 |     "js-yaml": "^3.13.1",
36 |     "tailwindcss-accessibility": "^1.0.0",
37 |     "vue": "^2.5.17"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/page.php:
--------------------------------------------------------------------------------
1 | <?php get_template_part('/includes/header'); ?>
2 | 
3 |   <div style="display: flex; align-items: center; justify-content: center; background-color: #000; color: #fff; padding: 20px 0;">
4 |      <img src="data:image/png;base64,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" />
5 | 
6 |     <span style="padding-left: 16px; font-weight: bold;">Page</span>
7 |   </div>
8 | 
9 | <?php get_template_part('/includes/footer'); ?>


--------------------------------------------------------------------------------
/partials/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/partials/.gitkeep


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Dogpatch
  2 | 
  3 | ### A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS.
  4 | 
  5 | ----------
  6 | 
  7 | ## Inside Dogpatch
  8 | 
  9 | ### Javascript
 10 | 
 11 | * A Webpack build system via Laravel Mix
 12 | * Babel and ES Next support
 13 | * ES2015 module support
 14 | * Support for VueJS and Vue single file components
 15 | * Build scripts - minifying, concatenation and renaming
 16 | * Hot module reloading
 17 | * Prettier config (can be adjusted if you prefer tabs over spaces)
 18 | 
 19 | ## CSS
 20 | * Support for Sass
 21 | * ITCSS directory structure for your Sass files
 22 | * Zero setup Tailwind CSS framework support
 23 | * Accessibility utilities for Tailwind CSS
 24 | * Purge CSS to eliminate dead code (HTML, PHP, JS and Vue files)
 25 | 
 26 | ## WordPress
 27 | * Optional helper functions for cleaning up WordPress, improving the core functionality and template utilities. Functions can be commented out and don't run by default
 28 | * Component inheritance using the get_template_partial() function - letting you pass in props to a PHP template for DRY templating
 29 | * .gitignore file with common patterns
 30 | 
 31 | ----------
 32 | 
 33 | ## Getting Started
 34 | 
 35 | ### Installing
 36 | Download the ZIP or clone the repository into your WordPress themes directory.
 37 | 
 38 | `$ cd` into the Dogpatch theme directory.
 39 | 
 40 | **Install the project dependencies using NPM or Yarn:**
 41 | 
 42 | <pre><code>npm install</code></pre>
 43 | <pre><code>yarn install</code></pre>
 44 | 
 45 |  - Amend the webpack.mix.js file with your settings.
 46 |  - Amend the src/tailwind.config.js file with your custom CSS classes.
 47 | 
 48 | ⚠️ You will likely want to remove any references of Dogpatch and replace them with your current project name instead. ⚠️
 49 | 
 50 | * Rename the theme folder
 51 | * Amend the settings in style.css
 52 | * Adjust the screenshots to your design
 53 | 
 54 | ### Development
 55 | 
 56 | **To run a single instance of the dev build:**
 57 | 
 58 | <pre><code>npm run dev</code></pre>
 59 | <pre><code>yarn run dev</code></pre>
 60 | 
 61 | **To watch files through with live browser reloading:**
 62 | 
 63 | <pre><code>npm run watch</code></pre>
 64 | <pre><code>yarn run watch</code></pre>
 65 | 
 66 | ### Hot Module Reloading
 67 | 
 68 | **Hot module reloading is possible using the following:**
 69 | 
 70 | <pre><code>npm run hot</code></pre>
 71 | <pre><code>yarn run hot</code></pre>
 72 | 
 73 | ### Production
 74 | 
 75 | **Building for production will run the following tasks:**
 76 | 
 77 | * Convert ES Next using Babel
 78 | * Minify and concat Sass and JS files
 79 | * Run PurgeCSS to eliminate dead code
 80 | * Auto-prefix
 81 | * Move to /dist directory
 82 | 
 83 | <pre><code>npm run production</code></pre>
 84 | <pre><code>yarn run production</code></pre>
 85 | 
 86 | ----------
 87 | 
 88 | ## Updating
 89 | 
 90 |  **0.0.2**
 91 |  Two new functions added:
 92 | 
 93 |  remove-gutenberg-styles.php - removes Gutenberg block editor styles
 94 |  pretty-print.php - nicer formatting on nested print statements with print_p()
 95 | 
 96 |  Copy new files from /functions/core and /functions/template and copy functions.php. Comment out as needed.
 97 | 
 98 | ----------
 99 | No auto-updates through WordPress or child themes. These methods tend to cause behind the scenes conflicts and often cause more problems than they solve. Instead you can choose to patch the areas manually if you wish to do so, however, the benefit of being clean-slate means that updates should only require only minor changes.
100 | 
101 | ----------
102 | 
103 | ## Todo
104 | 
105 |  - Look at extracting Tailwind somehow as an optional dependency
106 |  - Built in linting using ES Lint
107 |  - Built in testing using Vue Testing Tools and either Mocha or Jest.
108 | 
109 | ----------
110 | 
111 | ## License
112 | [GNU General Public License v3.0](https://choosealicense.com/licenses/lgpl-3.0/)


--------------------------------------------------------------------------------
/screenshot-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/screenshot-small.png


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/screenshot.png


--------------------------------------------------------------------------------
/shortcodes/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/shortcodes/.gitkeep


--------------------------------------------------------------------------------
/src/fonts/.gitkeep:
--------------------------------------------------------------------------------
1 | .gitkeep


--------------------------------------------------------------------------------
/src/img/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/src/img/.gitkeep


--------------------------------------------------------------------------------
/src/js/app.js:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 |   App.js
3 |   ========================================================================== */


--------------------------------------------------------------------------------
/src/js/components/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/src/js/components/.gitkeep


--------------------------------------------------------------------------------
/src/js/utilities/.gitkeep:
--------------------------------------------------------------------------------
1 | .gitkeep


--------------------------------------------------------------------------------
/src/scss/app.scss:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    Generic
 3 |     - Low-specificity, far-reaching rulesets like CSS resets
 4 |   ========================================================================== */
 5 |   @import "/generic/generic.reset.scss";
 6 | 
 7 | /* ==========================================================================
 8 |    Elements
 9 |      -  Unclassed HTML elements (p, h1 etc)
10 |   ========================================================================== */
11 | 
12 | /* ==========================================================================
13 |    Objects
14 |     - Unstyled / Design-free objects, abstractions and patterns
15 |   ========================================================================== */
16 | 
17 | /* ==========================================================================
18 |    Components
19 |     - Components and widgets
20 |   ========================================================================== */
21 |   @import "/components/components.tw.scss";
22 | 
23 | /* ==========================================================================
24 |    Utilities
25 |     - Helper classes and overrides
26 |   ========================================================================== */
27 |   @import "/utils/utils.all.scss";


--------------------------------------------------------------------------------
/src/scss/components/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/src/scss/components/.gitkeep


--------------------------------------------------------------------------------
/src/scss/components/components.tw.scss:
--------------------------------------------------------------------------------
1 | @tailwind components;


--------------------------------------------------------------------------------
/src/scss/elements/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/src/scss/elements/.gitkeep


--------------------------------------------------------------------------------
/src/scss/generic/generic.reset.scss:
--------------------------------------------------------------------------------
1 | @tailwind preflight;


--------------------------------------------------------------------------------
/src/scss/objects/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jack-pallot/dogpatch/066286b3a793567b8f0e89eab0a0f0efb3112dc5/src/scss/objects/.gitkeep


--------------------------------------------------------------------------------
/src/scss/utils/utils.all.scss:
--------------------------------------------------------------------------------
1 | @tailwind utilities;


--------------------------------------------------------------------------------
/src/tailwind-config.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Tailwind - The Utility-First CSS Framework
  4 | 
  5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
  6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
  7 | 
  8 | Welcome to the Tailwind config file. This is where you can customize
  9 | Tailwind specifically for your project. Don't be intimidated by the
 10 | length of this file. It's really just a big JavaScript object and
 11 | we've done our very best to explain each section.
 12 | 
 13 | View the full documentation at https://tailwindcss.com.
 14 | 
 15 | 
 16 | |-------------------------------------------------------------------------------
 17 | | The default config
 18 | |-------------------------------------------------------------------------------
 19 | |
 20 | | This variable contains the default Tailwind config. You don't have
 21 | | to use it, but it can sometimes be helpful to have available. For
 22 | | example, you may choose to merge your custom configuration
 23 | | values with some of the Tailwind defaults.
 24 | |
 25 | */
 26 | 
 27 | // let defaultConfig = require('tailwindcss/defaultConfig')()
 28 | 
 29 | 
 30 | /*
 31 | |-------------------------------------------------------------------------------
 32 | | Colors                                    https://tailwindcss.com/docs/colors
 33 | |-------------------------------------------------------------------------------
 34 | |
 35 | | Here you can specify the colors used in your project. To get you started,
 36 | | we've provided a generous palette of great looking colors that are perfect
 37 | | for prototyping, but don't hesitate to change them for your project. You
 38 | | own these colors, nothing will break if you change everything about them.
 39 | |
 40 | | We've used literal color names ("red", "blue", etc.) for the default
 41 | | palette, but if you'd rather use functional names like "primary" and
 42 | | "secondary", or even a numeric scale like "100" and "200", go for it.
 43 | |
 44 | */
 45 | 
 46 | let colors = {
 47 |   'transparent': 'transparent',
 48 | 
 49 |   'black': '#22292f',
 50 |   'grey-darkest': '#3d4852',
 51 |   'grey-darker': '#606f7b',
 52 |   'grey-dark': '#8795a1',
 53 |   'grey': '#b8c2cc',
 54 |   'grey-light': '#dae1e7',
 55 |   'grey-lighter': '#f1f5f8',
 56 |   'grey-lightest': '#f8fafc',
 57 |   'white': '#ffffff',
 58 | 
 59 |   'red-darkest': '#3b0d0c',
 60 |   'red-darker': '#621b18',
 61 |   'red-dark': '#cc1f1a',
 62 |   'red': '#e3342f',
 63 |   'red-light': '#ef5753',
 64 |   'red-lighter': '#f9acaa',
 65 |   'red-lightest': '#fcebea',
 66 | 
 67 |   'orange-darkest': '#462a16',
 68 |   'orange-darker': '#613b1f',
 69 |   'orange-dark': '#de751f',
 70 |   'orange': '#f6993f',
 71 |   'orange-light': '#faad63',
 72 |   'orange-lighter': '#fcd9b6',
 73 |   'orange-lightest': '#fff5eb',
 74 | 
 75 |   'yellow-darkest': '#453411',
 76 |   'yellow-darker': '#684f1d',
 77 |   'yellow-dark': '#f2d024',
 78 |   'yellow': '#ffed4a',
 79 |   'yellow-light': '#fff382',
 80 |   'yellow-lighter': '#fff9c2',
 81 |   'yellow-lightest': '#fcfbeb',
 82 | 
 83 |   'green-darkest': '#0f2f21',
 84 |   'green-darker': '#1a4731',
 85 |   'green-dark': '#1f9d55',
 86 |   'green': '#38c172',
 87 |   'green-light': '#51d88a',
 88 |   'green-lighter': '#a2f5bf',
 89 |   'green-lightest': '#e3fcec',
 90 | 
 91 |   'teal-darkest': '#0d3331',
 92 |   'teal-darker': '#20504f',
 93 |   'teal-dark': '#38a89d',
 94 |   'teal': '#4dc0b5',
 95 |   'teal-light': '#64d5ca',
 96 |   'teal-lighter': '#a0f0ed',
 97 |   'teal-lightest': '#e8fffe',
 98 | 
 99 |   'blue-darkest': '#12283a',
100 |   'blue-darker': '#1c3d5a',
101 |   'blue-dark': '#2779bd',
102 |   'blue': '#3490dc',
103 |   'blue-light': '#6cb2eb',
104 |   'blue-lighter': '#bcdefa',
105 |   'blue-lightest': '#eff8ff',
106 | 
107 |   'indigo-darkest': '#191e38',
108 |   'indigo-darker': '#2f365f',
109 |   'indigo-dark': '#5661b3',
110 |   'indigo': '#6574cd',
111 |   'indigo-light': '#7886d7',
112 |   'indigo-lighter': '#b2b7ff',
113 |   'indigo-lightest': '#e6e8ff',
114 | 
115 |   'purple-darkest': '#21183c',
116 |   'purple-darker': '#382b5f',
117 |   'purple-dark': '#794acf',
118 |   'purple': '#9561e2',
119 |   'purple-light': '#a779e9',
120 |   'purple-lighter': '#d6bbfc',
121 |   'purple-lightest': '#f3ebff',
122 | 
123 |   'pink-darkest': '#451225',
124 |   'pink-darker': '#6f213f',
125 |   'pink-dark': '#eb5286',
126 |   'pink': '#f66d9b',
127 |   'pink-light': '#fa7ea8',
128 |   'pink-lighter': '#ffbbca',
129 |   'pink-lightest': '#ffebef',
130 | }
131 | 
132 | module.exports = {
133 | 
134 |   /*
135 |   |-----------------------------------------------------------------------------
136 |   | Colors                                  https://tailwindcss.com/docs/colors
137 |   |-----------------------------------------------------------------------------
138 |   |
139 |   | The color palette defined above is also assigned to the "colors" key of
140 |   | your Tailwind config. This makes it easy to access them in your CSS
141 |   | using Tailwind's config helper. For example:
142 |   |
143 |   | .error { color: config('colors.red') }
144 |   |
145 |   */
146 | 
147 |   colors: colors,
148 | 
149 | 
150 |   /*
151 |   |-----------------------------------------------------------------------------
152 |   | Screens                      https://tailwindcss.com/docs/responsive-design
153 |   |-----------------------------------------------------------------------------
154 |   |
155 |   | Screens in Tailwind are translated to CSS media queries. They define the
156 |   | responsive breakpoints for your project. By default Tailwind takes a
157 |   | "mobile first" approach, where each screen size represents a minimum
158 |   | viewport width. Feel free to have as few or as many screens as you
159 |   | want, naming them in whatever way you'd prefer for your project.
160 |   |
161 |   | Tailwind also allows for more complex screen definitions, which can be
162 |   | useful in certain situations. Be sure to see the full responsive
163 |   | documentation for a complete list of options.
164 |   |
165 |   | Class name: .{screen}:{utility}
166 |   |
167 |   */
168 | 
169 |   screens: {
170 |     'sm': '576px',
171 |     'md': '768px',
172 |     'lg': '992px',
173 |     'xl': '1200px',
174 |   },
175 | 
176 | 
177 |   /*
178 |   |-----------------------------------------------------------------------------
179 |   | Fonts                                    https://tailwindcss.com/docs/fonts
180 |   |-----------------------------------------------------------------------------
181 |   |
182 |   | Here is where you define your project's font stack, or font families.
183 |   | Keep in mind that Tailwind doesn't actually load any fonts for you.
184 |   | If you're using custom fonts you'll need to import them prior to
185 |   | defining them here.
186 |   |
187 |   | By default we provide a native font stack that works remarkably well on
188 |   | any device or OS you're using, since it just uses the default fonts
189 |   | provided by the platform.
190 |   |
191 |   | Class name: .font-{name}
192 |   |
193 |   */
194 | 
195 |   fonts: {
196 |     'sans': [
197 |       'system-ui',
198 |       'BlinkMacSystemFont',
199 |       '-apple-system',
200 |       'Segoe UI',
201 |       'Roboto',
202 |       'Oxygen',
203 |       'Ubuntu',
204 |       'Cantarell',
205 |       'Fira Sans',
206 |       'Droid Sans',
207 |       'Helvetica Neue',
208 |       'sans-serif',
209 |     ],
210 |     'serif': [
211 |       'Constantia',
212 |       'Lucida Bright',
213 |       'Lucidabright',
214 |       'Lucida Serif',
215 |       'Lucida',
216 |       'DejaVu Serif',
217 |       'Bitstream Vera Serif',
218 |       'Liberation Serif',
219 |       'Georgia',
220 |       'serif',
221 |     ],
222 |     'mono': [
223 |       'Menlo',
224 |       'Monaco',
225 |       'Consolas',
226 |       'Liberation Mono',
227 |       'Courier New',
228 |       'monospace',
229 |     ]
230 |   },
231 | 
232 | 
233 |   /*
234 |   |-----------------------------------------------------------------------------
235 |   | Text sizes                         https://tailwindcss.com/docs/text-sizing
236 |   |-----------------------------------------------------------------------------
237 |   |
238 |   | Here is where you define your text sizes. Name these in whatever way
239 |   | makes the most sense to you. We use size names by default, but
240 |   | you're welcome to use a numeric scale or even something else
241 |   | entirely.
242 |   |
243 |   | By default Tailwind uses the "rem" unit type for most measurements.
244 |   | This allows you to set a root font size which all other sizes are
245 |   | then based on. That said, you are free to use whatever units you
246 |   | prefer, be it rems, ems, pixels or other.
247 |   |
248 |   | Class name: .text-{size}
249 |   |
250 |   */
251 | 
252 |   textSizes: {
253 |     'xs': '.75rem',     // 12px
254 |     'sm': '.875rem',    // 14px
255 |     'base': '1rem',     // 16px
256 |     'lg': '1.125rem',   // 18px
257 |     'xl': '1.25rem',    // 20px
258 |     '2xl': '1.5rem',    // 24px
259 |     '3xl': '1.875rem',  // 30px
260 |     '4xl': '2.25rem',   // 36px
261 |     '5xl': '3rem',      // 48px
262 |   },
263 | 
264 | 
265 |   /*
266 |   |-----------------------------------------------------------------------------
267 |   | Font weights                       https://tailwindcss.com/docs/font-weight
268 |   |-----------------------------------------------------------------------------
269 |   |
270 |   | Here is where you define your font weights. We've provided a list of
271 |   | common font weight names with their respective numeric scale values
272 |   | to get you started. It's unlikely that your project will require
273 |   | all of these, so we recommend removing those you don't need.
274 |   |
275 |   | Class name: .font-{weight}
276 |   |
277 |   */
278 | 
279 |   fontWeights: {
280 |     'hairline': 100,
281 |     'thin': 200,
282 |     'light': 300,
283 |     'normal': 400,
284 |     'medium': 500,
285 |     'semibold': 600,
286 |     'bold': 700,
287 |     'extrabold': 800,
288 |     'black': 900,
289 |   },
290 | 
291 | 
292 |   /*
293 |   |-----------------------------------------------------------------------------
294 |   | Leading (line height)              https://tailwindcss.com/docs/line-height
295 |   |-----------------------------------------------------------------------------
296 |   |
297 |   | Here is where you define your line height values, or as we call
298 |   | them in Tailwind, leadings.
299 |   |
300 |   | Class name: .leading-{size}
301 |   |
302 |   */
303 | 
304 |   leading: {
305 |     'none': 1,
306 |     'tight': 1.25,
307 |     'normal': 1.5,
308 |     'loose': 2,
309 |   },
310 | 
311 | 
312 |   /*
313 |   |-----------------------------------------------------------------------------
314 |   | Tracking (letter spacing)       https://tailwindcss.com/docs/letter-spacing
315 |   |-----------------------------------------------------------------------------
316 |   |
317 |   | Here is where you define your letter spacing values, or as we call
318 |   | them in Tailwind, tracking.
319 |   |
320 |   | Class name: .tracking-{size}
321 |   |
322 |   */
323 | 
324 |   tracking: {
325 |     'tight': '-0.05em',
326 |     'normal': '0',
327 |     'wide': '0.05em',
328 |   },
329 | 
330 | 
331 |   /*
332 |   |-----------------------------------------------------------------------------
333 |   | Text colors                         https://tailwindcss.com/docs/text-color
334 |   |-----------------------------------------------------------------------------
335 |   |
336 |   | Here is where you define your text colors. By default these use the
337 |   | color palette we defined above, however you're welcome to set these
338 |   | independently if that makes sense for your project.
339 |   |
340 |   | Class name: .text-{color}
341 |   |
342 |   */
343 | 
344 |   textColors: colors,
345 | 
346 | 
347 |   /*
348 |   |-----------------------------------------------------------------------------
349 |   | Background colors             https://tailwindcss.com/docs/background-color
350 |   |-----------------------------------------------------------------------------
351 |   |
352 |   | Here is where you define your background colors. By default these use
353 |   | the color palette we defined above, however you're welcome to set
354 |   | these independently if that makes sense for your project.
355 |   |
356 |   | Class name: .bg-{color}
357 |   |
358 |   */
359 | 
360 |   backgroundColors: colors,
361 | 
362 | 
363 |   /*
364 |   |-----------------------------------------------------------------------------
365 |   | Background sizes               https://tailwindcss.com/docs/background-size
366 |   |-----------------------------------------------------------------------------
367 |   |
368 |   | Here is where you define your background sizes. We provide some common
369 |   | values that are useful in most projects, but feel free to add other sizes
370 |   | that are specific to your project here as well.
371 |   |
372 |   | Class name: .bg-{size}
373 |   |
374 |   */
375 | 
376 |   backgroundSize: {
377 |     'auto': 'auto',
378 |     'cover': 'cover',
379 |     'contain': 'contain',
380 |   },
381 | 
382 | 
383 |   /*
384 |   |-----------------------------------------------------------------------------
385 |   | Border widths                     https://tailwindcss.com/docs/border-width
386 |   |-----------------------------------------------------------------------------
387 |   |
388 |   | Here is where you define your border widths. Take note that border
389 |   | widths require a special "default" value set as well. This is the
390 |   | width that will be used when you do not specify a border width.
391 |   |
392 |   | Class name: .border{-side?}{-width?}
393 |   |
394 |   */
395 | 
396 |   borderWidths: {
397 |     default: '1px',
398 |     '0': '0',
399 |     '2': '2px',
400 |     '4': '4px',
401 |     '8': '8px',
402 |   },
403 | 
404 | 
405 |   /*
406 |   |-----------------------------------------------------------------------------
407 |   | Border colors                     https://tailwindcss.com/docs/border-color
408 |   |-----------------------------------------------------------------------------
409 |   |
410 |   | Here is where you define your border colors. By default these use the
411 |   | color palette we defined above, however you're welcome to set these
412 |   | independently if that makes sense for your project.
413 |   |
414 |   | Take note that border colors require a special "default" value set
415 |   | as well. This is the color that will be used when you do not
416 |   | specify a border color.
417 |   |
418 |   | Class name: .border-{color}
419 |   |
420 |   */
421 | 
422 |   borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
423 | 
424 | 
425 |   /*
426 |   |-----------------------------------------------------------------------------
427 |   | Border radius                    https://tailwindcss.com/docs/border-radius
428 |   |-----------------------------------------------------------------------------
429 |   |
430 |   | Here is where you define your border radius values. If a `default` radius
431 |   | is provided, it will be made available as the non-suffixed `.rounded`
432 |   | utility.
433 |   |
434 |   | If your scale includes a `0` value to reset already rounded corners, it's
435 |   | a good idea to put it first so other values are able to override it.
436 |   |
437 |   | Class name: .rounded{-side?}{-size?}
438 |   |
439 |   */
440 | 
441 |   borderRadius: {
442 |     'none': '0',
443 |     'sm': '.125rem',
444 |     default: '.25rem',
445 |     'lg': '.5rem',
446 |     'full': '9999px',
447 |   },
448 | 
449 | 
450 |   /*
451 |   |-----------------------------------------------------------------------------
452 |   | Width                                    https://tailwindcss.com/docs/width
453 |   |-----------------------------------------------------------------------------
454 |   |
455 |   | Here is where you define your width utility sizes. These can be
456 |   | percentage based, pixels, rems, or any other units. By default
457 |   | we provide a sensible rem based numeric scale, a percentage
458 |   | based fraction scale, plus some other common use-cases. You
459 |   | can, of course, modify these values as needed.
460 |   |
461 |   |
462 |   | It's also worth mentioning that Tailwind automatically escapes
463 |   | invalid CSS class name characters, which allows you to have
464 |   | awesome classes like .w-2/3.
465 |   |
466 |   | Class name: .w-{size}
467 |   |
468 |   */
469 | 
470 |   width: {
471 |     'auto': 'auto',
472 |     'px': '1px',
473 |     '1': '0.25rem',
474 |     '2': '0.5rem',
475 |     '3': '0.75rem',
476 |     '4': '1rem',
477 |     '5': '1.25rem',
478 |     '6': '1.5rem',
479 |     '8': '2rem',
480 |     '10': '2.5rem',
481 |     '12': '3rem',
482 |     '16': '4rem',
483 |     '24': '6rem',
484 |     '32': '8rem',
485 |     '48': '12rem',
486 |     '64': '16rem',
487 |     '1/2': '50%',
488 |     '1/3': '33.33333%',
489 |     '2/3': '66.66667%',
490 |     '1/4': '25%',
491 |     '3/4': '75%',
492 |     '1/5': '20%',
493 |     '2/5': '40%',
494 |     '3/5': '60%',
495 |     '4/5': '80%',
496 |     '1/6': '16.66667%',
497 |     '5/6': '83.33333%',
498 |     'full': '100%',
499 |     'screen': '100vw'
500 |   },
501 | 
502 | 
503 |   /*
504 |   |-----------------------------------------------------------------------------
505 |   | Height                                  https://tailwindcss.com/docs/height
506 |   |-----------------------------------------------------------------------------
507 |   |
508 |   | Here is where you define your height utility sizes. These can be
509 |   | percentage based, pixels, rems, or any other units. By default
510 |   | we provide a sensible rem based numeric scale plus some other
511 |   | common use-cases. You can, of course, modify these values as
512 |   | needed.
513 |   |
514 |   | Class name: .h-{size}
515 |   |
516 |   */
517 | 
518 |   height: {
519 |     'auto': 'auto',
520 |     'px': '1px',
521 |     '1': '0.25rem',
522 |     '2': '0.5rem',
523 |     '3': '0.75rem',
524 |     '4': '1rem',
525 |     '5': '1.25rem',
526 |     '6': '1.5rem',
527 |     '8': '2rem',
528 |     '10': '2.5rem',
529 |     '12': '3rem',
530 |     '16': '4rem',
531 |     '24': '6rem',
532 |     '32': '8rem',
533 |     '48': '12rem',
534 |     '64': '16rem',
535 |     'full': '100%',
536 |     'screen': '100vh'
537 |   },
538 | 
539 | 
540 |   /*
541 |   |-----------------------------------------------------------------------------
542 |   | Minimum width                        https://tailwindcss.com/docs/min-width
543 |   |-----------------------------------------------------------------------------
544 |   |
545 |   | Here is where you define your minimum width utility sizes. These can
546 |   | be percentage based, pixels, rems, or any other units. We provide a
547 |   | couple common use-cases by default. You can, of course, modify
548 |   | these values as needed.
549 |   |
550 |   | Class name: .min-w-{size}
551 |   |
552 |   */
553 | 
554 |   minWidth: {
555 |     '0': '0',
556 |     'full': '100%',
557 |   },
558 | 
559 | 
560 |   /*
561 |   |-----------------------------------------------------------------------------
562 |   | Minimum height                      https://tailwindcss.com/docs/min-height
563 |   |-----------------------------------------------------------------------------
564 |   |
565 |   | Here is where you define your minimum height utility sizes. These can
566 |   | be percentage based, pixels, rems, or any other units. We provide a
567 |   | few common use-cases by default. You can, of course, modify these
568 |   | values as needed.
569 |   |
570 |   | Class name: .min-h-{size}
571 |   |
572 |   */
573 | 
574 |   minHeight: {
575 |     '0': '0',
576 |     'full': '100%',
577 |     'screen': '100vh'
578 |   },
579 | 
580 | 
581 |   /*
582 |   |-----------------------------------------------------------------------------
583 |   | Maximum width                        https://tailwindcss.com/docs/max-width
584 |   |-----------------------------------------------------------------------------
585 |   |
586 |   | Here is where you define your maximum width utility sizes. These can
587 |   | be percentage based, pixels, rems, or any other units. By default
588 |   | we provide a sensible rem based scale and a "full width" size,
589 |   | which is basically a reset utility. You can, of course,
590 |   | modify these values as needed.
591 |   |
592 |   | Class name: .max-w-{size}
593 |   |
594 |   */
595 | 
596 |   maxWidth: {
597 |     'xs': '20rem',
598 |     'sm': '30rem',
599 |     'md': '40rem',
600 |     'lg': '50rem',
601 |     'xl': '60rem',
602 |     '2xl': '70rem',
603 |     '3xl': '80rem',
604 |     '4xl': '90rem',
605 |     '5xl': '100rem',
606 |     'full': '100%',
607 |   },
608 | 
609 | 
610 |   /*
611 |   |-----------------------------------------------------------------------------
612 |   | Maximum height                      https://tailwindcss.com/docs/max-height
613 |   |-----------------------------------------------------------------------------
614 |   |
615 |   | Here is where you define your maximum height utility sizes. These can
616 |   | be percentage based, pixels, rems, or any other units. We provide a
617 |   | couple common use-cases by default. You can, of course, modify
618 |   | these values as needed.
619 |   |
620 |   | Class name: .max-h-{size}
621 |   |
622 |   */
623 | 
624 |   maxHeight: {
625 |     'full': '100%',
626 |     'screen': '100vh',
627 |   },
628 | 
629 | 
630 |   /*
631 |   |-----------------------------------------------------------------------------
632 |   | Padding                                https://tailwindcss.com/docs/padding
633 |   |-----------------------------------------------------------------------------
634 |   |
635 |   | Here is where you define your padding utility sizes. These can be
636 |   | percentage based, pixels, rems, or any other units. By default we
637 |   | provide a sensible rem based numeric scale plus a couple other
638 |   | common use-cases like "1px". You can, of course, modify these
639 |   | values as needed.
640 |   |
641 |   | Class name: .p{side?}-{size}
642 |   |
643 |   */
644 | 
645 |   padding: {
646 |     'px': '1px',
647 |     '0': '0',
648 |     '1': '0.25rem',
649 |     '2': '0.5rem',
650 |     '3': '0.75rem',
651 |     '4': '1rem',
652 |     '5': '1.25rem',
653 |     '6': '1.5rem',
654 |     '8': '2rem',
655 |     '10': '2.5rem',
656 |     '12': '3rem',
657 |     '16': '4rem',
658 |     '20': '5rem',
659 |     '24': '6rem',
660 |     '32': '8rem',
661 |   },
662 | 
663 | 
664 |   /*
665 |   |-----------------------------------------------------------------------------
666 |   | Margin                                  https://tailwindcss.com/docs/margin
667 |   |-----------------------------------------------------------------------------
668 |   |
669 |   | Here is where you define your margin utility sizes. These can be
670 |   | percentage based, pixels, rems, or any other units. By default we
671 |   | provide a sensible rem based numeric scale plus a couple other
672 |   | common use-cases like "1px". You can, of course, modify these
673 |   | values as needed.
674 |   |
675 |   | Class name: .m{side?}-{size}
676 |   |
677 |   */
678 | 
679 |   margin: {
680 |     'auto': 'auto',
681 |     'px': '1px',
682 |     '0': '0',
683 |     '1': '0.25rem',
684 |     '2': '0.5rem',
685 |     '3': '0.75rem',
686 |     '4': '1rem',
687 |     '5': '1.25rem',
688 |     '6': '1.5rem',
689 |     '8': '2rem',
690 |     '10': '2.5rem',
691 |     '12': '3rem',
692 |     '16': '4rem',
693 |     '20': '5rem',
694 |     '24': '6rem',
695 |     '32': '8rem',
696 |   },
697 | 
698 | 
699 |   /*
700 |   |-----------------------------------------------------------------------------
701 |   | Negative margin                https://tailwindcss.com/docs/negative-margin
702 |   |-----------------------------------------------------------------------------
703 |   |
704 |   | Here is where you define your negative margin utility sizes. These can
705 |   | be percentage based, pixels, rems, or any other units. By default we
706 |   | provide matching values to the padding scale since these utilities
707 |   | generally get used together. You can, of course, modify these
708 |   | values as needed.
709 |   |
710 |   | Class name: .-m{side?}-{size}
711 |   |
712 |   */
713 | 
714 |   negativeMargin: {
715 |     'px': '1px',
716 |     '0': '0',
717 |     '1': '0.25rem',
718 |     '2': '0.5rem',
719 |     '3': '0.75rem',
720 |     '4': '1rem',
721 |     '5': '1.25rem',
722 |     '6': '1.5rem',
723 |     '8': '2rem',
724 |     '10': '2.5rem',
725 |     '12': '3rem',
726 |     '16': '4rem',
727 |     '20': '5rem',
728 |     '24': '6rem',
729 |     '32': '8rem',
730 |   },
731 | 
732 | 
733 |   /*
734 |   |-----------------------------------------------------------------------------
735 |   | Shadows                                https://tailwindcss.com/docs/shadows
736 |   |-----------------------------------------------------------------------------
737 |   |
738 |   | Here is where you define your shadow utilities. As you can see from
739 |   | the defaults we provide, it's possible to apply multiple shadows
740 |   | per utility using comma separation.
741 |   |
742 |   | If a `default` shadow is provided, it will be made available as the non-
743 |   | suffixed `.shadow` utility.
744 |   |
745 |   | Class name: .shadow-{size?}
746 |   |
747 |   */
748 | 
749 |   shadows: {
750 |     default: '0 2px 4px 0 rgba(0,0,0,0.10)',
751 |     'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
752 |     'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
753 |     'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
754 |     'outline': '0 0 0 3px rgba(52,144,220,0.5)',
755 |     'none': 'none',
756 |   },
757 | 
758 | 
759 |   /*
760 |   |-----------------------------------------------------------------------------
761 |   | Z-index                                https://tailwindcss.com/docs/z-index
762 |   |-----------------------------------------------------------------------------
763 |   |
764 |   | Here is where you define your z-index utility values. By default we
765 |   | provide a sensible numeric scale. You can, of course, modify these
766 |   | values as needed.
767 |   |
768 |   | Class name: .z-{index}
769 |   |
770 |   */
771 | 
772 |   zIndex: {
773 |     'auto': 'auto',
774 |     '0': 0,
775 |     '10': 10,
776 |     '20': 20,
777 |     '30': 30,
778 |     '40': 40,
779 |     '50': 50,
780 |   },
781 | 
782 | 
783 |   /*
784 |   |-----------------------------------------------------------------------------
785 |   | Opacity                                https://tailwindcss.com/docs/opacity
786 |   |-----------------------------------------------------------------------------
787 |   |
788 |   | Here is where you define your opacity utility values. By default we
789 |   | provide a sensible numeric scale. You can, of course, modify these
790 |   | values as needed.
791 |   |
792 |   | Class name: .opacity-{name}
793 |   |
794 |   */
795 | 
796 |   opacity: {
797 |     '0': '0',
798 |     '25': '.25',
799 |     '50': '.5',
800 |     '75': '.75',
801 |     '100': '1',
802 |   },
803 | 
804 | 
805 |   /*
806 |   |-----------------------------------------------------------------------------
807 |   | SVG fill                                   https://tailwindcss.com/docs/svg
808 |   |-----------------------------------------------------------------------------
809 |   |
810 |   | Here is where you define your SVG fill colors. By default we just provide
811 |   | `fill-current` which sets the fill to the current text color. This lets you
812 |   | specify a fill color using existing text color utilities and helps keep the
813 |   | generated CSS file size down.
814 |   |
815 |   | Class name: .fill-{name}
816 |   |
817 |   */
818 | 
819 |   svgFill: {
820 |     'current': 'currentColor',
821 |   },
822 | 
823 | 
824 |   /*
825 |   |-----------------------------------------------------------------------------
826 |   | SVG stroke                                 https://tailwindcss.com/docs/svg
827 |   |-----------------------------------------------------------------------------
828 |   |
829 |   | Here is where you define your SVG stroke colors. By default we just provide
830 |   | `stroke-current` which sets the stroke to the current text color. This lets
831 |   | you specify a stroke color using existing text color utilities and helps
832 |   | keep the generated CSS file size down.
833 |   |
834 |   | Class name: .stroke-{name}
835 |   |
836 |   */
837 | 
838 |   svgStroke: {
839 |     'current': 'currentColor',
840 |   },
841 | 
842 | 
843 |   /*
844 |   |-----------------------------------------------------------------------------
845 |   | Modules                  https://tailwindcss.com/docs/configuration#modules
846 |   |-----------------------------------------------------------------------------
847 |   |
848 |   | Here is where you control which modules are generated and what variants are
849 |   | generated for each of those modules.
850 |   |
851 |   | Currently supported variants:
852 |   |   - responsive
853 |   |   - hover
854 |   |   - focus
855 |   |   - active
856 |   |   - group-hover
857 |   |
858 |   | To disable a module completely, use `false` instead of an array.
859 |   |
860 |   */
861 | 
862 |   modules: {
863 |     appearance: ['responsive'],
864 |     backgroundAttachment: ['responsive'],
865 |     backgroundColors: ['responsive', 'hover', 'focus'],
866 |     backgroundPosition: ['responsive'],
867 |     backgroundRepeat: ['responsive'],
868 |     backgroundSize: ['responsive'],
869 |     borderCollapse: [],
870 |     borderColors: ['responsive', 'hover', 'focus'],
871 |     borderRadius: ['responsive'],
872 |     borderStyle: ['responsive'],
873 |     borderWidths: ['responsive'],
874 |     cursor: ['responsive'],
875 |     display: ['responsive'],
876 |     flexbox: ['responsive'],
877 |     float: ['responsive'],
878 |     fonts: ['responsive'],
879 |     fontWeights: ['responsive', 'hover', 'focus'],
880 |     height: ['responsive'],
881 |     leading: ['responsive'],
882 |     lists: ['responsive'],
883 |     margin: ['responsive'],
884 |     maxHeight: ['responsive'],
885 |     maxWidth: ['responsive'],
886 |     minHeight: ['responsive'],
887 |     minWidth: ['responsive'],
888 |     negativeMargin: ['responsive'],
889 |     opacity: ['responsive'],
890 |     outline: ['focus'],
891 |     overflow: ['responsive'],
892 |     padding: ['responsive'],
893 |     pointerEvents: ['responsive'],
894 |     position: ['responsive'],
895 |     resize: ['responsive'],
896 |     shadows: ['responsive', 'hover', 'focus'],
897 |     svgFill: [],
898 |     svgStroke: [],
899 |     tableLayout: ['responsive'],
900 |     textAlign: ['responsive'],
901 |     textColors: ['responsive', 'hover', 'focus'],
902 |     textSizes: ['responsive'],
903 |     textStyle: ['responsive', 'hover', 'focus'],
904 |     tracking: ['responsive'],
905 |     userSelect: ['responsive'],
906 |     verticalAlign: ['responsive'],
907 |     visibility: ['responsive'],
908 |     whitespace: ['responsive'],
909 |     width: ['responsive'],
910 |     zIndex: ['responsive'],
911 |   },
912 | 
913 |   /*
914 |   |-----------------------------------------------------------------------------
915 |   | Plugins                                https://tailwindcss.com/docs/plugins
916 |   |-----------------------------------------------------------------------------
917 |   |
918 |   | Here is where you can register any plugins you'd like to use in your
919 |   | project. Tailwind's built-in `container` plugin is enabled by default to
920 |   | give you a Bootstrap-style responsive container component out of the box.
921 |   |
922 |   | Be sure to view the complete plugin documentation to learn more about how
923 |   | the plugin system works.
924 |   |
925 |   */
926 | 
927 |   plugins: [
928 |     require('tailwindcss-accessibility')
929 |   ],
930 | 
931 |   /*
932 |   |-----------------------------------------------------------------------------
933 |   | Advanced Options         https://tailwindcss.com/docs/configuration#options
934 |   |-----------------------------------------------------------------------------
935 |   |
936 |   | Here is where you can tweak advanced configuration options. We recommend
937 |   | leaving these options alone unless you absolutely need to change them.
938 |   |
939 |   */
940 | 
941 |   options: {
942 |     prefix: '',
943 |     important: false,
944 |     separator: ':',
945 |   },
946 | 
947 | }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /*
2 |   Theme Name: dogpatch
3 |   Author: Jack Pallot
4 |   Author URI: https://github.com/jack-pallot
5 |   Version: 0.0.2
6 |   Description: A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS.
7 | */


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
  1 | const mix = require('laravel-mix')
  2 | const tailwindcss = require('tailwindcss')
  3 | const glob = require('glob-all')
  4 | const PurgecssPlugin = require('purgecss-webpack-plugin')
  5 | 
  6 | /* ==========================================================================
  7 |   Config
  8 |   ========================================================================== */
  9 |   const config = {
 10 |     siteUrl: 'dogpatchdev.test',
 11 |     proxyUrl: 'https://dogpatchdev.test',
 12 |     port: 3000,
 13 |     openOnStart: false,
 14 |     pathToLocalSSLCert: '',
 15 |     pathToLocalSSLKey: '',
 16 |     filesToWatch: [
 17 |       './**/*.php',
 18 |       './**/*.html',
 19 |       'src/scss/**/*.scss',
 20 |       'src/js/**/*.js',
 21 |       'src/img/*',
 22 |       'src/js/components/**/*.vue',
 23 |       'src/tailwind-config.js',
 24 |     ]
 25 |   }
 26 | 
 27 | /* ==========================================================================
 28 |   Purge CSS Extractors
 29 |   ========================================================================== */
 30 |   class TailwindExtractor {
 31 |     static extract(content) {
 32 |       return content.match(/[A-z0-9-:\/]+/g) || []
 33 |     }
 34 |   }
 35 | 
 36 | /* ==========================================================================
 37 |   Laravel Mix Config
 38 |   ========================================================================== */
 39 | mix
 40 |   // handle JS files
 41 |   .js('src/js/app.js', 'dist/js/bundle.min.js')
 42 |   .disableNotifications()
 43 | 
 44 |   // Sass files and Tailwind CSS Config
 45 |   .sass('src/scss/app.scss', 'dist/css/bundle.min.css')
 46 |   .disableNotifications()
 47 |   .options({
 48 |     processCssUrls: false,
 49 |     postCss: [tailwindcss('src/tailwind-config.js')],
 50 |     autoprefixer: {
 51 |       options: {
 52 |         browsers: ['last 10 versions'],
 53 |       },
 54 |     },
 55 |   })
 56 | 
 57 |   // Move images to dist directory
 58 |   .copyDirectory('src/img', 'dist/img')
 59 | 
 60 |   // Move fonts to dist directory
 61 |   .copyDirectory('src/fonts', 'dist/fonts')
 62 | 
 63 |   // BrowserSync
 64 |   .browserSync({
 65 |     proxy: config.proxyUrl,
 66 |     host: config.siteUrl,
 67 |     open: config.openOnStart,
 68 |     port: config.port,
 69 |     https: {
 70 |       key: config.pathToLocalSSLKey,
 71 |       cert: config.pathToLocalSSLCert
 72 |     },
 73 |     files: config.filesToWatch
 74 |   })
 75 | 
 76 | // remove unused CSS from files - only used when running npm run production
 77 | if (mix.inProduction()) {
 78 |   mix.options({
 79 |     uglify: {
 80 |       uglifyOptions: {
 81 |         mangle: true,
 82 | 
 83 |         compress: {
 84 |           warnings: false, // Suppress uglification warnings
 85 |           pure_getters: true,
 86 |           conditionals: true,
 87 |           unused: true,
 88 |           comparisons: true,
 89 |           sequences: true,
 90 |           dead_code: true,
 91 |           evaluate: true,
 92 |           if_return: true,
 93 |           join_vars: true,
 94 |         },
 95 | 
 96 |         output: {
 97 |           comments: false,
 98 |         },
 99 | 
100 |         exclude: [/\.min\.js$/gi], // skip pre-minified libs
101 |       },
102 |     },
103 |   })
104 | 
105 |   // Purge CSS config
106 |   // more examples can be found at https://gist.github.com/jack-pallot/217a5d172ffa43c8c85df2cb41b80bad
107 |   mix.webpackConfig({
108 |     plugins: [
109 |       new PurgecssPlugin({
110 |         paths: glob.sync([
111 |           path.join(__dirname, './**/*.php'),
112 |           path.join(__dirname, 'src/js/**/*.js'),
113 |           path.join(__dirname, 'src/js/components/**/*.vue'),
114 |         ]),
115 | 
116 |         extractors: [
117 |           {
118 |             extractor: TailwindExtractor,
119 |             extensions: ['html', 'php', 'js', 'vue'],
120 |           },
121 |         ],
122 | 
123 |         whitelist: [
124 |           'p',
125 |           'h1',
126 |           'h2',
127 |           'h3',
128 |           'h4',
129 |           'h5',
130 |           'h6',
131 |           'hr',
132 |           'ol',
133 |           'ol li',
134 |           'ul',
135 |           'ul li',
136 |           'em',
137 |           'b',
138 |           'strong',
139 |           'blockquote',
140 |         ],
141 | 
142 |         whitelistPatterns: [],
143 |       }),
144 |     ],
145 |   })
146 | }
147 | 


--------------------------------------------------------------------------------