[blog] Making customizable components #33183
Conversation
There was a problem hiding this comment.
@samuelsycamore I migrated the remaining comments on the G-doc into this PR
| You maybe be don’t want to spend time writing long CSS files, spending time saying “In which file is define this f\*\*\*ing 5px padding?” or modifying all your files, because a designer decided that blue should be #29b6f6 instead of #4fc3f7. | ||
|
|
There was a problem hiding this comment.
| You maybe be don’t want to spend time writing long CSS files, spending time saying “In which file is define this f\*\*\*ing 5px padding?” or modifying all your files, because a designer decided that blue should be #29b6f6 instead of #4fc3f7. |
There was a problem hiding this comment.
Perhaps these 3 examples can be combined for brevity?
Maybe you’re sick of digging in a hundred different places just to find the single instance of that 5px padding or where “blue” suddenly changed from #4fc3f7 to #29b6f6.
| } | ||
| ``` | ||
|
|
||
| ### Let JS generate the CSS |
There was a problem hiding this comment.
This section is super short because modifying style is well explained in the doc, it does not require a blog article.
It's here to remind the reader to use JS libraries to simplify her life
alexfauquette
requested review from
DanailH,
joserodolfofreitas,
m4theushw,
oliviertassinari,
cherniavskii,
flaviendelangle,
gerdadesign and
samuelsycamore
| You maybe be don’t want to spend time writing long CSS files, spending time saying “In which file is define this f\*\*\*ing 5px padding?” or modifying all your files, because a designer decided that blue should be #29b6f6 instead of #4fc3f7. | ||
|
|
There was a problem hiding this comment.
Perhaps these 3 examples can be combined for brevity?
Maybe you’re sick of digging in a hundred different places just to find the single instance of that 5px padding or where “blue” suddenly changed from #4fc3f7 to #29b6f6.
Co-authored-by: Gerda <106991024+gerdadesign@users.noreply.github.com>
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
|
Thanks @oliviertassinari! @alexfauquette asked me to take over here to finish this post. I'm hoping to get it ready to publish this week. |
|
@alexfauquette let me know what you think about the latest draft here! The biggest changes include a new title and description, as well as a conclusion to try to tie it all together at the end. I also made some smaller edits throughout the text. |
samuelsycamore
requested review from
mnajdova and
danilo-leal
and removed request for
joserodolfofreitas,
flaviendelangle,
DanailH,
cherniavskii,
m4theushw and
samuelsycamore
| I’m not a designer, so I made an ugly switch example using only CSS. | ||
| You can play with those examples in a [codesandbox](https://codesandbox.io/s/fast-http-kv85p5?file=/src/App.js) | ||
| I’m not a designer, so I made an ugly switch example using only CSS— | ||
| you can play around with it in [CodeSandbox](https://codesandbox.io/s/fast-http-kv85p5?file=/src/App.js): |
There was a problem hiding this comment.
What's the name of this element bewteen "CSS" and "you"?
There was a problem hiding this comment.
That is every editor's favorite punctuation mark—the em dash! 😁
|
|
||
| You should add slots to override icons, because it's common to need to replace them, so it should be easy to do. | ||
|
|
||
| Slots should also be added when your component is somewhat independent from the main one. | ||
| For example, a grid can exist without its filter panel, or without its toolbar. | ||
|
|
||
| ## Customization is key |
|
Hey @danilo-leal! 👋 Can we get an OG card for this post? 😁 |
|
Thanks @danilo-leal! Personally I thought @alexfauquette's red handwriting in that screenshot was endearing 😂 but it wouldn't hurt to make it look a little more professional. As is, I think it contributes well to the overall tone of the piece. I'm cool with it either way. |
|
@danilo-leal The new image in https://deploy-preview-33183--material-ui.netlify.app/blog/making-customizable-components/#good-old-css looks super clean 👌. Happy to see that https://www.notion.so/mui-org/Blog-247ec2bff5fa46e799ef06a693c94917#af943b7359c7439d8457dee53f51f184 work :) |
Co-authored-by: Gerda <106991024+gerdadesign@users.noreply.github.com> Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Preview: https://deploy-preview-33183--material-ui.netlify.app/blog/making-customizable-components/