3 ms·

Question for people who are good at CSS stuff. I am not. I'm upgrading a personal Phoenix project to 1.7, and Phoenix now uses Tailwind by default. So I though

by davidw 2y ago

Question for people who are good at CSS stuff. I am not. I'm upgrading a personal Phoenix project to 1.7, and Phoenix now uses Tailwind by default. So I thought I'd try and update my one page thing to use it instead of Bootstrap. So far, it looks like crap whereas the Bootstrap one looked 'good enough'. What's the easiest way to get something that looks kinda sorta decent, with some nice defaults, without trying to become a designer? Or should I just reinstall Bootstrap and be done with this.

bitshaker 2y ago
Put your HEEx into a LLM. They understand both Bootstrap and Tailwind very well. It will probably not be too hard.
moojacob 2y ago
If your looking for components like bootstrap try https://flowbite.com/ https://flowbite.com/ for free. Tailwind also has paid components. You just copy and paste. The cool part is once you get more comfortable you can start to tweak the flowbite components.
bushido 2y ago
Tailwind and Bootstrap and are kinda apple vs apple pie. Tailwind provides classes that still need to be stacked to build components. It'd be easier if you were using some source for UI components, I've used TailwindUI in the past, but that's paid. I'm sure there are good free alternatives.
- bebop 2y ago
  A friend of mine who is good at these things recommended https://mantine.dev/ https://mantine.dev/
kyleee 2y ago
I’d say it depends on who is paying you. If you have job security and want to tinker, then play with tailwind if you want (most trendy / loud people seem to like tailwind). If however you are working on your own project / are self funded / or have a deadline just stick with bootstrap that you know, and focus on getting your work done instead of bike shedding on the UI
newusertoday 2y ago
reinstall bootstrap and be done with it. You can look at daisyui it is closest to bootstrap. There is also shadcn ui, ui looks good but it would take you effort to port styles to your phoenix project.
floydnoel 2y ago
I use DaisyUI to accomplish that goal, here is my demo site for an example: https://nwk-landing-kit.netlify.app https://nwk-landing-kit.netlify.app and here are the docs for DasiyUI: https://daisyui.com https://daisyui.com
- davidw 2y ago
  The DaisyUI description of the Tailwind button made me laugh: "bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95" Yeah, that's not making my life easier is it. Also some of those class names are super cryptic.
  - loxs 2y ago
    They are cryptic but the learning curve is not that steep. Once you get the idea, it becomes much easier (and quite pleasant for a CSS hater like me). For example px-3 means "padding on the x axis 3 (spacing values)" and gives you padding on both left and right. There is a (rather simple) language that you need to learn and at least for me it made things much, much better. You can probably get the feel for it in several hours of building a basic website with Tailwind (and DaisyUI I would recommend).
    - homarp 2y ago
      ia that really easier than learning css directly? since you have to understand 'paddding'and 'px' ? see https://developer.mozilla.org/en-US/docs/Web/CSS/padding https://developer.mozilla.org/en-US/docs/Web/CSS/padding vs https://tailwindcss.com/docs/padding https://tailwindcss.com/docs/padding
      - loxs 2y ago
        I am not going to argue whether that's the case, as I never managed to learn CSS enough to be productive in a convenient (for me) way. Despite of trying many times. Whereas tailwindcss "clicked" right away and gave me the awesome superpower to build whole products without having to depend on other people. Before that I hated myself for the horrible, unmaintainable mess that I created, and double hated myself later when I had to revisit the project. Since I am using tailwindcss, I never had bad experience. Of course I still have to spend time wondering how to center some element and why it doesn't work, but that's not what I am complaining about. It might be just a personal defficiency, but it is how it is (for me).
jmull 2y ago
> Or should I just reinstall Bootstrap and be done with this. That one. Tailwind gives you tools when you want to control the design, but you’ve got to control the design. When you just want something that looks good and don’t mind that bootstrap-y feel, bootstrap is the way to go. (There are projects that essentially recreate bootstrap on top of tailwind, which, in theory, might give you something like bootstrap as a starting point with the power of tailwind, but I haven’t seen it work better in practice than just using bootstrap.)
- ricw 2y ago
  Disagree. Just get one of the tailwind UX kits and use their classes as your standard style guide. I personally use flowise as it’s free with paid more complex components if needed, but there are a bunch of others out there that fill the same space.
  - skeletal88 2y ago
    Can you suggest which of these kits are good?
    - KolmogorovComp 2y ago
      DaisyUI
  - addandsubtract 2y ago
    The same can be said about Bootstrap, though. Just get a theme to make it look less bootstrapy. I think both viable ways to go, and it just boils down to personal preference (especially for hobby projects).
  - _heimdall 2y ago
    On a new project, sure maybe going with tailwind + a theme/kit is a bit more up to date than using bootstrap. But on an existing page that already looked fine with bootstrap, why bother with the extra work?
  - jmull 2y ago
