Any advice or pointers for PrimerLive use?

Phoenix Forum Chat / Discussions
,
1

I’ve decided on using PrimerLive as my component library for a project that I’m working on. For anyone that has used PrimerLive:

  1. PriverLive is based on GitHub’s Primer Design System. Should I read up on that?
  2. The Primer Design website talks a lot about Figma. Should I learn that?
  3. Do you have any advice, in general, on how to lear and use PrimerLive?
1 Like
2

Can you please add links to what you are referring to? The only things I know about are Figma and GitHub. I have no idea what PrimerLive is, and yes, I could Google it, but I shouldn’t have to in order to try to help you. The more information you can provide, the better the chances you can get help.

3

Here you go: GitHub - ArthurClemens/primer_live: An implementation of GitHub's Primer Design System using Phoenix LiveView.

1 Like
4

Isn’t that a show-stopper?

2 Likes
5

I posed the same question to the author of PrimerLive as an issue in the GitHub project. Here is my question and his answer:

Hello Arthur,

I’ve chose PrimerLive for my Phoenix/LiveView project. Just a quick couple of questions:

  1. You may think this an odd question, do you have any caution regarding my use of PrimerLive?
  2. Do you have any advice, in general, on how to learn and use PrimerLive?
  3. I see that it is based on GitHub’s Primer Design System. Do I need to read the documentation for that?
  4. At the Primer Design website, I see mention of Figma. Should I try to learn that?

When I started PrimerLive 2 years ago, I selected GitHub Primer because of its simplicity, focus on accessibility and completeness of documentation. The components were HTML-first and easy to enhance with CSS classes.
Soon after, things changed on the website: HTML-first got replaced by React and Rails, components got added with specs only, no code, and the Primer CSS repo got frozen.
Compare with the original website.

Implementing new components is harder, because there’s no plain CSS file to base the code upon.

Regarding your first question: In its current state, PrimerLive is quite complete, but when GitHub implements new components I am unsure if the available code can be used to implement them in PrimerLive.

Learning a component library is best done doing. Take a component, pull up the documentation for that component, and see examples of use in the storybook app.

I think the original website (linked above) gives a better view of the documentation. Use it when you need styling that is not available out of the box.

Figma is useful if you want to create mockups or wireframes. Most of the time it is easier to just use a component.

6

I’m just as confused as ever about what components to use for Phoenix/LiveView projects. But it is such an important decision when embarking on a major project. I think it would help Phoenix/LiveView adoption if there were some clear pathways.

3 Likes
7

We used tailwindui.com to build the first version of our components, then iterated to improve and tailor them (you can see our library here)

flowbite.com also seems to be a good choice. It’s Tailwind-based, which I’m very fond of!

8

FYI - I went with flowbite. Pretty satisfied with it.