Best approach for COMPLETELY custom UI design

[primov]

Hello,


The situation

A complex JEE project is finished already, consisting mostly of a complex EJB backend with primefaces for a web portal.


The new requirement

A very complex, very detailed style guide (using atomic design) has to be implemented. The site needs to look EXACTLY as specified. It seems like some code is provided as well. Probably to be read as: A suggestion how the design COULD be implemented on an atomic level. I see some CSS, but also things I am not familiar with, especially what appears to be React code.


My questions

Obviously, there are many possible approaches to this. I would like to know if some are particularly attractive or unattractive.

1. Just use PrimeFaces without skin or without theme and spend the allocated 20 days writing CSS and bend things together with plain CSS as they have to be (but remember, very specific results needed)
2. Write a custom PrimeFaces theme (learning path: "Theme Roller" -> PrimeFaces themes?)
3. Does PrimeReact help in any way? Just going by its name, it sounds good, because I have Primefaces and React code and need Primefaces to render according to that React-code. But it seems it has a completely different purpose, according to its description ("a collection of rich UI components for React")?
4. Replace PrimeFaces & Facelets ENTIRELY by a framework that gives me full control over all HTML & CSS output. Can't reuse backing beans or facelet code then, but still the same EJB backend, and I'd be in control of everything. (Learning path: different framework like freemarker.)
5. Other suggestions?

[tandraschko]

JFYI how i dit it my last project:

1) i completely developed the template (like header, footer, body...) on my own, it's easy; You don't need a PrimeFaces Template here if you already have a finished styleguide. It took around 2 days.
It also depends if you need smartphone support - switch the navigation to a burger menu e.g. is more effort.
2) i completely developed a own new theme.
I also thought about to use e.g. omega and just overwrite, what i need to overwrite in my application but i think thats not easy maintainable and "unclean + uncool" code.
For me it was the best way to completely develop a new theme with less (or sass, doesn't matter here).
You have full control and your know how about styling PF will grow.
I had the benefit to look at the premium theme sources, so it was quite easy.

I think i would buy a premium template (i can't see the possibility to buy only a theme anymore, i think it was available in the past. You can contact the support maybe.), copy the theme code and change it to your needs.
If you do this, you already have a good structured sass code, where many things can be controlled by simple variables. Like colors and paddings for all elements.
It's pretty easy and you don't have to start with zero code.


PrimeReact won't help here. It's just a component library for a different framework. PrimeFaces and PrimeReact will produce a similar html.

[primov]

Thanks for sharing that experience! Implementing the style as a custom theme should be one of the best approaches in my situation then as well.

But let's see if others think otherwise.

[kukeltje]

I'd go for the clean new theme to. But I'd also contact the people that 'ordered' the styleguide to be developed. I'd tell them/explain them a styleguide should imo not contain any platform/framework specific things (react code), it should be open to minor differences, making **your** work easier... So the EXACTLY should imo be a '90/10' rule. Achieving 90% of the L&F in 10% of the time and discussing if the other 10% (from 'close' to EXACTELY) is worth the 90% additional time.

Ok , it is most likely not 90/10 but more a 90/30 but you'll get the picture. And imo, the PF components have a clean/good composition and buying a commercial them (one if possible) would indeed kickstart your work!!!

In addition, for the layout, I'd go for a completely custom design too as Thomas stated. Not use the `p:layout` just divs...

[primov]

Thanks for the reply!

Smartphone support is needed, but can be done later and billed extra.

I don't understand why it would be easier to build on a premium theme. When I start a fresh theme, wouldn't I get plain unformatted HTML like http://www.columbia.edu/~fdc/sample.html ? That seems perfect for a start, especially since it seems like they provided some CSS.

[tandraschko]

Just try it when you set the theme param to "none". I think it's really hard to start from scratch - but sure, it's not impossible. I just woudln't do it