Menu Entry for Custom CSS

I was just working on some custom CSS and how cool would it be to have a menu entry in here
image

An entry like: "Copy Custom CSS Class" that would put ._retool-step_link_list on my clipboard.

A step further, it would be cool if it would open and focus the Custom CSS pane.

or the menu entry could be: "Add Custom CSS for Component" that would open the pane, and paste this in all in one step.
image

What do we think?

3 Likes

Yes, please

Very cool idea! I'll bring this up with the team. :+1:

My fellow dev @AJVancattenburch has some cool ideas like this too!

1 Like

I'm currently in the beta phase for building out a module within Retool that is for beefing out the current capacity for the current limitations for styling components. So far, it's just a table in which above it lies a button that pops a modal with a live GUI for editing the table styles.

Through extensive HTML element inspection in devTools, I was able to target concrete and unchanging attributes with substring matching along with a few other tricks.

To style the table component in the modal, there's options to set background gradients on the table that don't break at the column level (so the whole table is blanketed with a solid or gradient background.

To set the options for styles with a live preview, the modal has a series of:

For setting gradients:

  • Color inputs to set array of colors for gradients;
  • Number inputs to set stop points and gradient angle (or X/Y position offsets for radial-gradient backgrounds)
  • Text inputs for setting things like pixel widths for font-size, font-weight, borders, shadows, etc.
  • Select drop-down components for designating things like font-family etc.

I'm also adding other steps in the modal stepped container for styling different sections, rows, columns, footer, etc. all within this module but...like I said...it's taking a lot of careful construction in my down time :laughing: especially given the fact the spaces we have to cleanly implement our own CSS while carefully overriding the correct targets. Having to highly rely on self-optimization to cut down CSS by using combinations of psuedo-classes like :has(), :is(), :not(), etc. with combinators and SCSS :flushed: would be awesome if we had a similar GUI that didn't make me feel I'm playing with fire, regardless of CSS knowledge.

An entire design suite alongside the development side of things would just be a dream :heart_eyes:

2 Likes

Nice! it’s been fun testing this out. I didn’t check to see if it saves what changes you make in the module. I’m assuming that’s how it stays concrete across pages.

1 Like

Hey bro! That's one of the things I'm still building out but I have an idea for.

We'd have to do something along the lines of creating tables in Snowflake that store strings for unchanging attributes and/or matched substring as IDs, as well as an additional columns that stores and passes the updated CSS properties and CSS values that are to be assigned to the unchanging attribute selector matched with an appropriate substring to target the elements.

The biggest problem I foresee is some components just not having a reliable attribute to target as some div elements are simply a div with a weird changing value like zHWul3s...definitely something that would take a lot of careful work. I haven't thought of another better way yet but I'm sure it exists, it always does lol.

1 Like

Oh super interesting. Yeah this is cool.

1 Like

Using data manipulation for design seems like such a crazy concept to me :laughing:

If I get time at some point today, I'm going to extend the verbosity of this feature request. I'll include a little clip of the app I've been tinkering with of a GUI for extensive component editing table component styles for visual clarity, along with a few different ideas for a roadmap on how Retool could possibly implement such a prodigious tool within an already complex system.

I just can't help to think although this would likely be a very large project for Retool to catalyze, but could you imagine? A tool that offers the most flexibility not only quick app development -- but also no limitations on design?

...man...at that point -- Retool would be an absolutely unstoppable work of art (moreso than it is already, anyways :sunglasses:).

1 Like