Purpose
The purpose of this document is to provide a process outline for front-end developers building with Kadence. We aim to develop as much as we can using the Kadence ecosystem.
Patterns
Developers should consider the design in terms of sections – or rows – composed of Blocks, the sum of which will be known as a pattern. All patterns will reside in the Liquid Web Pattern Library and be available through the Kadence Design Library for use on the marketing website.
Pattern Classification
Three pattern classifications have been determined based on the level of customization anticipated to achieve them:
Standard
Criteria:
The pattern can be created using standard Kadence blocks and controls.
Developer Direction:
Patterns will be built in the Editor using Kadence blocks and available configurations. The developer will copy completed patterns to the Liquid Web Pattern Library.
Some Customization
Criteria:
The pattern can be created using standard blocks and controls but may require custom styles or Javascript to accomplish it fully.
Developer Direction:
Patterns will be built in the Editor using Kadence blocks and available configurations. The developer will copy completed patterns to the Liquid Web Pattern Library.
Custom styles and Javascript should reside in the kadence-child-lw child theme.
Full Customization
Criteria:
The pattern requires significant customization to achieve the proposed design or functionality. These patterns could require custom block development or deep customization to existing Kadence blocks and Kadence features (such as Dynamic Content).
Developer Direction:
Build patterns in the Editor using Kadence blocks and available configurations. The developer will copy completed patterns to the Liquid Web Pattern Library.
Custom styles and Javascript should reside in the kadence-child-lw child theme.
Kadence Customization Approach
There will be blocks and patterns represented in our designs that will exceed the capabilities of Editor configuration to achieve. In these situations, we expect to modify or provide custom styles or functionality to meet the feature’s goal. Depending on the feature, you will follow one of the two directions below.
Modified Kadence Blocks
Standalone blocks that cannot be configured to match the design without additional styles, such as Buttons. These blocks should be given a unique class name that will be used to extend, or modify, the existing styles or behavior of the block. The PostCSS partial should have the same name as the block it modifies and should be saved in the /kadence-child-lw/assets/pcss/kadence-block-modifiers directory.
Patterns
These are collections of blocks, composed to achieve a particular design, and that require custom styles or javascript to complete. The PostCSS partials for these should be named after the pattern and saved in the /kadence-child-lw/assets/pcss/patterns directory. Any javascript necessary for the pattern will share the pattern name and reside in the /kadence-child-lw/assets/js/theme directory.
Liquid Web Pattern Library
The developer will save all completed patterns to the Liquid Web Pattern Library.
Organization
The developer will describe their patterns using the category and keyword taxonomies provided by Kadence Cloud. Categories are surfaced in the Kadence Design Library as a clickable sidebar list, while keywords are not exposed but can be searched using the sidebar search field.
In addition to categories and keywords, Kadence Cloud allows for discrete collections to be curated based on categories. These collections can be named and appear at the top of the Design Library, providing alternative patterns with their own categories and keywords when clicked. Collections may be helpful in creating property-specific patterns. i.e., Marketing, Blog, etcetera
*Additional consideration for collections
In addition to fully-baked patterns (sections or rows, as described above), we could create a collection of smaller patterns, such as chips, buttons, etc.
Custom Icons
Kadence Blocks Pro and IcoMoon will be used to provide custom icons in the project. The project will have two sets of custom icons: Outlined and Filled.
IcoMoon
IcoMoon is a web application and service specializing in creating custom icon fonts for web development projects.
How to Add Icons to Project
- Go to IcoMoon
- Create a new project
- Select import icons from the top nav
- Import selection.json from the project repository
- Add your new icons to the kit
- Generate fonts using the settings from the last round