Extensibility docs

[drauch]

The current docs on extensibility are not very comprehensive.

I currently want to write a new variant for a button and I'm finding it necessary to do a LOT of code reading to understand enough to answer the following questions:

• Is there any guidance on extensions in general?
• Which mixins does Boostrap have?
• Which variables should you use and when?
• Which CSS properties must/should/could/must not be set by a new variant.

Questions like these seem to be completely unanswered by the docs material.

I'd appreciate it very much if there would be more investment into the extensibility docs. Compared to the very good docs on components or the grid system it really lacks quite important information. I know that this is no "up for grabs" kind of issue, but my understanding is that Bootstrap should be an extensible platform to build upon. I can't see that happening in a high-quality and Bootstrap-intended-way-of-doing-things-way without more documentation.

[sts-ryan-holton]

I think adding more relevant variables / mixins to each of the component docs is a good idea so we know what variables we can use. Right now I find myself having to constantly look at the variables Github file, or Google for relevant mixins to use.

I hope that with 4.3 these are at least partially added, with more appearing in v5

[rachelmflowers]

I also agree that adding the available variables to each component's documentation would help greatly to know what can be changed and what the defaults are. As well as mixins used.

I also find myself scrolling through the variables file trying to figure out what can be changed, and many of my other colleagues forgo this (since they find it a hassle) and just write their own styles to make the changes instead of modifying the variables and rebuilding the stylesheet.

I really like how Bulma does this with their variables.
https://bulma.io/documentation/components/card/#variables

[mdo]

Provided variables would be rad actually. Curious if we can hook that up with Hugo and how best we'd accomplish it. Let me know if you have any thoughts @MartijnCuppens or @XhmikosR.

[XhmikosR]

The mixins branch is something I plan to migrate eventually to Hugo. Not sure if this will cover the request but it should be better than nothing.

…

On Tue, Aug 13, 2019, 22:07 Mark Otto ***@***.***> wrote: Provided variables would be rad actually. Curious if we can hook that up with Hugo and how best we'd accomplish it. Let me know if you have any thoughts @MartijnCuppens <https://github.com/MartijnCuppens> or @XhmikosR <https://github.com/XhmikosR>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#28049?email_source=notifications&email_token=AACVLNLENWXSI6X7TKXAYT3QEMA6RA5CNFSM4GPZVTS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4GU3UQ#issuecomment-520965586>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACVLNKSFQDOGBAQRCMQMZDQEMA6RANCNFSM4GPZVTSQ> .

[mdo]

• Which mixins does Boostrap have?
• Which variables should you use and when?

Sass documentation (variables, mixins, maps, and loops) is coming in #32747, so that should be covered :). Are we missing anything there?

• Is there any guidance on extensions in general?
• Which CSS properties must/should/could/must not be set by a new variant.

Not 100% sure what folks are thinking here. Is this covered by our Approach page? Perhaps there's more fidelity and detail we should be adding?

Thinking about extending in general, some other ideas come to mind. Would something like this work for an additional Extend page?

- Community extensions are highly encouraged
- Common ways to extend
  - Utilities API
  - Custom builds
  - JS frameworks
  - Additional components
  - Snippets and themes
- Common approaches
  - Override CSS
  - Use Sass to modify, remove, or add
  - Custom builds of JS with Webpack, Parcel, and more