barrel-dev/cask

There is no license information available for the latest version (dev-master) of this package.

Cask is a WordPress starter theme with a modern development workflow.

Maintainers

Details

gitlab.com/barrel/barrel-wordpress-theme

Source

Issues

Installs: 1

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Forks: 1

dev-master 2019-09-12 15:02 UTC

Unknown License 4ef473044b2d942b0c4b9e297954f31884c89d1a

This package is not auto-updated.

Last update: 2025-06-28 21:27:49 UTC

README

Build Status

Cask is a WordPress starter theme with a modern development workflow.

Features

  • PostCSS for transforming styles with JS plugins, which lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more
  • ES6 JS Modules for modular development of markup to css and js files
  • Webpack for 'piling, preprocessing, and concatenating/minifying files
  • Browsersync for synchronized browser testing
  • The Module API for modular WordPress theme development
  • BEM methodology to help with CSS class naming and creating reusable components.
  • Stave, a light functional CSS library to supplement BEM definitions.
  • GitLab CI config for testing and auto-deployment (with Pantheon)

See a working example at dev-barrel-base-theme.pantheonsite.io.

Requirements

Make sure all dependencies have been installed before moving on:

The theme makes use of the barrel-cli, which wraps much of the webpack, postcss, and browsersync functionality along with tooling for our modular development workflow.

If you have an issue with setup, please open an issue on GitHub.

Theme installation

Install Cask using Composer from your WordPress themes directory (replace your-theme-name below with the name of your theme):

# @ wp-content/themes/
$ composer create-project barrel/cask your-theme-name

To install the latest development version of Cask, add dev-master to the end of the command:

$ composer create-project barrel/cask your-theme-name dev-master

During theme installation you will have options to update style.css theme headers, select a CSS framework, and configure Browsersync.

Theme structure

themes/your-theme-name/   # → Root of your Cask based theme
├── .babelrc              # → Babel Config
├── .editorconfig         # → EditorConfig
├── .eslintrc.js          # → EsLint/Standard Config
├── .gitignore            # → Git Ignore file pattern
├── .stylelintrc          # → StyleLint Config
├── acf-json/             # → ACF JSON autoloading
├── assets/               # → Front-end assets
│   ├── img/              # → Theme images
│   │   └── favicon/      # → Favicon images
│   ├── fonts/            # → Theme fonts
│   └── *.min.(css|js)    # → Built theme assets (never edit)
├── cpt-json/             # → CPT and taxonomy definitions
├── config.yml            # → Browsersync proxy targets
├── composer.json         # → Empty composer config
├── functions.php         # → Theme includes for initialization and helpers 
├── lib/                  # → Theme PHP
│   ├── helpers/          # → Helper files
│   └── vendor/           # → Composer packages (never edit)
├── modules/              # → Front-end modules (PHP, CSS, JS)
├── node_modules/         # → Node.js packages (never edit)
├── package-lock.json     # → Node.js dependency lockfile (new packages only)
├── package.json          # → Node.js dependencies and scripts
├── postcss.config.js     # → PostCSS Config
├── README.md             # → This file 
├── screenshot.png        # → Theme screenshot for WP admin
├── style.css             # → Theme meta information
├── src/                  # → Theme PHP
│   ├── css/              # → Theme stylesheets
│   └── js/               # → Theme javascript
├── tasks/                # → Theme tasks (node/webpack)
├── templates/            # → Theme templates
└── webpack.config.css    # → Webpack config

Theme setup

Edit lib/class-theme-init.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, etc.

Theme development

  • Run npm i && npm run dependencies from the theme directory to install dependencies
  • Update config.yml settings:
    • production.target should reflect your live environment hostname (if applicable)
    • development.target should reflect your local development hostname

Theme commands

  • npm start — Compile assets when file changes are made, start Browsersync session
  • npm run build — Compile and optimize the files in your assets directory
  • npm run test — Test code style and syntax

Documentation

  • Cask documentation — markdown files provided throughout this repository

Contributing

Contributions are welcome from everyone. We have contributing guidelines to help you get started.

JavaScript Style Guide