Mockup

screenshot of Mockup
svelte
bootstrap

A collection of client side patterns for faster and easier web development

Overview

Plone Mockup is the JavaScript stack of the Plone Classic UI. It is used for styling and provides a tab with 4 spaces for everything except for HTML and XML files (2 spaces) and the Makefile (TAB). The commit style guide follows the Conventional Commits specification, generating a changelog using the conventional changelog plugin for release-it. The pre-commit hook managed by husky enforces the commit style guide.

Features

  • JavaScript stack for Plone Classic UI
  • Tab with 4 spaces for most files
  • Commit style guide following Conventional Commits specification
  • Changelog generation using conventional changelog plugin for release-it
  • Grouping of commits in the changelog
  • Optional grouping for different types of changes (Breaking Changes, Features, Bug Fixes, Maintenance)
  • Specific groupings for package.json dependencies, documentation, release workflow, code cleanup, individual patterns, and core modules

Development

For development purposes, you can run make serve to directly develop with the 11ty based documentation/demo server. If you want to develop in Plone, you have two options:

  1. Run make watch-plone.
  2. You need buildou.

Summary

Plone Mockup is a JavaScript stack used for styling the Plone Classic UI. It follows a commit style guide based on the Conventional Commits specification and generates a changelog using the conventional changelog plugin for release-it. The installation process requires Node.js and involves running a few commands to install dependencies and start the webpack build process. Development can be done directly with the documentation/demo server or within Plone using the provided options.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.