Introducing Barebones, our starter theme for WordPress developers

Barebones serves as the foundation of every custom WordPress project we create at Benchmark. It has continued to evolve as WordPress, and our approach to creating bespoke websites, has developed over the years.

With version 5, we’re introducing native support for custom blocks, faster frontend tooling and detailed documentation to improve the developer experience and help you create better websites more quickly and more consistently than ever.

In this article, we explore the origins of Barebones, our intentions for developing it and how it has advanced with version 5.

Why Barebones?

Barebones was first created over ten years ago with a simple aim: create a skeletal starter theme for WordPress projects without the bloat of some contemporary alternatives. We found ourselves starting projects with tools like Bootstrap to benefit from their frontend tooling, but having to strip out or override large chunks of code before we could get started implementing bespoke designs.

Working on WordPress projects day after day, we knew that most projects required a few core elements:

• A consistent grid system, with support for common breakpoints across desktop, mobile and tablet devices
• Support for multiple navigation menus, including the ability to adapt them for smaller breakpoints
• Clear typography and colour palettes, defined at the start of a build, from a project’s style guide
• Clean enqueuing of script files and stylesheets, including support for frameworks like jQuery
• Frontend tooling to compile and minify asset files, including support for watching files during development

With those foundations in place, the core development work of creating layouts, frontend styling and CMS integration could begin. As a starter theme with all of the above, and more, baked in, Barebones allows us to skip the repetitive setup work and focus our time on implementing custom designs.

What Barebones is not

Barebones is not a page builder or complete design system. It does not include ready-made components or predefined styling. If Barebones has one objective, it is to allow you, as a developer, to go from initial install to writing custom theme code as quickly as possible.

Barebones is not a highly opinionated framework that aims to make decisions about how your WordPress application should be structured. We remain focussed on the practicalities of the WordPress theme itself, not the structure of the WordPress directories or core files. This means you can use Barebones whether you’re building with a vanilla WordPress structure or you’re using a custom framework.

How much does it cost?

Barebones is open source and available under the GNU General Public License v2.0 or later. It has been that way since the very beginning.

The web development sector thrives through cooperation. We have benefitted from open-source frameworks like WordPress and rely on numerous libraries every day that are maintained by individuals or teams who are willing to be generous with their time. Barebones is our way of giving back to that community, by providing WordPress developers with what we believe is one of the cleanest ways to create custom WordPress websites.

The custom block workflow described here uses ACF PRO, a separately licensed plugin. ACF Blocks is a premium feature of ACF PRO, so you should account for that dependency and any applicable costs when planning a project.

What’s new in version 5?

The latest version of Barebones contains our biggest shift to date. At its heart is our move to block-driven development, but there have been a number of other updates to core tools including the grid and frontend tooling. For the full breakdown of the latest features, be sure to dive into the documentation. Within this article, we will explore some of these changes, and the reasoning behind them, in more detail.

Custom blocks

It’s hard to overstate the impact that the Advanced Custom Fields plugin has had on custom WordPress development. Its introduction of Flexible Layouts with the release of ACF PRO in 2014 allowed developers to move from rigid template-based builds to pages created as a collection of discrete modules.

That impact has not waned over the years and with the introduction of custom blocks in 2019, the WordPress development landscape changed again. The Block Editor, also known by its development moniker of the Gutenberg Editor, arguably took some time to mature after its original introduction. At Benchmark, we waited some time before migrating our development practices from Flexible Layouts to the new block-based approach. With version 5 of Barebones, we complete that migration to embrace a component-driven approach to building WordPress websites.

The real-time preview at the heart of the Block Editor speeds up content editing by answering two common questions: which block should I use and what will the content look like? Complex WordPress sites can use dozens of individual layouts and with Flexible Layouts, adding the right layout was too often a guessing game.

In addition to the benefits for content editors, the Block Editor also offers numerous improvements to the developer experience and code maintainability for large and evolving websites, including:

• Block-led development: Supporting the compartmentalising of theme code into separate stylesheets and script files
• Better frontend performance: Block assets are compiled separately, and block JavaScript loads only when the corresponding block is rendered. This avoids including every block’s scripts in a single theme-wide bundle
• Improved management of ACF Field Groups: Field groups are defined for each block, breaking up what could previously have been very long, complex field groups when defining all the options for complex Flexible Layout fields
• Improved change control: All of this modularity means more concise commits with changes targeting specific blocks and their assets

CSS Grid

The first-party Simple Grid system has been at the heart of Barebones since the very beginning. As the name suggests, it is a fluid and responsive grid supporting a dynamic number of columns and maximum grid width as demanded by each individual project. Prior to version 5 of Barebones, Simple Grid was an imported module. With this release, we’ve acknowledged its role at the very heart of the Barebones system and rolled the code into the Barebones theme.

The float-based grid system was also due an update. With this release, we’ve rebuilt it using CSS Grid. In practice, this means some changes to how indented columns are assigned; gone are the offsets in favour of defining the starting column of each child element within a row. Find out more about this change and how the new Grid system operates within the Barebones documentation.

Benefits of the new grid-based structure include:

• More precise column placement: Columns can define both how many tracks they span and where they begin. The new col--*-start-* utilities make offset layouts explicit and predictable
• Better two-dimensional control: Grid provides a foundation for controlling both rows and columns, making it better suited to complex WordPress components and custom blocks
• Easier visual positioning: Columns can be moved, reordered or made to start on a particular grid line without adding empty elements or relying on margin calculations
• More maintainable SCSS: The system no longer needs separate float, flex and offset behaviours. Its generated utilities use a consistent set of native Grid properties

Vite

Barebones 5 replaces Laravel Mix with Vite to provide a faster, leaner build process including a new block-aware asset pipeline. In line with our block-driven development ethos, Barebones now automatically discovers JavaScript and SCSS inside each block and compiles them into individual files for inclusion into the website frontend.

For developers, the move from Laravel Mix to Vite comes with a number of advantages:

• A smaller toolchain: Vite and Sass replace multiple packages including Laravel Mix, Webpack, sass-loader and more. This means less configuration and fewer dependencies to maintain in a codebase that now aligns with currently maintained versions of Node.js
• Faster development builds: Vite’s modern build pipeline provides quicker compilation and more responsive watch-mode rebuilding when working on theme styles, scripts and blocks locally
• Automatic block discovery: Barebones automatically discovers JavaScript and SCSS inside each block directory and compiles them into individual frontend files. These map directly to viewScript and style declarations in block.json
• Better frontend performance: Block scripts are no longer rolled into one theme-wide JavaScript bundle. WordPress can load a block’s assets only where that block is used

To find out more about features like automatic block discovery and the architecture of frontend assets, explore the Barebones documentation.

Get started

You can explore the source code and start with the installation guide.

Browse the rest of the documentation to familiarise yourself with features such as the CSS Grid system.