Template:ColsStart: Difference between revisions
From The Fifth City Wiki
actually use flexbox instead |
m Add documentation template |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div style = "display: flex;"> | <includeonly><div style = "display: flex;"> | ||
<div | |||
style = "{{{style|}}} {{#if:{{{width|}}}|flex-basis: {{{width}}};}}" | |||
{{#if:{{{class|}}}| | |||
class = "{{{class}}}" | |||
}} | |||
> | |||
</includeonly> | |||
<noinclude>{{documentation}}</noinclude> | |||
Latest revision as of 08:54, 23 June 2025
| Template documentation follows |
|---|
| Note: the template above may sometimes be partially or fully invisible. |
| Visit Template:ColsStart/doc to edit this documentation. (How does this work?) |
Creates a set of columns. Uses flexbox, so columns will resize to fit different containers as needed, though if a target width is listed columns will try to match. Used in conjunction with Template:NextCol and MUST be ended with Template:ColsEnd.
Parameters[edit]
width(optional): Defines the target width of the column.class(optional): Adds any classes listed to the column.style(optional): Applies inline css in this argument to the column.
Example usage[edit]
{{ColsStart|width = 10%}}
This is a pretty thin column, so even a little text will likely wrap a lot. I'll write a few more sentences here to show this, because why not? Or, maybe two.... Well, it'd be three now. Or four? Five? Okay, it has to end somewhere.
{{NextCol|width = 200px|class = hastooltip|style = padding: 5px; border: 2px dashed gray;}}
Hover over me :)
<div class = "tooltip">Boo!</div>
{{NextCol|style = color: red; padding: 10px;}}
== Ooooh spooky scary red text!! ==
[[File:Appallingsecret.png|right]]
Send shivers down your spine...
{{ColsEnd}}
This is a pretty thin column, so even a little text will likely wrap a lot. I'll write a few more sentences here to show this, because why not? Or, maybe two.... Well, it'd be three now. Or four? Five? Okay, it has to end somewhere.
Hover over me :)
Boo!
