Kinetic

Kinetic is a Single Directory Component (SDC) driven theme and is intended to maximize reusability, accessibility, performance and efficiency. Kinetic is a perfect starting point for theming your site.

Note: While Kinetic makes a great starting point, it's not intended for child theme extension. This ensures we can prioritize core functionality improvements without risking compatibility issues.

Features

• Single Directory Components (SDCs): Kinetic leverages Drupal 10.1.X's core Single Directory Components feature for a clean, organized codebase. Read about SDCs.
• Uses modern front end technologies including Webpack 5, SCSS, ES6+ Javascript
• No jQuery Dependency!
• Chunk Librarization: Kinetic uses Webpack's SplitChunksPlugin to intelligently group and load files, boosting performance and ensuring JS modules used in multiple components are loaded once.
• Linting: Kinetic uses ESlint and Stylelint to improve code quality, ensure consistency, and help prevent syntax errors. Both linters can have their rules configured as needed.
• Base Components (Unthemed): Build upon a solid foundation of unstyled components for maximum flexibility and minimize overrides and bloat.
• Bootstrap 5: Kinetic extends Bootstrap 5 to provide a strong foundation for base styles.
• Glide.JS: Kinetic uses Glide.js for creating dynamic and highly customizable carousels.
• Production-ready Optimization:
  • PurgeCSS: Eliminate unused CSS in production builds for a smaller footprint.
  • Font Preload Automater: Ensure smooth font rendering with a built-in script that automates font preloading.
• Base Layout Builder Layouts: Kinetic provides a starting point for building custom layout sections to use with Drupal's Layout Builder.

Experimental Features

• Storybook Ready: Kinetic's SDC structure seamlessly integrates with Storybook for efficient component development. We've included basic stories and documentation to jumpstart your workflow. Thanks to https://www.drupal.org/project/storybook

Getting Started

Option 1

1. Follow the link below and download the latest release into your site's custom themes directory.
2. After expanding the files, create a symlink ln -s source/02-components components in the project root. Core looks for a components directory to recognize the SDCs

Option 2

Use our base Drupal Installation Paragon. Paragon streamlines Drupal site creation by offering a pre-configured base, and tools like lando to help developers jump right into custom functionality. It comes with Kinetic installed as your custom theme.

Install Dependencies

Kinetic uses Node 18 to install dependencies. Check the .nvmrc file for the recommended node version

npm install
npm run build

See the the package.json for more scripts

Upcoming

• Polishing and automating aspects of the Storybook stories.
• More starter components.

Documentation

See our README

KineticGPT(Experimental)

For those who have ChatGPT Premium and would like to try out the KineticGPT assistant, you can access it here: KineticGPT