Difference in component files between dashboard and kit about ct-material-kit-pro-react

[arthurliebhardt]

+1 would be awesome to use both in one project.

[einazare]

Hello there @msteinmn ,

Thank you for your interest in working with our products.
Can you please give us the files that are different?
Also, I think you should read this:

Here is a quick presentation on how to use the products:

1. The Dashboard should be used for the Admin/CMS part of your website/startup. Here is where you control everything from the management part, where you see stats like this: https://demos.creative-tim.com/material-dashboard-pro-react/#/dashboard about your products/users, where you edit/add/delete: https://demos.creative-tim.com/material-dashboard-pro-react/#/tables/react-tables different items, etc. This is the control panel of your site. The Dashboard also includes the Login Page, Register Page or Lock Screen so you can use them to have the access to the Dashboard.
2. The UI Kit should be used for the part where you present your business. You can create with the kit the Landing Page of your startup/website, the Contact Us Page, the Pricing Page, the About Us Page etc. Or you can use this to create also your Blog, where you will keep in touch with your audience. You can also built your own pages with already made sections -> . If you create a SaaS, probably your users will have access to the Dashboard too, so they can control some items from there too. But you still need the UI kit for the presentation pages of your business. In this way you will have the same design in the presentation and also in the Dashboard.

The basic idea is that you should keep the products separate and not try to combine them because you will load your page with too much CSS and Javascript which are not necessary in the same time. Your user will be either on a Landing Page, or on the Admin Part. If you like for example 1 item from one product, like a Card, and it is not in the other product, you can check in the next example how to do that using the SCSS and JSS files.

Just follow the next steps, for the FileUpload Example:

1. You can go to material-kit-pro-react/src/assets/scss/core/_fileupload.scss and put it in the material-dashboard-pro-react/src/assets/scss/material-dashboard-pro-react/_fileupload.scss folder.
2. Add the following line inside src/assets/scss/material-dashboard-pro-react.scss : @import "material-dashboard-pro-react/fileupload"; at the end of it.

Please let us know if we can help you with anything else.

Best,
Manu

[msteinmn]

We use both these products as component libraries, building the app from scratch pulling from both. Maybe it's just us, but it is really annoying that the CSS is different. It's small differences in the components, named the same in either project. The CSS (SCSS) styles then are also named the same, but slightly different. It is very hard to test this and make sure nothing breaks if the two are mixed. So as it stands now we have to chose one, and then adapt every component we pull in from the other. It just seems it would be very easy to keep the components and the CSS, especially the CSS in _misc.scss the same.

[msteinmn]

Manu - see attached. Wouldn't it be easier for you to maintain these code bases if the components were a consistent library? I think that is how I would make the case to your board. And this component library could be a product as well.

diff.zip

[einazare]

Hello again @msteinmn ,

Since now, without the _misc.scss file, you haven't given me a specific example.
Would it be ok with you to share with us what files are different?
Maybe I will be able to tell you why they are different, or maybe you are right, and they should be the same.
This week I need to do an update on these two products, an update for the dependencies that we are using, and if I see that there should be styles that should be the same, than I will add that changes in this update.
I've checked the _misc.scss, from both of the products, and the differences are as should they be.
For example, in the Kit product, we do not need to set a background-color for the <body> element, but in the Dashboard one, that is something that we need.
I've seen that there are differences on some font-size's as well, this is something normal as well.
I know that there are more differences but from what I can see, it is something normal since they are two different products.
I am going to speak with the board about this and see if they find a solution.

Best,
Manu

[msteinmn]

Manu - thanks for looking into this. I created a diff simply by copying the components directory from the dashboard repo into the kit repo, which is under version control, eliminating those subdirectories that do not exist in kit. I did this including the JSS style files and also select scss files, like _misc, _colors, and _variables. The kit also loads the Roboto Slab font in the public/index.html file, which the dashboard does not, causing titles in components to not render the same. The result of this diff is a fairly big file. Not all components matter, such as header and footers are obviously different. But there are many subtle differences in both props and styles between low level components.Do you want me to send you the diff?

[einazare]

Hello again @msteinmn ,

Yes, that would help me a bit.

Best,
Manu

[einazare]

Hello again @msteinmn ,

I will discuss this with the board and see what we can do.

Best,
Manu

[einazare]

Hello there @arthurliebhardt ,

Thank you for your feedback.
We'll see what we can do.

Best,
Manu