darkhorse13 2y ago
You can check out Halfmoon too instead of Bootstrap: https://www.gethalfmoon.com/ https://www.gethalfmoon.com/

by davidw 2y ago

bitshaker 2y ago

Put your HEEx into a LLM. They understand both Bootstrap and Tailwind very well. It will probably not be too hard.

moojacob 2y ago

If your looking for components like bootstrap try https://flowbite.com/ https://flowbite.com/ for free. Tailwind also has paid components. You just copy and paste. The cool part is once you get more comfortable you can start to tweak the flowbite components.

bushido 2y ago

Tailwind and Bootstrap and are kinda apple vs apple pie. Tailwind provides classes that still need to be stacked to build components. It'd be easier if you were using some source for UI components, I've used TailwindUI in the past, but that's paid. I'm sure there are good free alternatives.

bebop 2y ago
A friend of mine who is good at these things recommended https://mantine.dev/ https://mantine.dev/

kyleee 2y ago

I’d say it depends on who is paying you. If you have job security and want to tinker, then play with tailwind if you want (most trendy / loud people seem to like tailwind). If however you are working on your own project / are self funded / or have a deadline just stick with bootstrap that you know, and focus on getting your work done instead of bike shedding on the UI

newusertoday 2y ago

reinstall bootstrap and be done with it. You can look at daisyui it is closest to bootstrap. There is also shadcn ui, ui looks good but it would take you effort to port styles to your phoenix project.

floydnoel 2y ago

I use DaisyUI to accomplish that goal, here is my demo site for an example: https://nwk-landing-kit.netlify.app https://nwk-landing-kit.netlify.app and here are the docs for DasiyUI: https://daisyui.com https://daisyui.com

davidw 2y ago
The DaisyUI description of the Tailwind button made me laugh: "bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95" Yeah, that's not making my life easier is it. Also some of those class names are super cryptic.
- loxs 2y ago
  They are cryptic but the learning curve is not that steep. Once you get the idea, it becomes much easier (and quite pleasant for a CSS hater like me). For example px-3 means "padding on the x axis 3 (spacing values)" and gives you padding on both left and right. There is a (rather simple) language that you need to learn and at least for me it made things much, much better. You can probably get the feel for it in several hours of building a basic website with Tailwind (and DaisyUI I would recommend).
  - homarp 2y ago
    ia that really easier than learning css directly? since you have to understand 'paddding'and 'px' ? see https://developer.mozilla.org/en-US/docs/Web/CSS/padding https://developer.mozilla.org/en-US/docs/Web/CSS/padding vs https://tailwindcss.com/docs/padding https://tailwindcss.com/docs/padding
    - loxs 2y ago
      I am not going to argue whether that's the case, as I never managed to learn CSS enough to be productive in a convenient (for me) way. Despite of trying many times. Whereas tailwindcss "clicked" right away and gave me the awesome superpower to build whole products without having to depend on other people. Before that I hated myself for the horrible, unmaintainable mess that I created, and double hated myself later when I had to revisit the project. Since I am using tailwindcss, I never had bad experience. Of course I still have to spend time wondering how to center some element and why it doesn't work, but that's not what I am complaining about. It might be just a personal defficiency, but it is how it is (for me).

jmull 2y ago

> Or should I just reinstall Bootstrap and be done with this. That one. Tailwind gives you tools when you want to control the design, but you’ve got to control the design. When you just want something that looks good and don’t mind that bootstrap-y feel, bootstrap is the way to go. (There are projects that essentially recreate bootstrap on top of tailwind, which, in theory, might give you something like bootstrap as a starting point with the power of tailwind, but I haven’t seen it work better in practice than just using bootstrap.)

ricw 2y ago
Disagree. Just get one of the tailwind UX kits and use their classes as your standard style guide. I personally use flowise as it’s free with paid more complex components if needed, but there are a bunch of others out there that fill the same space.
- skeletal88 2y ago
  Can you suggest which of these kits are good?
  - KolmogorovComp 2y ago
    DaisyUI
- addandsubtract 2y ago
  The same can be said about Bootstrap, though. Just get a theme to make it look less bootstrapy. I think both viable ways to go, and it just boils down to personal preference (especially for hobby projects).
- _heimdall 2y ago
  On a new project, sure maybe going with tailwind + a theme/kit is a bit more up to date than using bootstrap. But on an existing page that already looked fine with bootstrap, why bother with the extra work?
- jmull 2y ago

darkhorse13 2y ago

You can check out Halfmoon too instead of Bootstrap: https://www.gethalfmoon.com/ https://www.gethalfmoon.com/