Ability to add custom css classes (and optionally change ID’s) of elements / sections on the record view. For more specific / personal UI editing / fine tuning.
3 Likes
I would like to see lots more customisation opportunities possible.
One obvious win would be for Noloco’s HTML to be much more descriptive about each element.
For example, this is the HTML for a progress bar:
<div class="w-full flex items-center justify-end">
<div class="flex items-center justify-center h-10 mr-2 text-sm">30%</div>
<div class="flex items-center mt-1 rounded-full h-2 bg-gray-200 w-3/5"><div class="h-2 rounded-full bg-nlc_primary-500" style="width: 30%; background: rgb(254, 32, 32);"></div>
</div>
</div>
What we really want, not only for CSS purposes but also to allow more JS dom manipulation:
<div class="component-progress-bar">
<div class="component-progress-bar-percentage">
<div class="component-progress-bar-bar">
Doesn’t matter which attributes you use (classes? data attr?) and what naming scheme you use, just for it to be consistent so we can really easily select all of them and customise.
Important note I am not suggesting you stop using tailwind/utility-based CSS, we just need more descriptive markup to be able to override it.
2 Likes
Big +1 for both these suggestions.
I imagine implementing more design controls is quite tricky but if it was possible to add own classes or be able to select specific elements easier, a lot could be done with some custom css.
We already implemented some but we quickly ran into the problem of stacked classes that suddenly affect other elements that you didnt mean to change at all.
One other thing is also that apparently the Editor Interface shares classes with the live app. I once tried to adjust the main Spacing classes and it worked for the app but made the Editor unusable. Might be nice to use different classes for the Editor Interface so you dont accidentally break it.
2 Likes