This is my latest creation with uibuilder, which just keeps getting better. Now, with your favourite (mine, Codex) built into VSCode, just describe what you want and magically a script.js, index.html and style.css appear. I import Echarts and subscribe to hugeicons to give the final polish. The client is happy. (p.s. it's an industrial battery condition monitor 
)
7 Likes
Nice one.
I am working on Flex Boxes at the moment. I have them, they just don't flex the way I expect!! I am enjoying the journey of adapting my D1 Dashboard to UIBUILDER and learning lots along the way. No rush, D1 still works and there is a ton of other stuff going on at the moment, so play as and when I can.
1 Like
Looks great! Very neat and tidy.
I'll admit that I find grid a somewhat easier to work with in general. 
But flex is good for those times where you need nested items to flex as you change viewport sizes.
1 Like
One way to remember the differences between flexbox and grids is: flexbox is for one direction/dimension, grid for 2 directions/dimensions - or put in another way: grid for layout, flex for content.
Would highly recommend to use tailwind for this, it takes all the heavy lifting away, especially for responsive layouts and as a bonus, all AI models are very well versed to produce beautiful tailwind based layouts in seconds.
1 Like
At the moment, I feel happy with uib-brand-css, basically, because my 'Tech Support' is familiar with it and the Documentation I am using supports it!! 
Once I get my head around the stuff and know at least what I might be doing rather than try, try, try, try, try again and hope for the best. I might be confident enough to give it a go. CSS of 20 yrs ago was far simpler!! Thank you for the suggestion though. Had a look and, at least, to me at the moment, it looks much the same as I am doing now!
My homework is now Flex and Grid!! The rest is done.
1 Like
Great description.
I'm afraid that we will have to agree to differ on this one. I personally very much dislike such complex CSS frameworks. If for no other reason that it makes your HTML almost unreadable some times.
Don't get me wrong, like JS frameworks, CSS frameworks have their place - usually in big shops with dedicated dev teams. Of course, that is just my opinion.
When I started doing the 2nd gen default CSS for UIBUILDER - what is now uib-brand.css - the idea was to provide an absolute minimal reset, a minimal set of convenience styles and some (hopefully) sensible defaults. The other requirement was that it should cater for light/dark and follow browser settings for that as well as allowing manual override.
Of course, the baseline for the uibuilder css is different to something like Tailwind. It is primarily aimed at people who want to minimise the CSS they have to mess with. Ideally, people may not need to deal with any CSS for simple projects.
and yet your own 'ui-brand.css' is a 'framework' that you first need to digest :')
.warning-intense, .warn-intense, .surface1, surface2, etc.. what does this all mean, you could write: `class="bg-red-500 light:text-black dark:text-white".
I think you are missing the point of tailwind, it is not a framework, they are utility classes. You can write tailwind 10x faster than css, as you can do it immediately inline. p-<num> sets a padding around an element, px-<num> sets it only horizontally etc. and you never have to leave your html (ie. no back/forth to css, reload, check, modify etc). Don't like so many inline classes ? wrap them in a single class.
Anyway, it is clear you have your preference and never actually used tailwind, it would suit uibuilder very much instead of reinventing the wheel.
One of the challenges I faced here was that this is a multi-client HMI, which means that Node Red has to keep track of all alarms, events, last 1 hour history, logon credentials etc. That means when I view the alarms page I need to update it, albeit lazy loaded every 10 lines, then when I acknowledge an alarm I need to send a command back to Node Red. Ends up having a huge if cmd = " ... in a function block and another if msg.topic=== "... in script.js. There's probably a more efficient way but I didn't have the hours to develop a slick library. Does anyone have suggestions, maybe I could look into it?
Hard to say without more info. However, at a guess, I'd say that you simply need a lookup table instead of a monster if statement. I do that for a number of data processes.
As a BTW, and this doesn't answer your question, see above instead, however, if you've more than about 3 or 4 if/else sections, a switch/case structure will be far more efficient and readable.
When.... an A.I. can consistently correctly generate CSS files without me having to tweak them... I will use CSS (extensively) more. But for now, it is still a bit of a black art to me... just like regular expressions.
Haha, don't beat yourself up over it. Even real CSS experts get tripped up quite regularly. (and I'm not one of those by the way).
There is a lot of trial and error when using CSS and a lot of rapid experiments.
But that's why I tried to create something that mostly works for most people most of the time. Best thing for most people is use a friendly starting stylesheet and not fret too much about getting things too exact. You can always come back and improve things later, but I find that whenever I spend too long trying for perfection up front, I always regret the time wasted later.
And, what was hard yesterday, might be easy tomorrow. Since CSS is still changing rapidly. I try to mostly target browsers from early 2019 for uibuilder css since that will take you back to iOS Safari 12'ish. And iOS devices from several years prior to that should still be upgradable to 12. I use a build tool - LightningCSS to achieve that. Which is why you should generally use the minimised CSS file for UIBUILDER. The un-minimised version may only work for browsers from the last couple of years.
Indeed, and I still have to use an online regex tool to get them right, very often.
Thankfully, CSS isn't quite as obscure as CSS as, for the most part, the properties kind of make sense. Even though I can never remember them - that's what VSCode is for!
