mssantosdev

mssantosdev

Phoenix Blog Post: Creating a Frontend Style Guide with Phoenix Components

Our take on how to build a frontend style guide with Phoenix Components, Atomic Design and plain CSS, with focus on reusability and code organization.

https://readyforproduction.dev/blog/frontend-style-guide-with-phoenix-components?utm_source=elixir-forum

Most Liked

zhangzhen

zhangzhen

This blog post is worth reading. I wonder how your guys deal with live components and where they are placed in the atomic design?

mssantosdev

mssantosdev

Thanks @zhangzhen!

I wonder how your guys deal with live components and where they are placed in the atomic design?

Great question - we don’t use live components yet. Assuming they are more complex than the “static” ones, I would create them as organisms with the prefix live_.

derpycoder

derpycoder

I’m glad this resurfaced.

I loved the defdelegate approach to avoid cluttering up the Organism.

Will implement this in my own project, that is just starting out.


Have you considered using Storybook?

I am bit scared of business logic seeping into the components over time, so I was thinking of separating components as well as adding storybook to avoid those pitfalls.

Plus whenever we have to change something in a component, we won’t have to jump through our UI to make it happen.

https://github.com/phenixdigital/phoenix_storybook

Where Next?

Popular in Blog Posts Top

SmartLogic
Season four of the Elixir Wizards podcast launches today! This season we’re focused on system and application architecture. We’ll be doin...
New
MarcinKasprowicz
What I genuinely value at my workplace is that I can easily explore new languages through internal mobility. Throughout my career within ...
New
brainlid
Building a LiveView powered chat app is easier than ever when using Streams! Sophie DeBenedetto shows us how in this article. She createa...
New
New
New
zachdaniel
In this post I explore the silos that exist in the Elixir ecosystem, the pros and cons, and what we can improve.
New
T0ha666
In this article, we discuss how to create a Docker image for a Phoenix application. https://t0ha.ru/en/devops/elixir/2023/11/10/how-to-b...
New
ConnorRigby
Just finished a post for Embedded Elixir and I thought it should be cross-posted here: https://embedded-elixir.com/post/2018-09-25-mocks...
New
sheharyarn
In this article, I talk about the Elixir library Delta we at Slab just open-sourced, its various features including support for Operation...
New
shanesveller
Introduction and first content post in my new series about running Elixir Phoenix apps on Kubernetes are live! I’m describing an opiniona...
New

Other popular topics Top

danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

We're in Beta

About us Mission Statement