Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jack-pallot/dogpatch
A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS.
https://github.com/jack-pallot/dogpatch
Last synced: about 2 months ago
JSON representation
A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/jack-pallot/dogpatch
- Owner: jack-pallot
- Created: 2018-02-01T12:40:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-27T12:59:32.000Z (almost 5 years ago)
- Last Synced: 2024-04-10T04:07:12.720Z (6 months ago)
- Language: JavaScript
- Homepage: https://github.com/jack-pallot/dogpatch
- Size: 507 KB
- Stars: 50
- Watchers: 7
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-tailwindcss - Dogpatch - WordPress starter using webpack, Vue, Babel and Tailwind CSS. (Starters & Themes)
README
# Dogpatch
### A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS.
----------
## Inside Dogpatch
### Javascript
* A Webpack build system via Laravel Mix
* Babel and ES Next support
* ES2015 module support
* Support for VueJS and Vue single file components
* Build scripts - minifying, concatenation and renaming
* Hot module reloading
* Prettier config (can be adjusted if you prefer tabs over spaces)
## CSS
* Support for Sass
* ITCSS directory structure for your Sass files
* Zero setup Tailwind CSS framework support
* Accessibility utilities for Tailwind CSS
* Purge CSS to eliminate dead code (HTML, PHP, JS and Vue files)
## WordPress
* 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
* Component inheritance using the get_template_partial() function - letting you pass in props to a PHP template for DRY templating
* .gitignore file with common patterns
----------
## Getting Started
### Installing
Download the ZIP or clone the repository into your WordPress themes directory.
`$ cd` into the Dogpatch theme directory.
**Install the project dependencies using NPM or Yarn:**
npm install
yarn install
- Amend the webpack.mix.js file with your settings.
- Amend the src/tailwind.config.js file with your custom CSS classes.
⚠️ You will likely want to remove any references of Dogpatch and replace them with your current project name instead. ⚠️
* Rename the theme folder
* Amend the settings in style.css
* Adjust the screenshots to your design
### Development
**To run a single instance of the dev build:**
npm run dev
yarn run dev
**To watch files through with live browser reloading:**
npm run watch
yarn run watch
### Hot Module Reloading
**Hot module reloading is possible using the following:**
npm run hot
yarn run hot
### Production
**Building for production will run the following tasks:**
* Convert ES Next using Babel
* Minify and concat Sass and JS files
* Run PurgeCSS to eliminate dead code
* Auto-prefix
* Move to /dist directory
npm run production
yarn run production
----------
## Updating
**0.0.2**
Two new functions added:
remove-gutenberg-styles.php - removes Gutenberg block editor styles
pretty-print.php - nicer formatting on nested print statements with print_p()
Copy new files from /functions/core and /functions/template and copy functions.php. Comment out as needed.
----------
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.
----------
## Todo
- Look at extracting Tailwind somehow as an optional dependency
- Built in linting using ES Lint
- Built in testing using Vue Testing Tools and either Mocha or Jest.
----------
## License
[GNU General Public License v3.0](https://choosealicense.com/licenses/lgpl-3.0/)