Particle
A starter kit for using the prototyping tool, Pattern Lab, in tandem with a Drupal theme. Utilizes Webpack for all asset management.
Overview
Particle is a design system that integrates with Pattern Lab and Drupal 8 theme. It provides an opinionated set of tools and examples to build an application-agnostic design system and apply it to Pattern Lab for rapid prototyping, as well as apply it to a Drupal theme. It comes with in-depth documentation about the frontend approach using this project.
Features
- Application-agnostic design system
- Integration with Pattern Lab for rapid prototyping
- Integration with Drupal theme
- Strict Atomic Design component structure
- Webpack bundling of CSS, JavaScript, font, and static image assets for multiple targets
- Webpack Dev Server for localhosting and hot reloading of assets into Pattern Lab
- Twig namespaced paths automatically added into Drupal theme and Pattern Lab config
- Iconfont auto-generation
- Auto-linting against the AirBnB JavaScript Style Guide
- Fully configurable Webpack files
- Simple Yeoman generator for Design System component creation
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Gulp
Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.
- Prism JS
PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.
