Last active
November 20, 2021 06:15
-
-
Save chrisdpeters/3fc1efb7251fea9d7b853a5ca939187a to your computer and use it in GitHub Desktop.
Building long HTML class names
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
function build_banner_class(int $age) : array { | |
$banner_class = ['banner']; | |
if ($age >= 21) { | |
$banner_class[]= 'banner--boogie'; | |
} | |
$banner_class = array_merge($banner_class, [ | |
"color-$color", | |
"bg-color-$bg_color", | |
"text-$align", | |
]); | |
return $banner_class; | |
} | |
?> | |
<div class="<?= implode(' ', build_banner_class(14)) ?>"> | |
Let's watch some iCarley. | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="banner color-<?php echo $color; ?> bg-color-<?php echo $bg_color; ?> text-<?php echo $align; ?> pb-<?php if ($padding_bottom) : ?><?php echo $padding_bottom; ?><?php else : ?>pb-0<?php endif; ?>"> | |
It goes on for days and days... | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="<?= implode(' ', [ | |
'banner', | |
"color-$color", | |
"bg-color-$bg_color", | |
"text-$align", | |
'pb-' . $padding_bottom ?: '0', | |
]) ?>"> | |
It's so much easier to read a list vertically. | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="<%= [ | |
'banner', | |
"color-#{color}", | |
"bg-color-#{bg_color}", | |
"text-#{align}", | |
"pb-#{padding_bottom || '0'}", | |
].join(' ') %>"> | |
It is so much easier to read a list vertically. | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div className="{[ | |
'banner', | |
`color-${color}', | |
`bg-color-${bgColor}', | |
`text-${align}`, | |
`pb-${paddingBottom ? paddingBottom : '0'}`, | |
].join(' ')}"> | |
It is so much easier to read a list vertically. | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="banner color-<?= $color ?> bg-color-<?= $bg_color ?> text-<?= $align ?> pb-<? if ($padding_bottom) : ?><?= $padding_bottom ?><? else : ?>pb-0<? endif ?>"> | |
It goes on for days and days... | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment