search

skclusive / Skclusive.Material.Component

Port of Material-UI in C# for Blazor
https://skclusive.github.io/Skclusive.Blazor.Samples/Dashboard
MIT License
397 stars 55 forks source link

class="mt-3 ml-n1 pa-1 ..." #47

Open henon opened 4 years ago

henon commented 4 years ago

I suggest adding the popular bootstrap classes for margin and padding. They have been adopted in many frameworks, so a lot of people will be familiar with them. I think they are essential to content layout because of their clarity and brevity.

Thoughts? Where could they be added to be globally accessible?

skclusive commented 4 years ago

not aware of bootstrap classes. we could have those classes (or components?) may be in https://github.com/skclusive/Skclusive.Material.Layout?

skclusive commented 4 years ago

is this something similar to Box component https://material-ui.com/components/box/#box?

in that case we can implement Box in skclusive-ui. the last time i checked it was implemented with lots of function composition in material-ui. may be we can choose our own implementation.

henon commented 4 years ago

I have never used React so I really don't understand Box. But I have used Vuetify extensively so I know how handy the bootstrap style classes for margin and padding are. Here are examples:

mt-0 = margin-top:0; mt-1 = margin-top:4px; mt-2 = margin-top:8px; mt-3 = margin-top:16px; ... mr-1 = margin-right: 4px; ml-1 = margin-left: 4px; mb-1 = margin-bottom: 4px; mx-1 = margin-left and margin-right: 4px; my-1 = margin-top and margin-bottom: 4px; ma-1 = margin: 4px;

and similar for padding: pt-0 = padding-top:0;

there are also negative spacing classes like

mt-n1 = margin-top: -4px;

and there is auto margin:

mx-auto my-auto

I guess Skclusive.Material.Layout would work, except if we want to use it in Skclusive.Material.Component too.

skclusive commented 4 years ago

i guess material-ui Box also behaves this way. so we could implement Box in Skclusive.Material.Core project then could be used in other components when ever required.

jessenich commented 3 years ago

i guess material-ui Box also behaves this way. so we could implement Box in Skclusive.Material.Core project then could be used in other components when ever required.

This seems to be an old issue, but I'd like to lend a hand in this particular arena. I just discovered this project and was very impressed. No bootstrap support is a killer for myself, and likely many others out there though.

I'm also unfamiliar with 'Box', and React. If Box is in anyway tied to the inner workings of React it would be impractical to try implementing support for it here. Additionally, it would limit the usability compared to direct Bootstrap support.

Bootstrap is an independent CSS framework. One of the most popular ones that exist, I believe. I've only skimmed but it seems adding support for some core Bootstrap functionality would not require any breaking changes, only additive.

As this issue is 6 months old, and the former commenter's suggestion was essentially rejected, I'll wait for a response and your feedback prior to forking and contributing. My staff and I would love to help though.

skclusive commented 3 years ago

Material-ui Box component supports above configuration including responsive specific values.

Please check the following samples.

https://material-ui.com/components/box/

https://material-ui.com/system/basics/#all-inclusive

Yes. The plan is to implement the Box component in Skclusive.Material.Lab repo which is kind of easy to get started for new contribution. I will be happy to get contribution. Please let me know if you need any help.