![]() See the Sass and Twig sections below for more Sass 4 of a component: default export is the enable function export default enable Changes to this file trigger a PL rebuild import './_button.twig' // Import local Sass (which in turn imports Bootstrap Sass) import './_button.scss' // Requirement 1 of a component: name export const name = 'button' // Requirement 2 of a component: disable function export function disable ( ) // Req. import $ from 'jquery' // Import specific plugins this component may need import 'bootstrap/js/src/button' // source/_patterns/01-atoms/00-protons/index.js import 'protons' // Module template. source/_patterns/01-atoms/button/index.js // Import *EVERY* NPM dependency. Instead of making a developer create all required files by hand, we use a Yeoman generator to easily create new component folders. └── index.js # Imports and applies the design system to a bundle for DrupalĬomponents have a specific file structure. ├── # Webpack config unique to prod, or that overrides shared ├── # Webpack config unique to dev, or that overrides shared ├── # Webpack config shared between drupal dev and drupal prod ├── 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).Strict Atomic Design component structure.Drupal theme, Grav theme, and Pattern Lab app.In depth documentation about frontend approach using this project at Phase2 Frontend Docs Prerequisites Apply that design system to a Drupal theme.Apply that design system to a locally-served Pattern Lab for rapid prototyping.Build an application-agnostic design system.Particle is an opinionated set of tools and examples to: Particle: A design system integrating to Pattern Lab and a Drupal 8 theme
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |