Differences

This shows you the differences between two versions of the page.

--- wiki:blockquotes [2023/02/18 06:43] – removed - external edit (Unknown date) 127.0.0.1
+++ wiki:blockquotes [2023/02/18 06:44] (current) – ↷ Page moved from contributing:blockquotes to wiki:blockquotes suedunham
@@ Line 1: / Line 1: @@
+====== Blockquote style development ======
+How should blockquotes look? There are several ways one could go about formatting such text. The [[bootstrap_wrapper_plugin]] gives a few off-the-rack options that work readily enough with whichever Bootswatch theme is in use [edit: the dark themes still will need tweaking].
+Fussy stylists may want something more bespoke, however, and the [[wrap_plugin]] could offer a broader range of possibilities. That may ultimately be easier on editors too if a more complex and maybe hard-to-remember recipe could be reduced to a simple ''%%<WRAP blockquote>%%''
+===== Bootstrap Wrapper =====
+==== Default callout ====
+A callout in the default style is quick and easy. One may not like the look of it, however, and it is what it is.
+<code>
+<callout>
+Lorem ipsum…
+</callout>
+</code>
+<callout>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</callout>
+==== Callout with icon ====
+Adding an icon can look good and clarify that the text is a quotation. However, remembering the name of the icon every time one want to use this can be problematic.
+<code>
+<callout icon="mdi mdi-format-quote-open">
+Lorem ipsum…
+</callout>
+</code>
+<callout icon="mdi mdi-format-quote-open">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</callout>
+==== Plain panel ====
+A panel is an even more minimalistic approach. Maybe too minimalistic, but it's there.
+<code>
+<panel>
+Lorem ipsum…
+</panel>
+</code>
+<panel>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</panel>
+==== Panel with icon ====
+These are pretty goofy. The icon doesn't even appear unless the panel is given a title.
+<code>
+<panel title="And I quote…" icon="mdi mdi-format-quote-open">
+Lorem ipsum…
+</panel>
+</code>
+<panel title="And I quote…" icon="mdi mdi-format-quote-open">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</panel>
+===== Wrap =====
+These have more possibilities, and they're not all going to be demonstrated here. Besides, that would require the present editor to finish all the additions planned to the wiki text in the near term before trying to back everything up and upload backend style adjustments. Since this page is one of those near-term additions, we'll just have to return to it anon.
+It seems that the Wrap plugin's Notes may be a good model for working an icon in. This then would be part of the style and simply appear without the need on the editor's part to remember what to type for it. Barring that, simple ''padding'', ''border'', and perhaps ''font-style'' or ''background-color'' stylings could achieve the desired effect.
+More color constants should be added, however: the wiki currently only has them for the dark Bootswatch themes, and that only because the present editor felt the need to fix some things about them. Any CSS work with Bootstrap3 involving color gets multiplied out to all of those themes, at least for completists wishing to enable maximum versatility. The presence of a border maybe should vary by theme as well. Any corner rounding should too.
+A more interesting question is how to set it up. Should one go with simple and singular, like ''%%<WRAP blockquote>%%'' or use a few more classes to provide options, adding things like ''%%<WRAP blockquote no-border italic>%%'' into the mix?