Footer

Split footer into top and bottom part (footer__top, footer__bottom) as needed

We name the components using the grandparent__child, parent__child style. Using "__" multiple times is wrong according to BEM notation.

Basic footer layout

{* 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>

Example in practice

{* Footer - Advanced *}

<footer class="footer">

    <div class="footer__top">
        <div class="footer__content --content --flex">
            <div class="footer__item --w-12 --w-m-3 --w-l-5 --flex">
                <div class="footer__wrap">
                <h3 class="footer__title js--footer-title footer__title--active" data-target="#infoMenu">      Important information</h3>
                    <ul class="footer__menu js--active" id="infoMenu">
                    
                            <li class="footer__item">
                                <a class="footer__link --link-rev" href="#">
                                    Menu item footer
                                </a>
                            </li>
                    
                    </ul>
                </div>

                <div class="footer__wrap">
                    <h3 class="footer__title js--footer-title" data-target="#rubricMenu"></h3>
                    <ul class="footer__menu" id="rubricMenu">
                            <li class="footer__item">
                                <a class="footer__link --link-rev" href="#">
                                    Menu item footer
                                </a>
                            </li>
                    </ul>
                </div>
            </div>

            <div class="footer__item --w-12 --w-m-4 --w-l-3 --flex --flex-column footer__item--socials">
        
                <a n:if="true" href="#" class="footer__facebook --flex --flex-centre-y">
                    Facebook
                </a>
            </div>

            <div class="footer__item --w-12 --w-m-5 --w-l-4 --flex footer__item--contact">
                {include "../modules/contact-box.latte"}
            </div>
        </div>
    </div>
    <div class="footer__bottom">
        <div class="footer__content --content --flex --flex-space">
            <div class="footer__copyright footer__small">
                {$web['COPYRIGHT']|replace:"%YEAR%":date("Y")|nl2br|noescape}
            </div>

            <div class="footer__madeby footer__small">
                {$web['FOOTER_MADEBY']|noescape}
            </div>
        </div>
    </div>

</footer>

/* Footer */

.footer{
	padding: 40px 0 40px 0;
	background: $color__text;
	color: #fff;
	
	@include media($medium){
		padding: 80px 0 60px 0;
	}
}

.footer__top{
	margin-bottom: 50px;
}

/* Footer | Title */

.footer__title{
	font-size: 1.4rem;
	font-weight:  700;
	text-transform:uppercase;
	color: #fff;
	margin: 0 0 15px 0;
	padding-left: 25px;
	position: relative;
	
	@include media($tiny){
		padding-left: 0px;
		margin: 0 0 25px 0;
	}
	
	
	&::before{
		@include pseudo(block, absolute);
		left:0;
		top: 0px;
		width: 10px;
		height: 10px;
		border-right: 1px solid $color__primary;
		border-bottom: 1px solid $color__primary;
		transform:rotate(45deg);
		
		@include media($tiny){
			content: none;
		}
	}
}


.footer__title--active{
	&::before{
		transform: rotate(-135deg);
		top: 6px;
	}
}


.footer__item--contact{
	justify-content: center;
	
	
	@include media($medium){
		justify-content: flex-end;
	}
}


.footer__item--socials{
	order: 3;
	@include media($medium){
		order: unset;
	}
}

.footer__menu{
	max-height: 0;
	overflow: hidden;
	padding-left: 25px;
	transition: max-height 0.3s ease-in-out;
	
	@include media($tiny){
		max-height: none;
		padding-left: 0px;
	}
}


/* Footer | Wrap */

.footer__wrap{
	max-width: 245px;
	width: 100%;
	margin: 0 0 30px 0;
	
	@include media($xlarge){
		max-width: 295px;
	}
}

/* Footer | Link */

.footer__link{
	font-size: 1.3rem;
	text-transform:uppercase;
	color: $color__gray;
	padding: 8px 0;
}

.footer__heureka{
	height: 130px;
	width: 100%;
	background: #fff;
	margin: 0 0 40px 0;
}

.footer__facebook{
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	justify-content: center;
	
	@include media($medium){
		justify-content: flex-start;
	}
	
	&::before{
		@include pseudo(block, static);
		width: 34px;
		height: 34px;
		background: url("/img/facebook-logo.svg") no-repeat 0 0/cover;
		margin: 0 8px 0 0;
	}
	

}


.footer__small{
	font-size: 1.3rem;
	color: $color__gray-darker;
}

.footer__copyright{
	max-width: 625px;
	margin: 0 0 20px 0;
}


.footer__content{
	
	.footer__bottom &{
		justify-content: center;
		text-align: center;
		@include media($large){
			text-align: left;
			justify-content: flex-start;
		}
	}

}

.footer__madeby{

	@include media($large){
		margin-left: auto;
	}
	
	
	a{
		color: $color__gray-darker;
		
		&:hover, &:focus{
			color: $color__primary;
		}
	}
}