Lessons Learned: Component Based Design with Paragraphs
Anthony Simone
The ideas of Atomic Design and component based design allow one to create an established structure within which a large scale front end project can be built. The CMS space hasn’t always been the most friendly toward implementing these types of patterns. Whether it’s difficulty in creating a content architecture that models your front end design system within Drupal or the feeling of lack of control over generated markup, it can feel like an uphill battle.
The Paragraphs module gives us the tools to create much more well defined and structured component based architectures upon which modular front end systems can be built. The Paragraphs module, however, comes with no rules. As a site architect and front end developer, you must decide how to implement Paragraphs. There is definitely a lot of room for flexibility in implementation, but there are many best practices that can be followed to allow for a very clean, scalable, and extendable front end design system to be built within Drupal 8.
The goals of this session will be the following:
Review the basic concepts and benefits of component based design
Discuss the paragraphs module and how to create an implementation based on a well defined content architecture
Explore some Drupal best practices that allow for a successful component based design system implementation
*Some prior knowledge of the Paragraphs module, Drupal 8, and front end development tools would be best, but are not completely required.
Slides: https://slides.com/anthonysimone/paragraphs
https://2017.badcamp.net/session/design-theme-ux/intermediate/lessons-learned-component-based-design-paragraphs
The ideas of Atomic Design and component based design allow one to create an established structure within which a large scale front end project can be built. The CMS space hasn’t always been the most friendly toward implementing these types of patterns. Whether it’s difficulty in creating a content architecture that models your front end design system within Drupal or the feeling of lack of control over generated markup, it can feel like an uphill battle.
The Paragraphs module gives us the tools to create much more well defined and structured component based architectures upon which modular front end systems can be built. The Paragraphs module, however, comes with no rules. As a site architect and front end developer, you must decide how to implement Paragraphs. There is definitely a lot of room for flexibility in implementation, but there are many best practices that can be followed to allow for a very clean, scalable, and extendable front end design system to be built within Drupal 8.
The goals of this session will be the following:
Review the basic concepts and benefits of component based design
Discuss the paragraphs module and how to create an implementation based on a well defined content architecture
Explore some Drupal best practices that allow for a successful component based design system implementation
*Some prior knowledge of the Paragraphs module, Drupal 8, and front end development tools would be best, but are not completely required.
Slides: https://slides.com/anthonysimone/paragraphs
https://2017.badcamp.net/session/design-theme-ux/intermediate/lessons-learned-component-based-design-paragraphs