Základní layout patičky

Rozdělení hlavičky na vrchní a spodní část (footer__top, header__footer) podle potřeby

Komponenty pojmenováváme stylem grandparent__child, parent__child. Použítí "__" vícekrát je podle zápisu BEM špatně.

Základní rozvržení patičky

{* Footer - Simple *}

<footer class="footer">
    <div class="footer__content --content --flex">

    </div>
</footer>
{* Footer - Advanced *}

<footer class="footer">

    <div class="footer__top">
        <div class="footer__content --content --flex">

        </div>
    </div>
    <div class="footer__bottom">
        <div class="footer__content --content --flex">

        </div>
    </div>

</footer>

Jak například vypadá footer top?

    <div class="footer__top">
        <div class="footer__content --content --flex">

            {* Footer | Menu *}

            <div class="footer__section --w-12 --w-s-6 --w-l-3">
                <h3 class="footer__title">
                    {$web['FOOTER_RUBRICS_HEADING']}
                </h3>
                <nav class="footer__menu">
                    <ul class="footer__menu-list">
                        {foreach $footerNav as $item}
                            <li class="footer__menu-item">
                                <a class="footer__menu-link --link-rev" href="{$item|link}">
                                    {$item|name|striptags}
                                </a>
                            </li>
                        {/foreach}
                    </ul>
                </nav>
            </div>

		    {* Footer | Menu *}


            <div class="footer__section --w-12 --w-s-6 --w-l-3">
                <h3 class="footer__title">
                    {$web['FOOTER_NAV_HEADING']}
                </h3>
                <nav class="footer__menu">
                    <ul class="footer__menu-list">
                        {foreach $footerNav as $item}
                            <li class="footer__menu-item">
                                <a class="footer__menu-link --link-rev" href="{$item|link}">
                                    {$item|name|striptags}
                                </a>
                            </li>
                        {/foreach}
                    </ul>
                </nav>
            </div>

		{* Footer | Contact *}

            <div class="footer__section --w-12 --w-l-6">
                <h3 class="footer__title footer__title--contact">
                    {$web['FOOTER_CONTACT_HEADING']}
                </h3>

                {* Footer | Contact card *}
                    {include '../modules/contact-card-footer.latte'}
            </div>
        </div>
    </div>

Jak například vypadá footer bottom?

    <div class="footer__bottom">

        <div class="footer__content --content --flex">
            {* Footer | Social *}
            <ul class="footer__social">

                <li class="footer__social-item" n:if="$web['FACEBOOK'] !== '#'">
                    <a class="footer__social-link  icon icon--facebook" href="{$web['FACEBOOK']}">
                        {$web['FACEBOOK_LABEL']}
                    </a>
                </li>
            </ul>

            <div class="footer__copyright">
                {$web['FOOTER_COPYRIGHT']|replace:"%YEAR%":date("Y")|noescape}
            </div>

        </div>
    </div>

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*