Branding is difficult to remove

[mrkvon]

Hello! Thank you for working on this tool. I tried it today and it works well for me.

Issue

It's challenging to remove the Inrupt branding and custom styling, colors, background. It is scattered around the app.

Path to a solution

Other tools like create-react-app or angular-cli have the branding in one or very few places. It's easy to remove and start playing.

It would be great if this tool does something similar. Then it will be truly reusable.

[james-martin-jd]

Thank you for the feedback! I was wondering if you could let us know what kinds of things you're finding scattered around the app? It's definitely true there's some styling (in this case, in the form of styled components in react), but that is mostly for the specific layout and any overrides from the style guide.

I did discover that we have two inrupt logos, which was intended to be a generic "logo.svg" you could easily swap out, however one is called inrupt.svg, so we need to consolidate those. That should help a little.

As for changing the root styles - there are three basic ways you could achieve this:

1. If you want no styles at all from the style-guide, you could remove the @inrupt/solid-style-guide reference from your package.json file and delete the node_modules folder. There may be one or two places (I believe in the root App.js files) you need to remove the reference, as it's globally imported. This would remove all of the custom styles found on design.inrupt.com

2. If you wanted to use the style guide but didn't like the colors/fonts/whatever and wanted to change it, you could do this easily by adding your own CSS overrides to some of our color variables. We are working on documenting this in more detail, but if you explore the style-guide you should see our variables and be able to override them to be colors of your choosing.

3. If you wanted to use the style guide, but wanted to change it more deeply or significantly, then you could always fork the style guide, make your changes, and replace the import with your new version of the style guide.

4. A more radical solution, the generator is intended to give a you a Solid app with suggested styling and provide as an example of how Solid can be interacted with by your app. However, we also provide solid-react-components, which is an intentionally unstyled set of components such as a login form. We provide only minor CSS there, for basic layout, so it should be able to integrate with any app or design system.

Hope this helps! We certainly want the generator applications to be as reusable as possible.

[mrkvon]

@james-martin-jd Thank you for your fast and detailed response. A guide in the spirit of your response would do a lot to address this issue.

What I'd like to have removed at the beginning:

• Logos
• Project description (This application was generated by ...)
• Colors, background images etc (app-specific looks)
• Some layout (depends what I want to build)

Since it was not obvious where to find these, I ended up using React dev tools to locate the components and searching the files and specific strings in the codebase (ack). Perhaps not the most efficient way. After about half an hour dealing with this and being far from finished I opened this issue.

It's great to have a working minimal app with best practices in place to learn from. When one needs more flexibility, maybe the create-react-app + solid-react-components are a good alternative.

I see some of your advice is already integrated into the README. Gonna test it. Thank you!

[james-martin-jd]

Having given this some thought, one way we may be able to help with the branding is to make use of the .env file to store "global" variables (or passthrough those that are coming from package.json, like version number). For example having a REACT_APP_COMPANY_NAME there will let you swap your org name for "inrupt" very quickly. It won't help remove the styles, but that should be easy enough on its own by removing the styleguide.

[james-martin-jd]

Adding a quick note that we've been working on making this even easier after giving it some further thought. I'm not ready to close it, as I think there's more that can be done, but we now have an optional "lite" mode of the generator (in the yeoman script) that prompts the user if they want the full application or the lite version. The lite version still includes some branding (and the style guide) but removes the routes and example code minus the welcome page (so there's something there). We're playing with the idea of also having a mode that installs NO pages but just dependencies instead.