CpMultiplane is a simple, lightweight php frontend, that is based on the fast and headless Cockpit CMS. It is meant to be used by developers, who need a base to create individual websites. If you search for a one-click solution, this is the wrong place for you.
CpMultiplane is not finished, yet, but I already use it in production for a few small websites.
- Docs source
- CpMultiplane i18n, Cockpit i18n
- Cockpit, Cockpit source
- Cockpit docs, inofficial Cockpit docs
- Thread in Cockpit support forum
My main goals
- Privacy by design and privacy by default
- Developer friendliness
- no plugins to deactivate half of the core features needed
- ability to adjust everything
- theming without div soup
- Clean backend for my clients - Cockpit CMS with addons and modifications
- Structured data - keep the system and the data portable and future proof
- Modular and reusable code
- Multilingualism by design
Why reinventing the wheel?
In short: I wasn't able to find an existing system, that matched my goals.
tldr: In the past I mostly worked with WordPress and jekyll and sometimes I had a look at different systems.
WordPress seems to be very user friendly, but it tends users to press their data into predefined structures. It is not developer friendly. More than 2000 functions in the global scope, backwards compatibility to the outdated PHP5, a lot of nearly similar named function, no output buffer, adware and bloatware as plugins, no sensibility for privacy (Google fonts, gravater), security issues... It's a long list.
With Cockpit I found the ideal backend, that is easy to extend, that stores data in a structured way and that gives me multiple interfaces to query the data. While exploring that cms, I discovered a lot of on-board tools, that I can use for a frontend. I started to write the first prototype Monoplane, which I than developed further to CpMultiplane.
CpMultiplane is a wrapper, that loads Cockpit as a library, changes a few variables and constants and than registers the module Multiplane.
Cockpit CMS is headless without a frontend. It is created for pure data management in a structured way and it has multiple interfaces to get or change that data. CpMultiplane uses the php api for the frontend and the default user interface as backend.
Cockpit comes with the most important libraries, but in total it was kept clean and simple. It is modular extendible and was made to be customized to your individual needs.
The module Multiplane takes care of translating url paths into database request and to deliver the data as html.
This addon is the gateway between Cockpit and CpMultiplane to create different configuration profiles or to adjust the user interface.
To be able to reach pages with a readable, seo friendly url instead of a cryptic id, this addon creates unique url slugs from page titles in the background.
The Forms module from Cockpit is quite rudimentary. With the FormValidation addon you can add form fields and validate form data.
BlockEditor and LayoutComponents, ImageResize, VideoLinkField, rljUtils, EditorFormats, BlockEditor...
mp.js for image lightboxes or privacy friendly embedding of YouTube videos.
The other theme "rljstripes" serves mainly as inspiration, how to create a child theme.
Chart of components
If you put all the components together, the cunstruct looks kind of like this:
Fields or data structure
CpMultiplane heavily relies on field names and types. A few of them have hard coded meanings, but most of them are handled via views and partials of the rljbase theme.
Since CpMultiplane has only one base theme, that serves as skeleton for child themes, in the following text I go deeper into the components of the "rljbase" theme.
Lexy is another on-board tool of Cockpit. It is inspired by laravels' BladeCompiler. The syntax feels a bit like liquid (jekyll), but it is far more simple.
A theme has multiple template files, that are stored in its'
mp.js is modular and is built with Node.js and browserify.
- simple cookie management
- handle privacy events
- simple video - display YouTube and Vimeo iframes with a thumbnail and don't load videos without user's privacy consent
- simple image lightbox
- simple image carousel
- simple mail address protection
- prevents a
:targetjump in the pure css mobile nav