search

creativetimofficial / ct-now-ui-dashboard-pro-react

React version of Now UI Dashboard PRO
23 stars 5 forks source link

Change of look to Material UI Pro Version #23

Closed shekharkc closed 4 years ago

shekharkc commented 5 years ago

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

Expected Behavior

Looking to change the custom look similar to Material-UI design pro, but with bootstrap4+react+reactstrap/react-bootstrap

Current Behavior

Standard look of Now UI Pro React Version. Looking to customise

Hi,

I have purchased all the bundles (the mega bundle pack) from you and have also opted for the Premium support from you. I personally think they are all great products with fine attention to detail.

I am looking to build my website using React as the front end library/framework. I like the look and feel of all your products, but am particularly impressed with the products built with the Material design. To my understanding, the react version of the Material-Kit pro version is built over Material-UI library which uses CSSinJS for styling.

I am, however, more inclined to use the products built on bootstrap4+reactstrap/react-bootstrap, such as the Now UI dashboard/ Paper Dashboard - primarily considering that bootstrap library is very stable, has a wider deployment and more active user community. Also, I am given to understand that while JSS/ CSS in JS is the way styling is likely to evolve in times to come for frontend libraries like React, large scale adoption hasn't happened so far towards this approach. People close to me advised me to stick with Bootstrap since it is extremely stable and is highly tested, which brings me to the dilemma I have currently. I wish to use Bootstrap4 in my React project but would like to have the look and feel of the Material design. There is also the issue of size bloat while using Material-UI library Vs Reactstrap/ react-bootstrap -as the following link brings out.

https://www.npmtrends.com/bootstrap-vs-react-bootstrap-vs-reactstrap-vs-material-ui

  1. Is there a way to customise the look and feel of the Now UI Dashboard Pro(React version) to that of Material-Kit/ Dashboard? If yes, what are the css/scss/ JSX component files that I need to customise?
  2. Alternately, should I start building my website using the MaterialKit Pro version (React) - implemented by you over Material-UI library? Would you still be advising me to take this approach, keeping my concerns with respect to stability, community support and size in mind?
  3. Is there an alternative that you can suggest?

Many thanks & best regards

einazare commented 5 years ago

Hello there @shekharkc ,

Thank you for your interest in working with our products. As you have said it, our Material products make use of JSS, whilst the others make use of SCSS/CSS.

  1. Is there a way to customise the look and feel of the Now UI Dashboard Pro(React version) to that of Material-Kit/ Dashboard? If yes, what are the css/scss/ JSX component files that I need to customise?

This would be really hard to achieve. We haven't done it, but just working over all of the React products, I am 95% that this would be really hard, and it would take around 1-2 months to do so.

  1. Alternately, should I start building my website using the MaterialKit Pro version (React) - implemented by you over Material-UI library? Would you still be advising me to take this approach, keeping my concerns with respect to stability, community support and size in mind?

The best way would be to allocate yourself 1-2 days to try and make some tests (try making some pages - connect our front-end to your back-end, or something like this) using our Material products. If the tests go well, and you understand our product, then go for it. If not, maybe the Material products are not the way to go for you.

  1. Is there an alternative that you can suggest? We have launched this product approximately 36h ago, but since it is new, it hasn't been yet added to our bundle. When it will be added there might be changes in the prices (you can ask more about this here: https://www.creative-tim.com/contact-us - this is because I do not work in the Marketing & Sales department, and I don't really know how things work on that end - I am just the developer - hope you can understand this). Another suggestion is that you could use this product, which comes in two designs (one is called black, and one is white). To see these two designs, use the right menu to switch between them.

Hope this information was of help.

Best, Manu

shekharkc commented 5 years ago

Thank you very much for a prompt response.

Adding to this further, would including the css generated in Material Kit Pro (html) version, instead of Now-Ui-Dashboard css in index.js break things?

Thanks

einazare commented 5 years ago

Thank you very much for a prompt response.

