Starbase for WordPress is a starter theme for WordPress developers that is based on _s, but modified to ditch jQuery & CSS and instead use a build system (starbase) that encompasses Webpack 3, ES6 & PostCSS (with linting) along with some of the juiciest open source tools around:
- Node.js & Yarn
- Webpack 3
- Babel (ES6) w/ ESLint
- PostCSS w/
- ...and more!
Starbase (all versions) is completely free, open source and public domain, so you are free to do whatever you wish with it -- commercially or personally. You can buy me a beer next time you're in Boston, star the project and tell a friend, or you can erase all signs of origin and tell your coworkers that you made it yourself. It's all good!
After completing the steps below, you will be ready to begin using Starbase:
- Install Node.js (latest LTS recommended)
- Install Yarn
- Clone Starbase into your themes folder
- Install dependencies by running
yarnin the new theme root directory
Note: if you hate Yarn for some reason, you can skip Step 2 and use
npm install instead of
yarn in Step 4.
building, watching & developing
Starbase uses Webpack to watch the
/src folder and rebuild the assets (to
/assets) when changes are detected.
npm run watch in the project root to begin the build & watch process. As you modify code in
/src, the project will be recompiled and the contents of
/assets will refresh.
cd /path/to/starbase npm run watch
To run a one-time build without watching for changes, use
npm run build.
Note: the contents of
/assets will not be deleted during the build process. If you'd like to clean up the directory for any reason, just delete the entire
/assets folder and rebuild it via
npm run build.
features you may want to remove
fetch & promise polyfills
Because Starbase was built to accommodate ES6 & CommonJS (and not JQuery) it is assumed that you'll be using fetch for asynchronous requests.
If you want to remove these for any reason, perform the following steps:
yarn remove es6-promise whatwg-fetchin the project root to remove the dependencies
- remove the first few lines of
/src/bundle.js(it'll be obvious which ones)
Note: if you think you might use fetch in the future, comment-out the includes instead of deleting them. Commented-out code is stripped out in production builds.
features you may want to customize
/.stylelintrc respectively) included out of the box contain some basic common rules. Modify them to your liking to encourage consistent code throughout your project.
airbnb eslint config
/.eslintrc file. I've included a couple basic overrides (in
/.eslintrc) to demonstrate usage.
to remove the airbnb eslint config:
/.eslintrc, remove the line that says
/package.json, remove the
npm updateif you hate yarn)
After completing the steps above, the only rules that eslint will enforce are the ones you define in the
rules object in
features you may want to know about
global css variables
Starbase supports global CSS variables via the :root pseudo-element, which can be found in
/src/variables/variables.css. You can split your variables into multiple files, and just import them into
/src/variables/variables.css if you'd like them to be more granular.
These variables automatically injected into any CSS in the
/src/app directories, so they are always available for use in your app & component stylesheets.
Each component that comes with Starbase uses at least one variable to demonstrate the functionality.
All variables are cleaned up in your production code and only the values will remain, so there is no bloat or downside to using these variables. Go nuts!