Seeking Details on component styling, global stylesheet, and managing design system

Question
#1

Having difficulty connecting the CSS from my stylesheet, leveraging Bootstrap 5 classes, to the styles within the default Drapcode style. Is there somewhere I can access the stylesheet within Drapcode?

Looking for the best way to manage global styles and reference classes. Specific challenges I’m having on styling,

  1. Managing classes: The Bootstrap 5 stylesheet template I used doesn’t seem to have many of the classes within Drapcode. Additionally, Drapcode appears to use Component IDs, but I’m not sure how to manage these. Some reference the ID in the component style manager, but not in component settings.
  2. State settings: These are quite a pain to manage. I thought if I set the element values within static, and then “Auto” on other states would not result in me having to change all the state values. This could be easily mitigated with the ability to more easily manage global stylesheet in app.
  3. When I copy an element, the style added to the parent element does not get copied over. Is this because the new element references the class and doesn’t include the style elements modified?
#2

Hi @Mr.Nation ,

Thanks for your questions.

  1. Can you please send me the link or the CSS file which you are using?

  2. Not able to understand this one, would be helpful if you can provide a few screenshots, then we can check and let you know.

  3. Yes, by default all the style gets applied to the ID, so if you want to copy styles the best way is to write a CSS for it in a class and then apply the same class to both the components.

Thanks.

#3

  1. Here is the CSS file link, Embark BootStrap Stylesheet.css - Google Drive

  2. This point may not matter if I can more easily manage the stylesheet. My preferred method is to set the class and not add any inline CSS, so maybe this doesn’t matter. If I were to load the stylesheet in my Google Drive, then stick the link for the style in the project settings, will this be live? Meaning, if I were to make a change in the file in Google, would it reflect in the app?

#4

Hi @Mr.Nation,

Yes, you can host these CSS files on Google Drive or Dropbox and then you can change them as you want and we will load the latest CSS from that file in the run time. This way you can easily manage your stylesheets.

We have this feature on our roadmap, to allow the editing of uploaded CSS files, but it may take some time.

Thanks.