Adding to this further, would including the css generated in Material Kit Pro (html) version, instead of Now-Ui-Dashboard css in index.js break things?

Thanks

I cannot give you an answer for this since I haven't worked on those two products. The best way to get a response would be to ask here: https://www.creative-tim.com/contact-us One of my colleague who has worked over these products will come to your help as soon as possible. My guess is that, since these two products are really different, the css would break (any Material product with any other bootstrap product - any bootstrap product with any bootstrap product will have a less chance of breaking). But once again, this is just a hard guess.

Best, Manu

shekharkc commented 5 years ago

Thanks yet again.

The Material Kit Pro (html) - is a bootstrap4 product. I wasn't referring to the React version here.

My understanding is that the Reactstrap depends on external css for styling part. I was hoping that the look and feel Now UI React app can be customised with little (or too much??) additional work by changing the css stylesheets - in this case, the customised bootstrap version of Now UI stylesheet with the customised bootstrap version of Material Kit stylesheet in index.js.

Best

einazare commented 5 years ago

Thanks yet again.

The Material Kit Pro (html) - is a bootstrap4 product. I wasn't referring to the React version here.

My understanding is that the Reactstrap depends on external css for styling part. I was hoping that the look and feel Now UI React app can be customised with little (or too much??) additional work by changing the css stylesheets - in this case, the customised bootstrap version of Now UI stylesheet with the customised bootstrap version of Material Kit stylesheet in index.js.

Best

Hello again, @shekharkc ,

I understood that you talk about the HTML version, the problem is that I haven't worked on the HTML product, and can't really answer. I know for sure that on the React products, due to differences in the structure of some components (Sidebar mostly and the layouts components), some breaks could occur when changing styles between products that make use of Reactstrap. And most definitely from Material-UI to Reactstrap and vice-versa is not possible. But once again, I can't speak for the HTML products.

Best, Manu

shekharkc commented 5 years ago

Thank you very much. Shall post this query here - https://www.creative-tim.com/contact-us. Possibly, you would also have some internal processes to hand over the unresolved queries to the correct team?

Best

einazare commented 5 years ago

Thank you very much. Shall post this query here - https://www.creative-tim.com/contact-us. Possibly, you would also have some internal processes to hand over the unresolved queries to the correct team?

Best

I do not quite follow.

shekharkc commented 5 years ago

I meant to ask you whether such unresolved queries do automatically get escalated to the concerned person/ team or do I have to raise it again using the link you provided?

Thanks

einazare commented 5 years ago

I meant to ask you whether such unresolved queries do automatically get escalated to the concerned person/ team or do I have to raise it again using the link you provided?

Thanks

Once again I am not sure I understand your question. I've given you the above link since this is a React repo, this means that all comments should be handled by me (The React Developer at Creative-Tim). This is because at the end of the month if I have to create a report on how many comments I've responded on Github, I should only take a look at those from React. The same applies to my colleagues from the HTML department. Also, in our ISSUES_TEMPLATE this is kind of take care by asking if you are on the right repository:

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

# Prerequisites

Please answer the following questions for yourself before submitting an issue.

- [ ] I am running the latest version
- [ ] I checked the documentation and found no answer
- [ ] I checked to make sure that this issue has not already been filed
- [ ] I'm reporting the issue to the correct repository (for multi-repository projects)

# Expected Behavior

Please describe the behavior you are expecting

# Current Behavior

What is the current behavior?

# Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

## Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1
2. step 2
3. you get it...

## Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

* Device:
* Operating System:
* Browser and Version:

## Failure Logs

Please include any relevant log snippets or files here.

The last checkbox:

- [ ] I'm reporting the issue to the correct repository (for multi-repository projects)

I hope I understood your question correctly this time.

Best, Manu

shekharkc commented 5 years ago

Thanks yet again. As far as the query goes, I do feel I am in the right place. As I do see it, it has only to with the React Components of this product + and modifications to the look of the default CSS sheet generated as part of this product. But, never mind - I think I have this covered. Best