Template:ColsStart: Difference between revisions

From The Fifth City Wiki
Only include starting portion
m Add documentation template
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<div style = "display: flex;">
<includeonly><div style = "display: flex;">
     <div
     <div
         {{#if:{{{width}}}|
         style = "{{{style|}}} {{#if:{{{width|}}}|flex-basis: {{{width}}};}}"
            style = "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!


Ooooh spooky scary red text!![edit]

Send shivers down your spine...