Columns
Creating columns in a post is an often sought after effect.
While there are many solutions, most require inline style and are not (very) responsive.
Using the following approach, you forego all these issues.
css3 This BBCode has no inline style!
pencil BBCode usage
[column={HASHMAP=left:1,right:2;preFilter=strtolower;postFilter=#int} #requireAncestor=clearfix]{TEXT}[/column]
html5 HTML replacement
<div class="column{@column}">{TEXT}</div>
question Help line
Create a column: [column=1|2 or left|right]Text[/column]
Explanation
HASHMAP=left:1,right:2;preFilter=strtolower;postFilter=#int
angle-double-right HASHMAP
: makes it so, that the left
and right
text is turned into its respective integer.
angle-double-right preFilter
: turns the user entered string to lowercase, so users can also use LEFT
, RiGhT
, etc…
angle-double-right postFilter
: double checks if the correct value is found, we can only use integers (1
and 2
).
#requireAncestor=clearfix
angle-double-right clearfix
: as phpBB uses float: left;
and float: right
to create these columns, a clearfix is required at some point. So we make sure that columns are only allowed when they are inside a [clearfix]
tag. It’s set to Ancestor
instead of Parent
, to make it possible to nest columns within eachother. Reference: clearfix
Examples
[clearfix]
[column=1]This is the left column[/column]
[column=2]This is the right column[/column]
[/clearfix]
This is the left column
This is the right column
[clearfix]
[column=left]
[column=1]This is the first column[/column]
[column=right]This is the second column[/column]
[/column]
[column=right]
[align=center]This is the third column[/align]
[/column]
[/clearfix]
This is the first column
This is the second column
This is the third column
[clearfix]
[column=left]
[column=1]This is the first column[/column]
[column=2]This is the second column[/column]
[/column]
[column=right]
[column=left]This is the third column[/column]
[column=right]This is the fourth column[/column]
[/column]
[/clearfix]
This is the first column
This is the second column
This is the third column
This is the fourth column