Launchpad

Launchpad is a framework built from the ground up for building WordPress projects. Launchpad is comprised of 4 parts, A WordPress plugin which contains all of the custom blocks, a WordPress theme which contains common templates and a structure for styling, a development boilerplate which helps with developing the plugin and the theme along with automated testing, and a cloneable boilerplate which works as a starting point for new projects, including everything from the dev boilerplate and also deployment steps.

The blocks plugin

Source code: AtomicSmash/Launchpad-blocks: A companion plugin to our in-house Launchpad WordPress theme.

Packagist: atomicsmash/launchpad-blocks – Packagist.org

The blocks plugin contains numerous custom blocks, including Accordions, Tabs, Gallery carousels, Manual post select, PHP template part, navigation blocks (for mega-navs) and icon. Each block contains all it’s own structure styling and functional JavaScript, along with automated tests that can be run from the dev boilerplate or on a client’s site.

Launchpad blocks plugin was deliberately kept separate from the theme so that existing projects which weren’t built on Launchpad could make use of the custom blocks we’d made, making it easier to update existing client sites with new blocks which were thoroughly tested and audited, and all that is required was applying matching decorative styling.

The plugin also contains a couple of PHP functions which make it easier to use blocks from within a PHP file simply by defining the attributes and inner blocks. This saves a great deal of time by letting us build a component once (such as buttons) and then re-use it multiple times, even within other blocks instead of needing to build a PHP component for it.

The theme

Source code: AtomicSmash/Launchpad: Our in-house WordPress theme

Packagist: atomicsmash/launchpad – Packagist.org

The aim of the theme is to standardise some common areas of sites so that we can spin up a site quickly. This includes creating templates like archive and single templates, template parts such as post cards, simple components such as chip components.

It also contains a colour structure which aims to make it easier to pair accessible colours together, so when a client selects a background colour, the text colour automatically changes to an accessible colour instead of requiring the client to pick one that works. In practice this also allows us to skip some CSS for styling as well simply by using the same classes to set background colours saving development time.