component-based-theming
Resources for component-based theming with Drupal and Twig
https://github.com/aleksip/component-based-theming
Last synced: about 5 hours ago
JSON representation
-
Drupal themes and design systems with Drupal integration
- Bear Skin
- Bolt - design-system/bolt))
- Emulsify
- Flexi Pattern Lab
- Gesso
- Radix
- Emulsify Drupal
- Particle
- Shila theme
- Theme Generator
- Union
- Wingsuit
- Zen
- Bootstrap Storybook
-
Drupal modules
-
Projects using Twig with JavaScript
-
External tools
-
Pattern Lab
-
Fractal
-
Storybook
-
-
Twig implementations and renderers for JavaScript
-
Storybook
-
-
Full component-based solutions for Drupal
- Compony - theme-gulp), [Components](https://www.compony.io/components))
-
Blog posts and articles
-
Storybook
- Demystifying components integration with Drupal
- Pattern Lab and Drupal 9: Prepare your theme for Twig 2
- How to integrate your pattern library with Drupal's layout builder using Component Blocks module
- Introducing the New Version of Emulsify: Emulsify Design System
- Building a Drupal 8 Theme with Mediacurrent's Theme Generator
- Building my site with Tome and Single File Components
- Drupal themes and component libraries
- Integrating Storybook with Drupal
- Compony and the climate crisis
- Decoupling the front-end without APIs and JavaScript
- Cross Component Fragility
- Simplifying Drupal frontend with Single File Components
- Writing View Mode Templates in PatternLab
- Getting started
- Component-based theming with Layout Builder
- How to update your downloaded components?
- How to set up multiple Compony themes in your project
- A new approach for a new Pattern Lab
- Can I See the Menu, Please? Building and Integrating a Menu in Drupal
- Using Twig with Storybook and Drupal
- Drupal UI Patterns: Component Driven Development in Drupal
- Secure components
- What is Compony?
- Create a Compony-component
- Frontend Architecture for Scalable Design Systems
- Before You Start a Pattern Lab Project with Drupal
- PatternLab: Linking to Patterns
- Handling Drupal attributes in components
- Using join, include, and attributes in YAML (.yml) files with Data Transform Plugin for Pattern Lab
- Decoupling Pattern Lab from your theme a City of San Francisco project
- Creating Reusable Dynamic Content Components
- Drupal 8 Pattern Lab for Component-Based Theming
- Getting the most out of SVGs with Twig templates
- Can I Stop PatternLab Variants from Inheriting Data from their Parent Component
- Responsive images in the Emulsify (PL) theme - The easy way
- Creating Paragraphs Entities for Dynamic Content
- Responsive Images with PatternLab and Drupal - the easy way
- 10 lessons we learned from our first Drupal 8 + Pattern Lab via Emulsify project
- Creating a Card Component in PatternLab and Mapping to Drupal the "right" way
- How to make theme images work in Pattern Lab and Drupal
- My Approach to PatternLab?
- Adding {{ attributes }} to a Drupal PatternLab Theme
- Introducing Twig Components
- Achieving Clarity in Component-based Best Practices
- Componentizing Drupal Front End using Pattern Lab
- Using Pattern Lab in Drupal 7 theme development
- Front end journey into Drupal + Pattern Lab
- Integrating a Drupal Text with Image Paragraph Bundle with Patternlab
- Field Notes: UI Patterns Module
- A first taste of Drupal theming using Pattern Lab
- Integrating a Simple Drupal Text Paragraph Bundle with Patternlab
- Emulsify 2: Building a Full Site Header in Drupal
- Exploring simplicity in Drupal design components
- Performance improvements with Drupal 8 Libraries
- Component Driven Development with Emulsify
- Using UI Patterns module in a component-based Drupal 8 theme
- Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
- Drupal 8 Front-End Architecture
- Anatomy of a (terrific) Drupal 8 theme
- Why should we base Drupal's theme system around components?
- Component-Based Theming in Drupal 8: The Video Series
- Introducing Pattern Lab Starter 8
- A New Design System Architecture
- Pattern Lab and Drupal 8 theme integration update
- Drupal’s front-end future: Component-based theming, OO rendering and targeted JS libraries
- Pattern Lab: Taking Our Workflow from a Linear to Parallel Process
- Making Pattern Lab work with Drupal 8 Twig theme templates
- Atomic design, Pattern Lab and Drupal 8 theme development
- Style-Guide-Driven Development: the new web development
- Drupal’s Layout Initiative and component-based theming
- Using Drupal’s definition files in component-based theming
- 10 lessons we learned from our first Drupal 8 + Pattern Lab via Emulsify project
-
-
Presentations and videos
-
Storybook
- Component theme development with Storybook and Emulsify
- After 5 years, my dream Drupal component workflow is finally here
- Component-Driven Theming with Storybook
- Best practices for Integrating components with Drupal
- Drupal Single File Components
- Using a single Frontend Design System for WordPress and Drupal with Emulsify
- Wait, We Can Re-use this? Design Systems and Component Libraries for Fun and Profit
- An overview of front-end component integration methods in Drupal 8 - overview-of-drupal-8-front-end-component-integration-methods), [YouTube](https://www.youtube.com/watch?v=mQpOIx9ZOpw))
- The future of Drupal theming - 6-7-11#/))
- Integrating Pattern Lab with Drupal 8
- Drag n' Drop/Mix n' Match: Patternkit + Layout Builder - The Next Gen of Drupal Page Building
- Drupal UI Patterns: Component Driven Development in Drupal
- Twig in Fractal in Drupal: Decoupling UI Components from Drupal Data Structures
- How we build component-based Drupal themes
- Frontend Architecture for Scalable Design Systems
- Pattern Lab: The Definitive How-to
- An External Design System in Practice
- An External Design System in Practice
- Getting Atomic with Pattern Lab
- Demystifying Pattern Libraries and Drupal 8
- Component-based Theming with Pattern Lab and Twig - twig-ddd-lisbon))
- Next Gen Design Systems with Pattern Lab, Twig, and Web Components
- Component Based Theming With UI Patterns
- Component-based Drupal
- Implementing an Enterprise Design System the Red Hat Way
- Webpack, ES6, Pattern Lab, and Drupal 8: Hands-on with Design-System-First Development
- Component-Based Design: Step aside Drupal, we’ve got this (er, maybe not?)
- Component Based Theming With UI Patterns - 0m-u_Bmzxg))
- Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
- Decouple your Twig from PHP and make Frontenders happy!
- Atomic Design in Drupal 8: Isolating frontend workflow with Pattern Lab!
- Component Based Theming in the Real World
- Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
- Drupal 8 Component Based Theming
- Component Libraries in Drupal Contrib, Core, and Beyond
- Component-driven theming workflow with Pattern Lab and Drupal 8
- Streamlined Front-End development with Pattern Lab & Twig
- Component-driven Drupal theming
- Building Drupal Sites with Components - drupal-sites-with-components), [YouTube](https://www.youtube.com/watch?v=SJVGNpOovJw))
- Integrating Pattern Lab with a CMS Build
- The Big Easy: Streamlined Front-end Development with Pattern Lab and Twig
- The New Design Workflow
- Integrating Pattern Lab with a CMS Build
- Twig in Fractal in Drupal: Decoupling UI Components from Drupal Data Structures
- Pinterest’s Component Based Design: Breaking down silos, saving time, and empowering content editors
-
-
Related Drupal.org issues
-
Storybook
- Decouple and componentize our Twig implementation
- Add Components Module to Drupal Core
- Theme system improvements roadmap
- Allow a component library to define asset libraries
- Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews, client-side re-rendering)
- Move Attribute classes under Drupal\\Component
-
-
Other resources
-
Component-based theming with Drupal explained for clients
Programming Languages
Categories
Blog posts and articles
72
Presentations and videos
45
External tools
18
Drupal themes and design systems with Drupal integration
14
Drupal modules
12
Related Drupal.org issues
6
Other resources
4
Twig implementations and renderers for JavaScript
3
Component-based theming with Drupal explained for clients
1
Full component-based solutions for Drupal
1
Projects using Twig with JavaScript
1
Sub Categories
Keywords
pattern-lab
6
drupal
4
drupal-8
3
design-systems
3
twig
3
drupal-theme
2
atomic-design
2
javascript
2
php
2
angular
1
fractal
1
pattern-library
1
plugin
1
drupal-7
1
nodejs
1
webpack4
1
gulp
1
twigjs
1
workshop
1
webpack
1
web-components
1
vue
1
vite
1
ui
1
typescript
1
testing
1
svelte
1
styleguide
1
storybook
1
stories
1
react-native
1
react
1
html
1
documentation
1
components
1