oliverdavies.uk/content/node.d411d43b-7c61-4fa1-b41b-4e7ec5eb862c.yml

uuid:
  - value: d411d43b-7c61-4fa1-b41b-4e7ec5eb862c
langcode:
  - value: en
type:
  - target_id: daily_email
    target_type: node_type
    target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
revision_timestamp:
  - value: '2025-05-11T09:00:18+00:00'
revision_uid:
  - target_type: user
    target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
revision_log: {  }
status:
  - value: true
uid:
  - target_type: user
    target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
title:
  - value: 'Building a design system in a few hours with Symfony'
created:
  - value: '2024-02-27T00:00:00+00:00'
changed:
  - value: '2025-05-11T09:00:18+00:00'
promote:
  - value: false
sticky:
  - value: false
default_langcode:
  - value: true
revision_translation_affected:
  - value: true
path:
  - alias: /daily/2024/02/27/building-a-design-system-in-a-few-hours-with-symfony
    langcode: en
body:
  - value: |
      <p><a href="/podcast/11-mark-conroy">I recently spoke with Mark Conroy</a>, Director of Development at Annertech, on the Beyond Blocks podcast.
      We discussed building something useful in a day and building design systems with web components.</p>

      <p>Inspired by that conversation, I spent this afternoon experimenting with web components and seeing how I could use them within a design system we're building, as I think they can solve a particular need we have.</p>

      <p>Following that, I thought I'd see how I could build my own design system and decided to do it with Symfony and see what I could achieve within a few hours.</p>

      <p>It was a great opportunity to take Symfony 7 for a spin and explore and test some things that <a href="/podcast/10-ryan-weaver-symfonycasts">Ryan Weaver and I discussed in our episode</a>, such as Symfony UX and Twig components.</p>

      <p>Each component is a Twig component with its own PHP class and Twig template, which is rendered when I visit its URL, and I can use the HTML-like <code>&lt;twig:Logo /&gt;</code> syntax to include child components.</p>

      <p>You can <a href="https://github.com/opdavies/symfony-design-system">view the code on GitHub</a>, and it may be something I use and work on in the future.</p>

              
    format: full_html
    processed: |
      <p><a href="/podcast/11-mark-conroy">I recently spoke with Mark Conroy</a>, Director of Development at Annertech, on the Beyond Blocks podcast.
      We discussed building something useful in a day and building design systems with web components.</p>

      <p>Inspired by that conversation, I spent this afternoon experimenting with web components and seeing how I could use them within a design system we're building, as I think they can solve a particular need we have.</p>

      <p>Following that, I thought I'd see how I could build my own design system and decided to do it with Symfony and see what I could achieve within a few hours.</p>

      <p>It was a great opportunity to take Symfony 7 for a spin and explore and test some things that <a href="/podcast/10-ryan-weaver-symfonycasts">Ryan Weaver and I discussed in our episode</a>, such as Symfony UX and Twig components.</p>

      <p>Each component is a Twig component with its own PHP class and Twig template, which is rendered when I visit its URL, and I can use the HTML-like <code>&lt;twig:Logo /&gt;</code> syntax to include child components.</p>

      <p>You can <a href="https://github.com/opdavies/symfony-design-system">view the code on GitHub</a>, and it may be something I use and work on in the future.</p>

              
    summary: null
field_daily_email_cta: {  }