Mockup and Patternslib#
Mockup together with Patternslib are used to build the UI toolkit for Classic UI, a frontend for Plone.
View the interactive documentation of Mockup.
Get started#
bobtemplates.plone provides mr.bob templates to generate packages for Plone projects.
Plone CLI (plonecli) provides a command line client for bobtemplates.plone.
Install plonecli into your Python user packages to make it available to all your projects.
pip install plonecli --user
Create an add-on package with plonecli.
plonecli create addon project.addon
This will create a package project.addon, which you can install in your Plone site.
You can cd to the project, and add features to that package, such as content types, behaviors, control panels, or REST API endpoints.
cd project.addon
plonecli add content_type
plonecli add behavior
plonecli theme_barceloneta
Each of the features asks several questions to create the desired feature, customized to your preferences.
You can check the full list of available features using the -l parameter:
plonecli -l
Create a custom pattern#
To create a custom pattern in your add-on, use the mockup_pattern bobtemplate.
cd project.addon
plonecli add mockup_pattern
Next, enter your pattern name without the pat- prefix
In the following example, its name is testpattern.
--> Pattern name (without “pat-” prefix) [my-pattern]: testpattern
This creates the necessary JavaScript resources and webpack configuration for you, as shown in the following file system tree diagram.
...
├── resources
| ├── pat-testpattern
| | ├── documentation.md
| | ├── testpattern.js
| | ├── testpattern.scss
| | ├── testpattern.test.js
│ ├── bundle.js
│ ├── index.html
│ ├── index.js
├── package.json
├── webpack.config.js
...
All your pattern JavaScript code goes into resources/pat-testpattern/testpattern.js.
SCSS files can be imported, too, since webpack provides the sass-loader module.
Next, install the npm packages using yarn.
yarn install
When you finish writing your JavaScript code, you have to build the bundle with the following command.
yarn build
This creates the webpack chunks, the JavaScript bundle files, and a demo browser view in your add-on package.
...
├── src
| ├── project
| | ├── addon
| | | ├── browser
| | | | ├── static
| | | | | ├── bundles
| | | | | | ├── chunks
| | | | | | ├── addon-remote.min.js
| | | | | | ├── addon-remote.min.js.map
| | | | | | ├── addon.min.js
| | | | | | ├── addon.min.js.map
| | | | ├── pattern-demo.pt
There is also an XML file in src/project/addon/profiles/default/registry/bundles.xml which registers the addon-remote.min.js in the resources registry.
Important
You must re-import your profile with an upgrade step if you installed your add-on in Plone before adding the pattern. Uninstall, then re-install, the add-on in the control panel. Alternatively you can write a GenericSetup upgrade step.
You can access the demo browser view in your browser with http://localhost:8080/Plone/@@addon-pattern-demo.
Alternatively you can implement it in your own templates by adding the CSS class pat-testpattern to an HTML tag, such as an img tag.
<img class="pat-testpattern">