![]() ![]() ├── particle.theme # Drupal preprocess functions ├── # The output js and css bundles are included here ├── index.js # Imports and applies the design system to a bundle for Drupal │ ├── # Example Drupal template integrating, say └──. ├── templates # Templates integrate Drupal data with design system patterns │ └── _drupal-styles.scss # Add more drupal styles here, like _views.scss, _field.scss etc ├── scss/ # Theme-only Sass, tweaks to Drupalisms that need not be in the DS The three apps included are a Drupal theme, Grav theme, and a Pattern Lab installation.Īpps/pl/ holds the entry point for all Pattern Lab assets, as well as the PHP engine: # design-system.js # The ultimate importer/exporter of the design system pieces │ │ │ └── index.js # Component entry point (See "Anatomy of a Component below) │ │ │ ├── _button.twig # The pure component template, underscore required │ │ │ ├── _button.scss # Most components require styles, underscore required │ │ │ │ └── buttons.yml # Data provided to the demo pattern │ │ │ │ ├── buttons.twig # Demonstrate with a plural name, visible to PL since no underscore │ │ │ │ ├── index.js # Pulls in twig, yaml, md inside demo/ so webpack is aware │ │ │ ├── demo # Patterns feature a demo folder to show implementation │ │ │ ├── _tests_ # Jest javascript unit tests │ │ ├── button # For instance, the button atom │ ├── 01-atoms # Twig namespace: JS/Sass namespace: atoms ├── _patterns # All assets live within an Atomic "pattern" this readme should be at any/where/particle/README.md) Particle builds design systems in dev mode for local hosting, or production mode for optimized asset generation. Simple Yeoman generator for Design System component creation.All Webpack and Gulp files are fully configurable.Auto-linting against the AirBnB JavaScript Style Guide and sane Sass standards.Bootstrap 4 integration, used for all starting example components.Within any twig file, means the same thing to Drupal theme and Pattern Lab. Twig namespaced paths automatically added into Drupal theme and Pattern Lab config.Webpack Dev Server for local hosting and hot reloading of assets into Pattern Lab.Webpack bundling of all CSS, javascript, font, and static image assets for multiple targets (Drupal theme, Grav theme, Pattern Lab). ![]()
0 Comments
Leave a Reply. |